From 2dd162990c34ee4c242304cf1c7611c9480fc8ea Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 16 Apr 2026 21:45:21 +0200 Subject: [PATCH 1/7] Reviewed variable removals --- .../Attachment/styling/Attachment.scss | 112 ++---------------- .../Attachment/styling/AttachmentActions.scss | 68 +---------- src/components/Attachment/styling/Audio.scss | 32 +---- .../Attachment/styling/Geolocation.scss | 32 +---- .../Attachment/styling/ModalGallery.scss | 26 ++-- .../styling/UnsupportedAttachment.scss | 32 +---- .../Attachment/styling/VoiceRecording.scss | 36 +----- src/components/Channel/styling/Channel.scss | 38 +----- .../ChannelHeader/styling/ChannelHeader.scss | 32 +---- .../ChannelList/styling/ChannelList.scss | 96 +-------------- .../DateSeparator/styling/DateSeparator.scss | 15 +-- .../Dialog/styling/ContextMenu.scss | 83 +++---------- .../styling/EmptyStateIndicator.scss | 4 +- src/components/Message/styling/Message.scss | 37 ++---- .../MessageAlsoSentInChannelIndicator.scss | 15 +-- .../styling/MessageTranslationIndicator.scss | 14 +-- .../Message/styling/ReminderNotification.scss | 39 ++---- .../styling/AttachmentPreview.scss | 59 ++------- .../styling/MessageComposer.scss | 48 ++------ .../styling/UnsupportedAttachmentPreview.scss | 32 +---- .../MessageList/styling/MessageList.scss | 36 +----- .../styling/VirtualizedMessageList.scss | 29 +---- src/components/Thread/styling/Thread.scss | 34 +----- .../Thread/styling/ThreadHeader.scss | 34 +----- .../ThreadList/styling/ThreadList.scss | 30 ++--- src/components/Tooltip/styling/Tooltip.scss | 27 +---- src/styling/_utils.scss | 12 -- 27 files changed, 143 insertions(+), 909 deletions(-) diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index ddbbcd12d..eba971efa 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -3,107 +3,6 @@ .str-chat { /* The margin applied to every attachment in the attachment list */ --str-chat__attachment-margin: var(--spacing-xs); - /* The border radius used for the borders of the component */ - --str-chat__attachment-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__attachment-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__attachment-list-background-color: transparent; - - /* Top border of the component */ - --str-chat__attachment-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__attachment-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__attachment-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__attachment-list-border-inline-end: none; - - /* Box shadow applied to the component */ - --str-chat__attachment-list-box-shadow: none; - - /* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --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; - - /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-block-start: none; - - /* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-inline-end: none; - - /* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-box-shadow: none; - - /* The border radius used for the borders of image gallery attachments */ - --str-chat__image-gallery-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of image gallery attachments */ - --str-chat__image-gallery-attachment-color: var(--text-primary); - - /* The background color of image gallery attachments */ - --str-chat__image-gallery-attachment-background-color: transparent; - - /* Top border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-block-start: none; - - /* Bottom border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-inline-end: none; - - /* Box shadow applied to image gallery attachments */ - --str-chat__image-gallery-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(--text-primary); - - /* The background color of file attachments */ - --str-chat__file-attachment-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__file-attachment-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__file-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__file-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__file-attachment-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__file-attachment-box-shadow: none; } .str-chat__attachment-list { @@ -121,11 +20,14 @@ gap: var(--spacing-xs); min-width: 0; - @include utils.component-layer-overrides('attachment-list'); + background: transparent; + color: var(--text-primary); .str-chat__message-attachment--image, .str-chat__message-attachment--video { - @include utils.component-layer-overrides('image-attachment'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); } .str-chat__message-attachment { @@ -284,7 +186,9 @@ } .str-chat__message-attachment-file--item { - @include utils.component-layer-overrides('file-attachment'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); } .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy { diff --git a/src/components/Attachment/styling/AttachmentActions.scss b/src/components/Attachment/styling/AttachmentActions.scss index ca7f086d7..153c5f02a 100644 --- a/src/components/Attachment/styling/AttachmentActions.scss +++ b/src/components/Attachment/styling/AttachmentActions.scss @@ -1,63 +1,6 @@ -@use '../../../styling/utils'; - -.str-chat { - /* The border radius used for attachment actions */ - --str-chat__attachment-actions-border-radius: 0; - - /* The text/icon color of attachment actions */ - --str-chat__attachment-actions-color: var(--button-secondary-text); - - /* The background color of attachment actions */ - --str-chat__attachment-actions-background-color: transparent; - - /* Top border of attachment actions */ - --str-chat__attachment-actions-border-block-start: none; - - /* Bottom border of attachment actions */ - --str-chat__attachment-actions-border-block-end: none; - - /* Left (right in RTL layout) border of attachment actions */ - --str-chat__attachment-actions-border-inline-start: none; - - /* Right (left in RTL layout) border of attachment actions */ - --str-chat__attachment-actions-border-inline-end: none; - - /* Box shadow applied to attachment actions */ - --str-chat__attachment-actions-box-shadow: none; - - /* The border radius used for an attachment action */ - --str-chat__attachment-action-border-radius: 0; - - /* The text/icon color of an attachment action */ - --str-chat__attachment-action-color: var(--button-secondary-text); - - /* The background color of an attachment action */ - --str-chat__attachment-action-background-color: transparent; - - /* Top border of an attachment action */ - --str-chat__attachment-action-border-block-start: none; - - /* Bottom border of an attachment action */ - --str-chat__attachment-action-border-block-end: none; - - /* Left (right in RTL layout) border of an attachment action */ - --str-chat__attachment-action-border-inline-start: none; - - /* Right (left in RTL layout) border of an attachment action */ - --str-chat__attachment-action-border-inline-end: none; - - /* Box shadow applied to an attachment action */ - --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(--accent-primary); - - /* The text/icon color of an attachment action while in pressed state */ - --str-chat__attachment-action-focus-color: var(--accent-primary); -} - .str-chat__message-attachment-actions { - @include utils.component-layer-overrides('attachment-actions'); + background: transparent; + color: var(--button-secondary-text); .str-chat__message-attachment-actions-form { display: flex; @@ -65,7 +8,8 @@ height: 48px; .str-chat__message-attachment-actions-button { - @include utils.component-layer-overrides('attachment-action'); + background: transparent; + color: var(--button-secondary-text); width: 100%; padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); white-space: nowrap; @@ -77,11 +21,11 @@ &.str-chat__button { &:active { - color: var(--str-chat__attachment-action-active-color); + color: var(--accent-primary); } &:focus-visible { - color: var(--str-chat__attachment-action-focus-color); + color: var(--accent-primary); outline: none; } } diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index dd721a72d..e52d52d71 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -1,35 +1,9 @@ @use '../../../styling/utils'; -.str-chat { - /* Border radius applied audio widget */ - --str-chat__audio-attachment-widget-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* Text color used in audio widget */ - --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; - - /* Top border of audio widget */ - --str-chat__audio-attachment-widget-border-block-start: none; - - /* Bottom border of audio widget */ - --str-chat__audio-attachment-widget-border-block-end: none; - - /* Left (right in RTL layout) border of audio widget */ - --str-chat__audio-attachment-widget-border-inline-start: none; - - /* Right (left in RTL layout) border of audio widget */ - --str-chat__audio-attachment-widget-border-inline-end: none; - - /* Box shadow applied to audio widget */ - --str-chat__audio-attachment-widget-box-shadow: none; -} - .str-chat__message-attachment-audio-widget { - @include utils.component-layer-overrides('audio-attachment-widget'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); flex: 1 1 auto; width: 100%; min-width: 0; diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index 48d4b94da..134fdf26a 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -1,35 +1,9 @@ @use '../../../styling/utils'; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__geolocation-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of geolocation attachments */ - --str-chat__geolocation-attachment-color: var(--chat-text); - - /* The background color of geolocation attachments */ - --str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment); - - /* Top border of geolocation attachments */ - --str-chat__geolocation-attachment-border-block-start: none; - - /* Bottom border of geolocation attachments */ - --str-chat__geolocation-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of geolocation attachments */ - --str-chat__geolocation-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of geolocation attachments */ - --str-chat__geolocation-attachment-border-inline-end: none; - - /* Box shadow applied to geolocation attachments */ - --str-chat__geolocation-attachment-box-shadow: none; -} - .str-chat__message-attachment-geolocation { - @include utils.component-layer-overrides('geolocation-attachment'); + background: var(--chat-bg-attachment); + color: var(--chat-text); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); display: flex; flex-direction: column; height: 200px; diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index 7e3d22c19..3f28e2464 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -1,19 +1,15 @@ @use '../../../styling/utils'; -.str-chat__message { - --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error); - --str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse); - --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__attachment-list { .str-chat__message-attachment--gallery { $max-width: var(--str-chat__attachment-max-width); .str-chat__modal-gallery { - @include utils.component-layer-overrides('image-gallery-attachment'); + background: transparent; + color: var(--text-primary); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; @@ -141,12 +137,12 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--str-chat__modal-gallery-loading-background); + background-color: var(--chat-bg); background-image: linear-gradient( 90deg, - var(--str-chat__modal-gallery-loading-base) 0%, - var(--str-chat__modal-gallery-loading-highlight) 50%, - var(--str-chat__modal-gallery-loading-base) 100% + var(--skeleton-loading-base) 0%, + var(--skeleton-loading-highlight) 50%, + var(--skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -168,8 +164,8 @@ width: 2.75rem; height: 2.75rem; border-radius: var(--radius-max); - background-color: var(--str-chat__modal-gallery-load-failed-indicator-background); - color: var(--str-chat__modal-gallery-load-failed-indicator-color); + background-color: var(--accent-error); + color: var(--text-on-inverse); svg { width: 1.125rem; diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss index c9c2265bb..29a314cf3 100644 --- a/src/components/Attachment/styling/UnsupportedAttachment.scss +++ b/src/components/Attachment/styling/UnsupportedAttachment.scss @@ -1,36 +1,10 @@ @use '../../../styling/utils'; @use '../../../styling/variables/font' as font; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__unsupported-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__unsupported-attachment-color: var(--text-primary); - - /* The background color of file attachments */ - --str-chat__unsupported-attachment-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__unsupported-attachment-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__unsupported-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__unsupported-attachment-box-shadow: none; -} - .str-chat__message-attachment-unsupported { - @include utils.component-layer-overrides('unsupported-attachment'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); display: flex; align-items: center; justify-content: center; diff --git a/src/components/Attachment/styling/VoiceRecording.scss b/src/components/Attachment/styling/VoiceRecording.scss index 48f5314f7..5c81ee683 100644 --- a/src/components/Attachment/styling/VoiceRecording.scss +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -1,35 +1,7 @@ -@use '../../../styling/utils'; - -.str-chat { - /* Border radius applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* Text color used in audio recording widget */ - --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; - - /* Top border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-start: none; - - /* Bottom border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-end: none; - - /* Left (right in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-start: none; - - /* Right (left in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-end: none; - - /* Box shadow applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-box-shadow: none; -} - .str-chat__message-attachment__voice-recording-widget { - @include utils.component-layer-overrides('voice-recording-attachment-widget'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); display: flex; align-items: center; justify-content: center; @@ -49,7 +21,7 @@ a { cursor: pointer; text-decoration: none; - color: var(--str-chat__voice-recording-attachment-widget-color); + color: var(--text-primary); } .str-chat__message-attachment-download-icon { diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index bbf264e25..79024ebb0 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__channel { height: 100%; display: flex; @@ -178,41 +176,13 @@ } } -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__channel-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__channel-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__channel-background-color: var(--background-core-app); - - /* Box shadow applied to the component */ - --str-chat__channel-box-shadow: none; - - /* Top border of the component */ - --str-chat__channel-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__channel-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__channel-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__channel-border-inline-end: none; - - /* The base surface color behind the loading shimmer */ - --str-chat__channel-loading-state-color: var(--background-core-surface); -} - .str-chat__channel { - @include utils.component-layer-overrides('channel'); + background: var(--background-core-app); + color: var(--text-primary); } @mixin channel-loading-shimmer { - background-color: var(--str-chat__channel-loading-state-color); + background-color: var(--background-core-surface); background-image: linear-gradient( 90deg, var(--skeleton-loading-base) 0%, @@ -281,7 +251,7 @@ } .str-chat__loading-channel-message-input-pill { - border-radius: var(--str-chat__message-input-border-radius); + border-radius: var(--radius-3xl); } } } diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss index 9c11285eb..796cd1869 100644 --- a/src/components/ChannelHeader/styling/ChannelHeader.scss +++ b/src/components/ChannelHeader/styling/ChannelHeader.scss @@ -2,37 +2,11 @@ .str-chat { --str-chat__channel-header-height: 72px; - - /* The border radius used for the borders of the component */ - --str-chat__channel-header-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__channel-header-color: 0; - - /* The background color of the component */ - --str-chat__channel-header-background-color: var(--background-core-elevation-1); - - /* Top border of the component */ - --str-chat__channel-header-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__channel-header-border-block-end: 1px solid var(--border-core-default); - - /* Left (right in RTL layout) border of the component */ - --str-chat__channel-header-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__channel-header-border-inline-end: none; - - /* Box shadow applied to the component */ - --str-chat__channel-header-box-shadow: none; - - /* The text/icon color used to display member information about the channel */ - --str-chat__channel-header__data__subtitle-color: var(--text-secondary); } .str-chat__channel-header { - @include utils.component-layer-overrides('channel-header'); + background: var(--background-core-elevation-1); + border-block-end: 1px solid var(--border-core-default); @include utils.header-layout; .str-chat__channel-header__start { @@ -62,6 +36,6 @@ .str-chat__channel-header__data__subtitle { font: var(--str-chat__font-caption-default); - color: var(--str-chat__channel-header__data__subtitle-color); + color: var(--text-secondary); } } diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index 4a8e6cc8b..df706f01a 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -1,18 +1,6 @@ @use '../../../styling/utils'; .str-chat { - /* The border radius used for the borders of the component */ - --str-chat__channel-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__channel-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__channel-list-background-color: var(--background-core-elevation-1); - - /* Box shadow applied to the component */ - --str-chat__channel-list-box-shadow: none; - /* Animation duration used when the component enters or exits */ --str-chat__channel-list-transition-duration: 180ms; @@ -27,72 +15,6 @@ /* Default mobile overlay width of the channel list. Override to match custom layouts. */ --str-chat__channel-list-mobile-width: 100%; - - /* Top border of the component */ - --str-chat__channel-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__channel-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --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(--border-core-default); - - /* The border radius used for the borders of the load more button */ - --str-chat__channel-list-load-more-border-radius: var( - --str-chat__cta-button-border-radius - ); - - /* The text/icon color of the load more button */ - --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color); - - /* The background color of the load more button */ - --str-chat__channel-list-load-more-background-color: var( - --str-chat__cta-button-background-color - ); - - /* Box shadow applied to the load more button */ - --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow); - - /* Top border of the load more button */ - --str-chat__channel-list-load-more-border-block-start: var( - --str-chat__cta-button-border-block-start - ); - - /* Bottom border of the load more button */ - --str-chat__channel-list-load-more-border-block-end: var( - --str-chat__cta-button-border-block-end - ); - - /* Left (right in RTL layout) border of the load more button */ - --str-chat__channel-list-load-more-border-inline-start: var( - --str-chat__cta-button-border-inline-start - ); - - /* Right (left in RTL layout) border of the load more button */ - --str-chat__channel-list-load-more-border-inline-end: var( - --str-chat__cta-button-border-inline-end - ); - - /* The background color of the load more button in pressed state */ - --str-chat__channel-list-load-more-pressed-background-color: var( - --str-chat__cta-button-pressed-background-color - ); - - /* The background color of the load more button in disabled state */ - --str-chat__channel-list-load-more-disabled-background-color: var( - --str-chat__cta-button-disabled-background-color - ); - - /* The text/icon color of the load more button in disabled state */ - --str-chat__channel-list-load-more-disabled-color: var( - --str-chat__cta-button-disabled-color - ); - - /* The text/icon color for the empty list state */ - --str-chat__channel-list-empty-indicator-color: var(--text-secondary); } .str-chat__channel-list { @@ -120,7 +42,9 @@ var(--str-chat__channel-list-transition-easing); width: var(--str-chat__channel-list-width); @include utils.scrollable-y; - @include utils.component-layer-overrides('channel-list'); + background: var(--background-core-elevation-1); + color: var(--text-primary); + border-inline-end: 1px solid var(--border-core-default); .str-chat__channel-list-inner { height: 100%; @@ -151,26 +75,16 @@ display: flex; justify-content: center; margin: var(--space-8) 0; - - .str-chat__load-more-button__button { - @include utils.flex-row-center; - } - } - - .str-chat__load-more-button__button { - @include utils.component-layer-overrides('channel-list-load-more'); - width: 80%; } .str-chat__channel-list-empty { - --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color); @include utils.empty-theme('channel-list'); - color: var(--str-chat__channel-list-empty-indicator-color); + color: var(--text-secondary); } /* Mobile: hide when nav closed; when open show as overlay. */ @media (max-width: 767px) { - box-shadow: var(--str-chat__channel-list-box-shadow); + box-shadow: none; flex-basis: auto; inset-inline-start: 0; max-width: 100%; diff --git a/src/components/DateSeparator/styling/DateSeparator.scss b/src/components/DateSeparator/styling/DateSeparator.scss index 06ada9532..3fd401e48 100644 --- a/src/components/DateSeparator/styling/DateSeparator.scss +++ b/src/components/DateSeparator/styling/DateSeparator.scss @@ -1,15 +1,3 @@ -@use '../../../styling/utils'; - -.str-chat { - --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; - --str-chat__date-separator-border-block-end: none; - --str-chat__date-separator-border-inline-start: none; - --str-chat__date-separator-border-inline-end: none; - --str-chat__date-separator-box-shadow: none; -} .str-chat__date-separator--floating { position: absolute; @@ -23,7 +11,8 @@ } .str-chat__date-separator { - @include utils.component-layer-overrides('date-separator'); + background: transparent; + color: var(--chat-text-system); display: flex; justify-content: center; align-items: center; diff --git a/src/components/Dialog/styling/ContextMenu.scss b/src/components/Dialog/styling/ContextMenu.scss index bc274706f..442c02dc5 100644 --- a/src/components/Dialog/styling/ContextMenu.scss +++ b/src/components/Dialog/styling/ContextMenu.scss @@ -73,52 +73,15 @@ } .str-chat { - /* - * Dialog theme variables (ported from @stream-chat-css v2 Dialog theme), - * set to match the current React SDK styling values in this file. - * - * Note: React uses `str-chat__context-menu` naming; v2 theme calls this "dialog-menu". - */ - --str-chat__dialog-menu-border-radius: var(--radius-lg); - --str-chat__dialog-menu-color: var(--text-primary); - --str-chat__dialog-menu-background-color: var(--background-core-elevation-2); - --str-chat__dialog-menu-border-block-start: none; - --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(--str-chat__box-shadow-3); - - --str-chat__dialog-menu-button-border-radius: var(--radius-md); - --str-chat__dialog-menu-button-color: var(--text-primary); - --str-chat__dialog-menu-button-background-color: transparent; --str-chat__dialog-menu-button-hover-background-color: var(--background-utility-hover); - --str-chat__dialog-menu-button-active-background-color: var( - --background-utility-pressed - ); - --str-chat__dialog-menu-button-focused-background-color: transparent; - --str-chat__dialog-menu-button-disabled-background-color: transparent; - --str-chat__dialog-menu-back-button-hover-background-color: var( - --background-utility-hover - ); - --str-chat__dialog-menu-back-button-active-background-color: var( - --background-utility-pressed - ); - --str-chat__dialog-menu-back-button-focused-background-color: transparent; - --str-chat__dialog-menu-back-button-disabled-background-color: transparent; - --str-chat__dialog-menu-button-border-block-start: none; - --str-chat__dialog-menu-button-border-block-end: none; - --str-chat__dialog-menu-button-border-inline-start: none; - --str-chat__dialog-menu-button-border-inline-end: none; - --str-chat__dialog-menu-button-box-shadow: none; --str-chat__menu-roll-duration: 170ms; --str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1); - --str-chat__menu-submenu-forward-duration: 280ms; - --str-chat__menu-submenu-backward-duration: 400ms; - --str-chat__menu-submenu-forward-ease: cubic-bezier(0.2, 0.95, 0.25, 1); - --str-chat__menu-submenu-backward-ease: cubic-bezier(0.16, 0.92, 0.2, 1); .str-chat__context-menu { - @include utils.component-layer-overrides('dialog-menu'); + background: var(--background-core-elevation-2); + color: var(--text-primary); + box-shadow: var(--str-chat__box-shadow-3); + border-radius: var(--radius-lg); display: flex; flex-direction: column; padding: var(--spacing-xxs); @@ -150,25 +113,19 @@ line-height: var(--typography-line-height-tight); &:hover:not(:disabled) { - background-color: var(--str-chat__dialog-menu-back-button-hover-background-color); + background-color: var(--background-utility-hover); } &:active:not(:disabled) { - background-color: var( - --str-chat__dialog-menu-back-button-active-background-color - ); + background-color: var(--background-utility-pressed); } &:focus-visible:not(:disabled) { - background-color: var( - --str-chat__dialog-menu-back-button-focused-background-color - ); + background-color: transparent; } &:disabled { - background-color: var( - --str-chat__dialog-menu-back-button-disabled-background-color - ); + background-color: transparent; } .str-chat__icon--chevron-right { @@ -185,15 +142,12 @@ } .str-chat__context-menu__body.str-chat__context-menu__body--submenu-forward { - animation-duration: var(--str-chat__menu-submenu-forward-duration, 220ms); + animation-duration: 280ms; animation-name: var( --str-chat__context-menu-submenu-forward-animation, str-chat-context-menu-submenu-forward ); - animation-timing-function: var( - --str-chat__menu-submenu-forward-ease, - cubic-bezier(0.25, 0.9, 0.35, 1) - ); + animation-timing-function: cubic-bezier(0.2, 0.95, 0.25, 1); transform-origin: var( --str-chat__context-menu-submenu-forward-transform-origin, left center @@ -201,15 +155,12 @@ } .str-chat__context-menu__body.str-chat__context-menu__body--submenu-backward { - animation-duration: var(--str-chat__menu-submenu-backward-duration, 320ms); + animation-duration: 400ms; animation-name: var( --str-chat__context-menu-submenu-backward-animation, str-chat-context-menu-submenu-backward ); - animation-timing-function: var( - --str-chat__menu-submenu-backward-ease, - cubic-bezier(0.2, 0.75, 0.2, 1) - ); + animation-timing-function: cubic-bezier(0.16, 0.92, 0.2, 1); transform-origin: var( --str-chat__context-menu-submenu-backward-transform-origin, right center @@ -217,7 +168,9 @@ } .str-chat__context-menu__button { - @include utils.component-layer-overrides('dialog-menu-button'); + background: transparent; + color: var(--text-primary); + border-radius: var(--radius-md); @include utils.button-reset; display: flex; align-items: center; @@ -242,15 +195,15 @@ } &:active:not(:disabled) { - background-color: var(--str-chat__dialog-menu-button-active-background-color); + background-color: var(--background-utility-pressed); } &:focus-visible:not(:disabled) { - background-color: var(--str-chat__dialog-menu-button-focused-background-color); + background-color: transparent; } &:disabled { - background-color: var(--str-chat__dialog-menu-button-disabled-background-color); + background-color: transparent; } .str-chat__icon { diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss index 0f2fb2713..e771a100e 100644 --- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss +++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__empty-channel { --str-chat-icon-color: var(--text-tertiary); display: flex; @@ -11,7 +9,7 @@ position: relative; gap: var(--spacing-xs); text-align: center; - @include utils.component-layer-overrides('channel'); + background: var(--background-core-app); color: var(--text-secondary); font: var(--str-chat__font-caption-default); diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 9ba37c62a..e4571a4ae 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -1,28 +1,12 @@ @use '../../../styling/utils'; .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 */ + /* The width/height of the message options button(s) */ --str-chat__message-options-button-size: var(--size-32); - - --str-chat__message-border-radius: 0; - --str-chat__message-link-color: var(--chat-text-link); - --str-chat__message-mention-color: var(--accent-primary); - --str-chat__message-background-color: transparent; - --str-chat__message-highlighted-background-color: var(--background-core-highlight); --str-chat__message-active-background-color: transparent; - - --str-chat__message-bubble-border-radius: var(--message-bubble-radius-group-bottom); - - --str-chat__blocked-message-border-radius: var(--radius-md); - --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); - - /* Background color for pinned messages (Figma: background/core/highlight) */ - --str-chat__message-pinned-background-color: var(--background-core-highlight); - /* The maximum allowed width of the message component */ --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: 400px; @@ -94,7 +78,7 @@ a { text-decoration: none; - color: var(--str-chat__message-link-color); + color: var(--chat-text-link); } } @@ -165,12 +149,12 @@ } .str-chat__message-mention { - color: var(--str-chat__message-mention-color); font: var(--str-chat__font-body-emphasis); + color: var(--accent-primary); } .str-chat__message { - @include utils.component-layer-overrides('message'); + background: transparent; color: var(--str-chat__message-color, var(--chat-text)); @mixin chat-bubble-spacing { @@ -240,7 +224,7 @@ align-items: center; gap: var(--spacing-xxs); font: var(--str-chat__font-metadata-emphasis); - color: var(--text-primary-text); + color: var(--text-primary); .str-chat__message-pin-indicator__icon { display: flex; @@ -405,10 +389,9 @@ grid-area: message-bubble; position: relative; min-width: 0; - @include utils.component-layer-overrides('message-bubble'); + border-radius: var(--message-bubble-radius-group-bottom); 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; .str-chat__message-text { @@ -481,7 +464,7 @@ .str-chat__message--blocked-inner { @include chat-bubble-spacing; - @include utils.component-layer-overrides('blocked-message'); + border-radius: var(--radius-md); color: var(--str-chat__blocked-message-color, var(--chat-text)); background-color: var(--str-chat__blocked-message-background-color, var(--chat-bg)); @@ -524,7 +507,7 @@ .str-chat__message--highlighted { transition: background-color 0.1s ease-out; - background-color: var(--str-chat__message-highlighted-background-color); + background-color: var(--background-core-highlight); } .str-chat__li:has(.str-chat__message--pinned) { @@ -536,7 +519,7 @@ position: absolute; inset-block: 0; inset-inline: -9999px; - background-color: var(--str-chat__message-pinned-background-color); + background-color: var(--background-core-highlight);; z-index: -1; pointer-events: none; } @@ -545,7 +528,7 @@ /* Fallback for browsers without :has() support */ @supports not selector(:has(a, b)) { .str-chat__message--pinned { - background-color: var(--str-chat__message-pinned-background-color); + background-color: var(--background-core-highlight);; } } diff --git a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss index bdf6ec280..4a696d388 100644 --- a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss +++ b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss @@ -1,23 +1,13 @@ @use '../../../styling/utils'; -.str-chat { - --str-chat__message-also-sent-in-channel-color: var(--text-primary); - --str-chat__message-also-sent-in-channel-background-color: transparent; - --str-chat__message-also-sent-in-channel-border-block-start: none; - --str-chat__message-also-sent-in-channel-border-block-end: none; - --str-chat__message-also-sent-in-channel-border-inline-start: none; - --str-chat__message-also-sent-in-channel-border-inline-end: none; - --str-chat__message-also-sent-in-channel-box-shadow: none; - --str-chat__message-also-sent-in-channel-border-radius: 0; -} - .str-chat__message-also-sent-in-channel { display: flex; align-items: center; gap: var(--spacing-xxs); grid-area: also-sent-in-channel; padding-block: var(--spacing-xxs); - @include utils.component-layer-overrides('message-also-sent-in-channel'); + background: transparent; + color: var(--text-primary); font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { @@ -26,7 +16,6 @@ path { stroke-width: 2px; - stroke: var(--str-chat__message-also-sent-in-channel-color); } } diff --git a/src/components/Message/styling/MessageTranslationIndicator.scss b/src/components/Message/styling/MessageTranslationIndicator.scss index 2e1274670..2f87a7a45 100644 --- a/src/components/Message/styling/MessageTranslationIndicator.scss +++ b/src/components/Message/styling/MessageTranslationIndicator.scss @@ -1,13 +1,3 @@ -@use '../../../styling/utils'; - -.str-chat { - --str-chat__message-translation-indicator-color: var( - --text-primary-text, - var(--text-primary) - ); - --str-chat__message-translation-indicator-background-color: transparent; -} - /* Translation indicator: below reminder in message grid. */ .str-chat__message-translation-indicator { display: flex; @@ -16,8 +6,8 @@ padding-block: var(--spacing-xxs); gap: var(--spacing-xxs); margin: 0; - color: var(--str-chat__message-translation-indicator-color); - @include utils.component-layer-overrides('message-translation-indicator'); + background: transparent; + color: var(--text-primary); &, .str-chat__message-translation-indicator__translation-toggle { diff --git a/src/components/Message/styling/ReminderNotification.scss b/src/components/Message/styling/ReminderNotification.scss index 590f9ff10..057f670f2 100644 --- a/src/components/Message/styling/ReminderNotification.scss +++ b/src/components/Message/styling/ReminderNotification.scss @@ -1,25 +1,3 @@ -@use '../../../styling/utils'; - -.str-chat { - --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; - --str-chat__message-saved-for-later-border-inline-start: none; - --str-chat__message-saved-for-later-border-inline-end: none; - --str-chat__message-saved-for-later-box-shadow: none; - --str-chat__message-saved-for-later-border-radius: 0; - - --str-chat__message-reminder-color: var(--text-primary); - --str-chat__message-reminder-background-color: transparent; - --str-chat__message-reminder-border-block-start: none; - --str-chat__message-reminder-border-block-end: none; - --str-chat__message-reminder-border-inline-start: none; - --str-chat__message-reminder-border-inline-end: none; - --str-chat__message-reminder-box-shadow: none; - --str-chat__message-reminder-border-radius: 0; -} - /* Saved for Later: above pin indicator. Font and spacing aligned with pin indicator. */ .str-chat__message-saved-for-later { display: flex; @@ -28,16 +6,16 @@ grid-area: message-saved-for-later; padding-block: var(--spacing-xxs); margin: 0; - @include utils.component-layer-overrides('message-saved-for-later'); + background: transparent; + color: var(--accent-primary); font: var(--str-chat__font-metadata-emphasis); - svg { + .str-chat__icon { width: var(--icon-size-xs); height: var(--icon-size-xs); path { - stroke-width: 2px; - stroke: var(--str-chat__message-saved-for-later-color); + stroke-width: var(--icon-stroke-emphasis); } } } @@ -50,11 +28,14 @@ grid-area: message-reminder; padding-block: var(--spacing-xxs); margin: 0; - @include utils.component-layer-overrides('message-reminder'); + background: transparent; + color: var(--text-primary); font: var(--str-chat__font-metadata-emphasis); - svg path { - stroke-width: 1.5px; + .str-chat__icon { + path { + stroke-width: var(--icon-stroke-default); + } } .str-chat__message-reminder__time-left { diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index c0a6847b3..939a4dcb5 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -1,20 +1,7 @@ @use '../../../styling/utils'; .str-chat { - /* - * AttachmentPreviewList theme variables (ported from stream-chat-css v2), - * set to match the current React SDK styling values in this file. - */ - --str-chat__attachment-preview-list-border-radius: 0; - --str-chat__attachment-preview-list-color: var(--text-primary); - --str-chat__attachment-preview-list-background-color: transparent; - --str-chat__attachment-preview-list-border-block-start: none; - --str-chat__attachment-preview-list-border-block-end: none; - --str-chat__attachment-preview-list-border-inline-start: none; - --str-chat__attachment-preview-list-border-inline-end: none; - --str-chat__attachment-preview-list-box-shadow: none; --str-chat__attachment-preview-row-height: 72px; - --str-chat__attachment-preview-close-icon-background: var(--control-remove-control-bg); --str-chat__attachment-preview-close-icon-color: var(--control-remove-control-icon); --str-chat__attachment-preview-close-icon-border-color: var( @@ -24,34 +11,6 @@ --str-chat__attachment-preview-download-icon-color: var(--text-secondary); --str-chat__attachment-preview-overlay-color: var(--background-core-overlay); - --str-chat__attachment-preview-image-border-radius: var( - --message-bubble-radius-attachment - ); - --str-chat__attachment-preview-image-color: var(--text-primary); - --str-chat__attachment-preview-image-background-color: transparent; - --str-chat__attachment-preview-image-border-block-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-block-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-inline-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-inline-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-box-shadow: none; - - --str-chat__attachment-preview-file-border-radius: var(--radius-lg); - --str-chat__attachment-preview-file-color: var(--text-primary); - --str-chat__attachment-preview-file-background-color: transparent; - --str-chat__attachment-preview-file-border-block-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-block-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-inline-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-inline-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-box-shadow: none; - /* React-specific preview variants (classes diverged from v2 theme) */ --str-chat__attachment-preview-media-video-indicator-background-color: var( --chat-bg-typing-indicator @@ -96,7 +55,8 @@ } .str-chat__attachment-preview-list { - @include utils.component-layer-overrides('attachment-preview-list'); + background: transparent; + color: var(--text-primary); padding: var(--spacing-xxs); display: flex; align-items: flex-start; @@ -118,7 +78,10 @@ .str-chat__attachment-preview-file, .str-chat__attachment-preview-voice-recording, .str-chat__attachment-preview-unsupported { - @include utils.component-layer-overrides('attachment-preview-file'); + background: transparent; + color: var(--text-primary); + border-radius: var(--radius-lg); + border: 1px solid var(--border-core-default); display: flex; align-items: center; flex: 0 1 auto; @@ -147,17 +110,17 @@ } .str-chat__attachment-preview-media { - @include utils.component-layer-overrides('attachment-preview-image'); + background: transparent; + color: var(--text-primary); + border-radius: var(--message-bubble-radius-attachment); + border: 1px solid var(--border-core-default); flex: 0 0 auto; width: var(--str-chat__attachment-preview-row-height); height: var(--str-chat__attachment-preview-row-height); cursor: pointer; .str-chat__attachment-preview-media__thumbnail-wrapper { - border-radius: max( - 0px, - calc(var(--str-chat__attachment-preview-image-border-radius) - 1px) - ); + border-radius: max(0px, calc(var(--message-bubble-radius-attachment) - 1px)); overflow: hidden; height: 100%; width: 100%; diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss index cb6227697..0ddeeff4c 100644 --- a/src/components/MessageComposer/styling/MessageComposer.scss +++ b/src/components/MessageComposer/styling/MessageComposer.scss @@ -1,39 +1,4 @@ -@use '../../../styling/utils'; - .str-chat { - /* - * MessageInput theme variables (ported from stream-chat-css v2 MessageInput theme), - * set to match the current React SDK MessageComposer styling. - * - * Note: React's "composer" uses different class names than v2's `str-chat__message-input`, - * so we apply layer overrides to the closest equivalents in this file. - */ - --str-chat__message-input-border-radius: var(--radius-3xl); - --str-chat__message-input-color: var(--input-text-default); - --str-chat__message-input-background-color: var(--composer-bg); - --str-chat__message-input-border-block-start: 1px solid var(--border-core-default); - --str-chat__message-input-border-block-end: 1px solid var(--border-core-default); - --str-chat__message-input-border-inline-start: 1px solid var(--border-core-default); - --str-chat__message-input-border-inline-end: 1px solid var(--border-core-default); - --str-chat__message-input-box-shadow: none; - - --str-chat__message-textarea-border-radius: 0; - --str-chat__message-textarea-color: var(--input-text-default); - --str-chat__message-textarea-background-color: transparent; - --str-chat__message-textarea-border-block-start: 0; - --str-chat__message-textarea-border-block-end: 0; - --str-chat__message-textarea-border-inline-start: 0; - --str-chat__message-textarea-border-inline-end: 0; - --str-chat__message-textarea-box-shadow: none; - - --str-chat__cooldown-border-radius: var(--button-radius-full); - --str-chat__cooldown-color: var(--text-disabled); - --str-chat__cooldown-background-color: var(--background-utility-disabled); - --str-chat__cooldown-border-block-start: 0; - --str-chat__cooldown-border-block-end: 0; - --str-chat__cooldown-border-inline-start: 0; - --str-chat__cooldown-border-inline-end: 0; - --str-chat__cooldown-box-shadow: none; --str-chat__message-composer-max-width: 1120px; --str-chat__message-composer-padding: var(--spacing-md); --str-chat__message-composer-command-transition-duration: 280ms; @@ -152,7 +117,10 @@ flex-direction: column; flex: 1 1 0; min-width: 0; - @include utils.component-layer-overrides('message-input'); + background: var(--composer-bg); + color: var(--input-text-default); + border-radius: var(--radius-3xl); + border: 1px solid var(--border-core-default); } .str-chat__message-composer-previews { @@ -232,7 +200,8 @@ width: 100%; textarea { - @include utils.component-layer-overrides('message-textarea'); + background: transparent; + color: var(--input-text-default); resize: none; border: none; box-shadow: none; @@ -278,13 +247,14 @@ } .str-chat__message-composer-cooldown { - @include utils.component-layer-overrides('cooldown'); + background: var(--background-utility-disabled); + color: var(--text-disabled); + border-radius: var(--button-radius-full); display: flex; align-items: center; justify-content: center; height: var(--button-visual-height-md); width: var(--button-visual-height-md); - border-radius: var(--str-chat__cooldown-border-radius); } [dir='rtl'] .str-chat__send-button, diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss index 7bc49cc6e..afee4ff06 100644 --- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss +++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss @@ -1,36 +1,10 @@ @use '../../../styling/utils'; @use '../../../styling/variables/font' as font; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__unsupported-attachment-preview-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of file attachments */ - --str-chat__unsupported-attachment-preview-color: var(--text-primary); - - /* The background color of file attachments */ - --str-chat__unsupported-attachment-preview-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__unsupported-attachment-preview-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__unsupported-attachment-preview-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-preview-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-preview-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__unsupported-attachment-preview-box-shadow: none; -} - .str-chat__attachment-preview-unsupported { - @include utils.component-layer-overrides('unsupported-attachment-preview'); + background: transparent; + color: var(--text-primary); + border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); display: flex; align-items: center; justify-content: center; diff --git a/src/components/MessageList/styling/MessageList.scss b/src/components/MessageList/styling/MessageList.scss index 3c4912586..763c8626b 100644 --- a/src/components/MessageList/styling/MessageList.scss +++ b/src/components/MessageList/styling/MessageList.scss @@ -27,7 +27,8 @@ width: 100%; height: 100%; max-height: 100%; - @include utils.component-layer-overrides('message-list'); + background: var(--background-core-app); + color: var(--text-primary); .str-chat__message-list-scroll { @include utils.message-list-spacing; @@ -65,36 +66,3 @@ } } } - -// Theme -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__message-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__message-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__message-list-background-color: var(--background-core-app); - - /* Box shadow applied to the component */ - --str-chat__message-list-box-shadow: none; - - /* Top border of the component */ - --str-chat__message-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__message-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__message-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --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(--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(--background-core-surface); -} diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss index ad5cd21d0..9df1ca097 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -1,33 +1,8 @@ @use '../../../styling/utils'; -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__virtual-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__virtual-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__virtual-list-background-color: var(--background-core-app); - - /* Box shadow applied to the component */ - --str-chat__virtual-list-box-shadow: none; - - /* Top border of the component */ - --str-chat__virtual-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__virtual-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__virtual-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__virtual-list-border-inline-end: none; -} - .str-chat__virtual-list { - @include utils.component-layer-overrides('virtual-list'); + background: var(--background-core-app); + color: var(--text-primary); @include utils.scrollable-y; --str-chat__message-list-scroll-max-width: calc( var(--str-chat__message-composer-max-width) + diff --git a/src/components/Thread/styling/Thread.scss b/src/components/Thread/styling/Thread.scss index f6504033c..86e4576e1 100644 --- a/src/components/Thread/styling/Thread.scss +++ b/src/components/Thread/styling/Thread.scss @@ -1,37 +1,7 @@ -@use '../../../styling/utils'; - -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__thread-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__thread-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__thread-background-color: none; - - /* Top border of the component */ - --str-chat__thread-border-block-start: none; - - /* Bottom border of the component */ - --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(--border-core-default); - - /* Right (left in RTL layout) border of the component */ - --str-chat__thread-border-inline-end: none; - - /* Box shadow applied to the component */ - --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(--text-secondary); -} - // FIXME: figure out why does this "container" exist when __thread is completely valid .str-chat__thread-container { - @include utils.component-layer-overrides('thread'); + color: var(--text-primary); + border-inline-start: 1px solid var(--border-core-default); position: relative; height: 100%; display: flex; diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss index f93feb51c..0c03c35c3 100644 --- a/src/components/Thread/styling/ThreadHeader.scss +++ b/src/components/Thread/styling/ThreadHeader.scss @@ -1,34 +1,10 @@ @use '../../../styling/utils'; -.str-chat { - /* The border radius used for the borders of the thread header */ - --str-chat__thread-header-border-radius: 0; - - /* The text/icon color of the thread header */ - --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); - - /* Top border of the thread header */ - --str-chat__thread-header-border-block-start: none; - - /* Bottom border of the thread header */ - --str-chat__thread-header-border-block-end: 1px solid var(--border-core-default); - - /* Left (right in RTL layout) border of the thread header */ - --str-chat__thread-header-border-inline-start: none; - - /* Right (left in RTL layout) border of the thread header */ - --str-chat__thread-header-border-inline-end: none; - - /* Box shadow applied to the thread header */ - --str-chat__thread-header-box-shadow: none; -} - .str-chat__thread-header { @include utils.header-layout; - @include utils.component-layer-overrides('thread-header'); + background: var(--background-core-elevation-1); + color: var(--text-primary); + border-block-end: 1px solid var(--border-core-default); .str-chat__thread-header-title { font: var(--str-chat__font-heading-sm); @@ -36,7 +12,7 @@ .str-chat__thread-header-subtitle { font: var(--str-chat__font-caption-default); - color: var(--str-chat__thread-header-info-color); + color: var(--text-secondary); } .str-chat__thread-header-details { @@ -74,7 +50,7 @@ border: none; .str-chat__icon { - fill: var(--str-chat__thread-color); + fill: var(--text-primary); } } } diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss index 3f795c0b3..c6ca4a301 100644 --- a/src/components/Threads/ThreadList/styling/ThreadList.scss +++ b/src/components/Threads/ThreadList/styling/ThreadList.scss @@ -1,39 +1,29 @@ @use '../../../../styling/utils'; .str-chat { - --str-chat__thread-list-border-radius: 0; - --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(--border-core-default); - --str-chat__thread-list-box-shadow: none; --str-chat__thread-list-transition-duration: var( - --str-chat__channel-list-transition-duration, - 180ms + --str-chat__channel-list-transition-duration ); --str-chat__thread-list-transition-easing: var( - --str-chat__channel-list-transition-easing, - ease + --str-chat__channel-list-transition-easing ); --str-chat__thread-list-transition-offset: var( - --str-chat__channel-list-transition-offset, - 8px + --str-chat__channel-list-transition-offset ); - --str-chat__thread-list-width: var(--str-chat__channel-list-width, 30%); - --str-chat__thread-list-mobile-width: var(--str-chat__channel-list-mobile-width, 100%); - --str-chat__thread-list-min-width: 280px; + --str-chat__thread-list-width: var(--str-chat__channel-list-width); + --str-chat__thread-list-mobile-width: var(--str-chat__channel-list-mobile-width); } .str-chat__thread-list-container { - @include utils.component-layer-overrides('thread-list'); + background: var(--background-core-elevation-1); + color: var(--text-primary); + border-inline-end: 1px solid var(--border-core-default); display: flex; flex: 0 0 var(--str-chat__thread-list-width); flex-direction: column; height: 100%; max-width: 100%; - min-width: var(--str-chat__thread-list-min-width); + min-width: 280px; opacity: 1; position: relative; transform: translateX(0); @@ -62,7 +52,7 @@ position: absolute; top: 0; bottom: 0; - transform: translateX(calc(0px - var(--str-chat__thread-list-transition-offset))); + transform: translateX(calc(var(--str-chat__thread-list-transition-offset) * -1px)); transition: transform var(--str-chat__thread-list-transition-duration) var(--str-chat__thread-list-transition-easing), diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index 9bc59d302..ffb2f7be0 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -1,30 +1,8 @@ @use '../../../styling/utils'; .str-chat { - /* The border radius used for the borders of the component */ - --str-chat__tooltip-border-radius: var(--radius-md); - - /* The text/icon color of the component */ - --str-chat__tooltip-color: var(--text-on-accent); - - /* The background color of the component */ --str-chat__tooltip-background-color: var(--background-core-inverse); - /* Top border of the component */ - --str-chat__tooltip-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__tooltip-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__tooltip-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__tooltip-border-inline-end: none; - - /* 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); @@ -32,7 +10,10 @@ } .str-chat__tooltip { - @include utils.component-layer-overrides('tooltip'); + background: var(--str-chat__tooltip-background-color); + color: var(--text-on-accent); + box-shadow: var(--str-chat__box-shadow-3); + border-radius: var(--radius-md); @include utils.prevent-glitch-text-overflow; display: flex; gap: var(--spacing-xs); diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss index 0a12e2e1f..c223134b1 100644 --- a/src/styling/_utils.scss +++ b/src/styling/_utils.scss @@ -136,15 +136,3 @@ max-width: 100%; } } - -@mixin component-layer-overrides($component-name, $important: '') { - background: var(--str-chat__#{$component-name}-background-color) #{$important}; - color: var(--str-chat__#{$component-name}-color) #{$important}; - box-shadow: var(--str-chat__#{$component-name}-box-shadow) #{$important}; - border-radius: var(--str-chat__#{$component-name}-border-radius) #{$important}; - border-block-start: var(--str-chat__#{$component-name}-border-block-start) #{$important}; - border-block-end: var(--str-chat__#{$component-name}-border-block-end) #{$important}; - border-inline-start: var(--str-chat__#{$component-name}-border-inline-start) - #{$important}; - border-inline-end: var(--str-chat__#{$component-name}-border-inline-end) #{$important}; -} From 0418a312ebb8829ebf3a029bdb08a6627a91d30d Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 16 Apr 2026 22:41:17 +0200 Subject: [PATCH 2/7] Defined & referenced once within the same file --- .../Attachment/styling/LinkPreview.scss | 7 +------ src/components/Channel/styling/Channel.scss | 9 ++++---- src/components/ChatView/styling/ChatView.scss | 12 ++++------- .../styling/DragAndDropContainer.scss | 12 ++--------- src/components/Form/styling/SwitchField.scss | 12 ++--------- src/components/Gallery/styling/Gallery.scss | 15 +++++-------- .../Loading/styling/LoadingChannels.scss | 7 +------ .../styling/AttachmentPreview.scss | 15 ++++++------- .../styling/DropzoneContainer.scss | 21 +++---------------- .../styling/NotificationList.scss | 17 +++++++-------- .../Threads/styling/UnreadCountBadge.scss | 9 ++------ 11 files changed, 37 insertions(+), 99 deletions(-) diff --git a/src/components/Attachment/styling/LinkPreview.scss b/src/components/Attachment/styling/LinkPreview.scss index 25862e5b2..9372232d1 100644 --- a/src/components/Attachment/styling/LinkPreview.scss +++ b/src/components/Attachment/styling/LinkPreview.scss @@ -6,11 +6,6 @@ var(--str-chat__attachment-max-width) * calc(1 / 1.91) ); - /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */ - --str-chat__scraped-video-height: calc( - var(--str-chat__attachment-max-width) * calc(9 / 16) - ); - width: 100%; display: flex; gap: var(--spacing-xs); @@ -45,7 +40,7 @@ } &.str-chat__message-attachment-card--video .str-chat__message-attachment-card--header { - height: var(--str-chat__scraped-video-height); + height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16)); } .str-chat__message-attachment-card--content { diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index 79024ebb0..adc8c3b1e 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -45,10 +45,6 @@ $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) - ); height: 100%; display: flex; flex-direction: column; @@ -79,7 +75,10 @@ .str-chat__message-list-scroll { width: 100%; height: 100%; - max-width: var(--str-chat__loading-channel-content-max-width); + max-width: calc( + var(--str-chat__message-composer-max-width) + + var(--str-chat__message-composer-padding) + ); margin-inline: auto; } } diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index 52cdacf4b..9063cc46f 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -1,6 +1,4 @@ .str-chat { - --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; --str-chat__chat-view-selector-transition-offset: 8px; @@ -10,8 +8,6 @@ --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(--background-core-surface); } .str-chat__chat-view { @@ -27,8 +23,8 @@ flex-direction: column; padding: var(--spacing-md); gap: var(--spacing-xs); - border-inline-end: 1px solid var(--str-chat-selector-border-color); - background-color: var(--str-chat-selector-background-color); + border-inline-end: 1px solid var(--border-core-subtle); + background-color: var(--background-core-elevation-1); .str-chat__chat-view__selector-button-container { display: flex; @@ -55,13 +51,13 @@ line-height: 1; position: relative; - background: var(--str-chat-selector-button-background-color-default); + background: transparent; color: var(--str-chat-selector-button-color-default); &[aria-selected='true'] { --str-chat-icon-color: var(--str-chat-selector-button-color-selected); color: var(--str-chat-selector-button-color-selected); - background: var(--str-chat-selector-button-background-color-selected); + background: var(--background-core-surface); } svg { diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss index c6696199a..daf883277 100644 --- a/src/components/DragAndDrop/styling/DragAndDropContainer.scss +++ b/src/components/DragAndDrop/styling/DragAndDropContainer.scss @@ -7,14 +7,6 @@ /* Bottom border of the component */ --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent; - /* Top border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid - var(--accent-primary); - - /* Bottom border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid - 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; @@ -42,10 +34,10 @@ border-top: var(--str-chat__drag-and-drop-container-border-block-start); &.str-chat__drag-and-drop-container__item--dragged-over-from-top { - border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end); + border-bottom: 2px solid var(--accent-primary); } &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { - border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start); + border-top: 2px solid var(--accent-primary); } } diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index 65ba411f5..b939b9473 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -5,14 +5,6 @@ .str-chat { --str-chat__switch-field-background-color: var(--background-core-surface-card); --str-chat__switch-field-border-radius: var(--radius-md); - --str-chat__switch-field__track-off-bg: var( - --control-toggle-switch-bg, - var(--border-core-on-surface, #a3acba) - ); - --str-chat__switch-field__track-on-bg: var( - --control-toggle-switch-bg-selected, - #005fff - ); --str-chat__switch-field__track-thumb-bg: var(--base-white, #ffffff); --str-chat__switch-field__track-height: 24px; --str-chat__switch-field__track-radius: var(--button-radius-full, 9999px); @@ -61,7 +53,7 @@ height: var(--str-chat__switch-field__track-height); padding: var(--spacing-xxs); cursor: pointer; - background-color: var(--str-chat__switch-field__track-off-bg); + background-color: var(--control-toggle-switch-bg); border-radius: var(--str-chat__switch-field__track-radius); transition: background-color 0.2s ease; @@ -74,7 +66,7 @@ } &--on { - background-color: var(--str-chat__switch-field__track-on-bg); + background-color: var(--control-toggle-switch-bg-selected); justify-content: flex-end; .str-chat__form__switch-field__switch-handle { diff --git a/src/components/Gallery/styling/Gallery.scss b/src/components/Gallery/styling/Gallery.scss index 68f9a3e2e..ced7c1cee 100644 --- a/src/components/Gallery/styling/Gallery.scss +++ b/src/components/Gallery/styling/Gallery.scss @@ -22,12 +22,7 @@ } .str-chat__gallery { - --str-chat__gallery-action-button-color: rgba(255, 255, 255, 0.88); - --str-chat__gallery-action-button-hover-color: #ffffff; - --str-chat__gallery-action-button-hover-background: rgba(255, 255, 255, 0.14); - --str-chat__gallery-action-button-active-background: rgba(255, 255, 255, 0.2); --str-chat__gallery-foreground: var(--text-on-accent); - --str-chat__gallery-muted-foreground: rgba(255, 255, 255, 0.72); --str-chat__gallery-nav-border: none; --str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92); --str-chat__gallery-nav-color: #101828; @@ -82,7 +77,7 @@ .str-chat__gallery__timestamp { display: block; margin-top: 2px; - color: var(--str-chat__gallery-muted-foreground); + color: rgba(255, 255, 255, 0.72); font: var(--str-chat__font-metadata-default); } @@ -105,7 +100,7 @@ border-radius: var(--radius-max); border: 0; background-color: transparent; - color: var(--str-chat__gallery-action-button-color); + color: rgba(255, 255, 255, 0.88); text-decoration: none; opacity: 0.92; @@ -117,13 +112,13 @@ } &:hover { - background-color: var(--str-chat__gallery-action-button-hover-background); - color: var(--str-chat__gallery-action-button-hover-color); + background-color: rgba(255, 255, 255, 0.14); + color: #ffffff; opacity: 1; } &:active { - background-color: var(--str-chat__gallery-action-button-active-background); + background-color: rgba(255, 255, 255, 0.2); } &:focus-visible { diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss index 03b98d5b0..1eafe09e9 100644 --- a/src/components/Loading/styling/LoadingChannels.scss +++ b/src/components/Loading/styling/LoadingChannels.scss @@ -1,5 +1,5 @@ @mixin channel-list-item-shimmer { - background-color: var(--str-chat__channel-list-item-loading-state-color); + background-color: var(--background-core-surface); background-image: linear-gradient( 90deg, var(--skeleton-loading-base) 0%, @@ -11,11 +11,6 @@ animation: loading-channels-shimmer 1.2s linear infinite; } -.str-chat { - /* The base surface color behind the channel list loading shimmer */ - --str-chat__channel-list-item-loading-state-color: var(--background-core-surface); -} - .str-chat__loading-channels { display: flex; flex-direction: column; diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 939a4dcb5..04a7edfd8 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -25,17 +25,10 @@ --background-utility-pressed ); - --str-chat__attachment-preview-media-uploading-overlay-background: linear-gradient( - 180deg, - var(--base-white) 0%, - var(--slate-100) 100% - ); --str-chat__attachment-preview-media-upload-error-overlay-background-color: var( --background-core-overlay ); - --str-chat__attachment-preview-file-fatal-error-color: var(--color-accent-error); - .str-chat__message-composer-voice-preview-slot { display: flex; align-items: center; @@ -196,7 +189,11 @@ .str-chat__attachment-preview-media--uploading { .str-chat__attachment-preview-media__overlay { - background: var(--str-chat__attachment-preview-media-uploading-overlay-background); + background: linear-gradient( + 180deg, + var(--base-white) 0%, + var(--slate-100) 100% + ); } } @@ -244,7 +241,7 @@ display: flex; align-items: center; gap: var(--spacing-xxs); - color: var(--str-chat__attachment-preview-file-fatal-error-color); + color: var(--color-accent-error); } .str-chat__attachment-preview-file__retriable-error { diff --git a/src/components/MessageComposer/styling/DropzoneContainer.scss b/src/components/MessageComposer/styling/DropzoneContainer.scss index 028dd419a..076c1e7e3 100644 --- a/src/components/MessageComposer/styling/DropzoneContainer.scss +++ b/src/components/MessageComposer/styling/DropzoneContainer.scss @@ -1,14 +1,3 @@ -.str-chat { - /* The text/icon color of the dropzone container */ - --str-chat__dropzone-container-color: var(--text-primary); - - /* The background color of the dropzone container */ - --str-chat__dropzone-container-background-color: var(--background-core-overlay-light); - - /* The backdrop filter applied to the dropzone container */ - --str-chat__dropzone-container-backdrop-filter: blur(3.5px); -} - .str-chat__dropzone-root { position: relative; min-height: 0; @@ -30,9 +19,9 @@ position: absolute; inset: 0; z-index: 5; - 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); + background-color: var(--background-core-overlay-light); + color: var(--text-primary); + backdrop-filter: blur(3.5px); font: var(--str-chat__font-heading-sm); .str-chat__dropzone-container__content { @@ -56,9 +45,5 @@ @supports not (backdrop-filter: blur(1px)) { .str-chat__dropzone-container { backdrop-filter: none; - background-color: var( - --str-chat__dropzone-container-background-color-fallback, - rgba(0, 0, 0, 0.4) - ); } } diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss index e84055734..829f36a6e 100644 --- a/src/components/Notifications/styling/NotificationList.scss +++ b/src/components/Notifications/styling/NotificationList.scss @@ -1,23 +1,20 @@ .str-chat__notification-list { --str-chat__notification-list-inset: 16px; --str-chat__notification-list-gap: 8px; - --str-chat__notification-list-max-height: calc( - 100% - (var(--str-chat__notification-list-inset) * 2) - ); - --str-chat__notification-list-width: min( - 100%, - calc(100% - (var(--str-chat__notification-list-inset) * 2)) - ); - background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - inline-size: var(--str-chat__notification-list-width); + inline-size: min( + 100%, + calc(100% - (var(--str-chat__notification-list-inset) * 2)) + ); max-width: 100%; min-width: 0; - max-height: var(--str-chat__notification-list-max-height); + max-height: calc( + 100% - (var(--str-chat__notification-list-inset) * 2) + ); padding-inline: var(--spacing-xs); pointer-events: none; position: absolute; diff --git a/src/components/Threads/styling/UnreadCountBadge.scss b/src/components/Threads/styling/UnreadCountBadge.scss index cec7dcefd..1602cbd6f 100644 --- a/src/components/Threads/styling/UnreadCountBadge.scss +++ b/src/components/Threads/styling/UnreadCountBadge.scss @@ -1,12 +1,7 @@ /* Only available in React SDK. */ -.str-chat { - --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 { - background-color: var(--str-chat-unread-count-badge-background-color); - color: var(--str-chat-unread-count-badge-color); + background-color: var(--accent-error); + color: var(--badge-text-on-accent); border-radius: 9999px; } From 167b90fb2f0e8d2049e6a39456ecb9c0189c18cf Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 16 Apr 2026 23:33:57 +0200 Subject: [PATCH 3/7] Poll-related cleanup --- src/components/Poll/styling/Poll.scss | 16 +++++++-------- .../Poll/styling/PollOptionFullList.scss | 6 +++--- .../Poll/styling/PollOptionList.scss | 20 ++++++++----------- src/components/Poll/styling/PollResults.scss | 6 +++++- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/Poll/styling/Poll.scss b/src/components/Poll/styling/Poll.scss index 853f5a329..bc6d66817 100644 --- a/src/components/Poll/styling/Poll.scss +++ b/src/components/Poll/styling/Poll.scss @@ -29,16 +29,16 @@ flex-direction: column; align-items: center; gap: var(--spacing-xs); + } - .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__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-caption-emphasis); - &.str-chat__poll-action--additional { - border: none; - } + &.str-chat__poll-action--additional { + border: none; } } } diff --git a/src/components/Poll/styling/PollOptionFullList.scss b/src/components/Poll/styling/PollOptionFullList.scss index 368f6874a..c07fc8184 100644 --- a/src/components/Poll/styling/PollOptionFullList.scss +++ b/src/components/Poll/styling/PollOptionFullList.scss @@ -10,15 +10,15 @@ padding-bottom: var(--spacing-xl); .str-chat__poll-option-list--full { - gap: var(--spacing-xxs); + gap: var(--spacing-xs); scrollbar-width: none; - padding: var(--spacing-sm) var(--spacing-xxs); + padding: var(--spacing-xs); border-radius: var(--radius-lg); background-color: var(--background-core-surface-card); .str-chat__poll-option { padding: var(--spacing-xs); - border-radius: var(--radius-lg); + border-radius: var(--radius-md); } .str-chat__poll-option--votable { &:hover { diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index e84481731..a4dfe8cdb 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -28,7 +28,7 @@ height: var(--str-chat__poll-checkmark-size); width: var(--str-chat__poll-checkmark-size); border-radius: var(--radius-max); - border: 1px solid var(--chat-border-on-chat); + border: 1px solid var(--chat-border-on-chat, var(--chat-border-on-chat-incoming)); } .str-chat__checkmark--checked { @@ -43,7 +43,7 @@ .str-chat__poll-option-data { flex: 1; display: flex; - align-items: start; + align-items: baseline; gap: var(--spacing-xs); grid-column: 2 / 3; grid-row: 1 / 2; @@ -53,6 +53,8 @@ p { margin: 0; flex: 1; + word-break: break-word; + hyphens: auto; } .str-chat__poll-option-votes { @@ -79,18 +81,12 @@ width: 100%; background: linear-gradient( to right, - var(--chat-poll-progress-fill) var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track) var(--str-chat__amount-bar-fulfillment) + var(--chat-poll-progress-fill, var(--chat-poll-progress-fill-incoming)) + var(--str-chat__amount-bar-fulfillment), + var(--chat-poll-progress-track, var(--chat-poll-progress-track-incoming)) + var(--str-chat__amount-bar-fulfillment) ); border-radius: var(--size-4); } } } - -.str-chat__message--me { - .str-chat__poll-option-list { - .str-chat__checkmark { - border: 1px solid var(--chat-border-on-chat-outgoing); - } - } -} diff --git a/src/components/Poll/styling/PollResults.scss b/src/components/Poll/styling/PollResults.scss index 04ecd1bca..740db5aa2 100644 --- a/src/components/Poll/styling/PollResults.scss +++ b/src/components/Poll/styling/PollResults.scss @@ -56,6 +56,8 @@ .str-chat__poll-option__option-text { flex: 1; + word-break: break-word; + hyphens: auto; } } } @@ -119,7 +121,9 @@ align-items: center; font: var(--str-chat__font-caption-emphasis); - svg { + .str-chat__icon { + height: var(--icon-size-md); + width: var(--icon-size-md); } } } From 20f18cb49e7c7fd5569c655b04db09c7eaa8f6ed Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 16 Apr 2026 23:55:02 +0200 Subject: [PATCH 4/7] Lint fixes --- src/components/Attachment/styling/Attachment.scss | 8 ++++++-- src/components/Attachment/styling/Audio.scss | 4 +++- src/components/Attachment/styling/Geolocation.scss | 4 +++- .../Attachment/styling/UnsupportedAttachment.scss | 4 +++- src/components/Attachment/styling/VoiceRecording.scss | 4 +++- src/components/DateSeparator/styling/DateSeparator.scss | 1 - src/components/Message/styling/Message.scss | 4 ++-- .../MessageComposer/styling/AttachmentPreview.scss | 6 +----- .../styling/UnsupportedAttachmentPreview.scss | 4 +++- .../Notifications/styling/NotificationList.scss | 9 ++------- 10 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index eba971efa..4faa5138b 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -27,7 +27,9 @@ .str-chat__message-attachment--video { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); } .str-chat__message-attachment { @@ -188,7 +190,9 @@ .str-chat__message-attachment-file--item { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); } .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy { diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index e52d52d71..e64d4c4a1 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -3,7 +3,9 @@ .str-chat__message-attachment-audio-widget { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); flex: 1 1 auto; width: 100%; min-width: 0; diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index 134fdf26a..ea2f00caf 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -3,7 +3,9 @@ .str-chat__message-attachment-geolocation { background: var(--chat-bg-attachment); color: var(--chat-text); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); display: flex; flex-direction: column; height: 200px; diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss index 29a314cf3..8bf4fe542 100644 --- a/src/components/Attachment/styling/UnsupportedAttachment.scss +++ b/src/components/Attachment/styling/UnsupportedAttachment.scss @@ -4,7 +4,9 @@ .str-chat__message-attachment-unsupported { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); display: flex; align-items: center; justify-content: center; diff --git a/src/components/Attachment/styling/VoiceRecording.scss b/src/components/Attachment/styling/VoiceRecording.scss index 5c81ee683..0d85417b6 100644 --- a/src/components/Attachment/styling/VoiceRecording.scss +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -1,7 +1,9 @@ .str-chat__message-attachment__voice-recording-widget { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); display: flex; align-items: center; justify-content: center; diff --git a/src/components/DateSeparator/styling/DateSeparator.scss b/src/components/DateSeparator/styling/DateSeparator.scss index 3fd401e48..b17ad8366 100644 --- a/src/components/DateSeparator/styling/DateSeparator.scss +++ b/src/components/DateSeparator/styling/DateSeparator.scss @@ -1,4 +1,3 @@ - .str-chat__date-separator--floating { position: absolute; top: 0; diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index e4571a4ae..63dc28167 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -519,7 +519,7 @@ position: absolute; inset-block: 0; inset-inline: -9999px; - background-color: var(--background-core-highlight);; + background-color: var(--background-core-highlight); z-index: -1; pointer-events: none; } @@ -528,7 +528,7 @@ /* Fallback for browsers without :has() support */ @supports not selector(:has(a, b)) { .str-chat__message--pinned { - background-color: var(--background-core-highlight);; + background-color: var(--background-core-highlight); } } diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 04a7edfd8..3790a20c4 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -189,11 +189,7 @@ .str-chat__attachment-preview-media--uploading { .str-chat__attachment-preview-media__overlay { - background: linear-gradient( - 180deg, - var(--base-white) 0%, - var(--slate-100) 100% - ); + background: linear-gradient(180deg, var(--base-white) 0%, var(--slate-100) 100%); } } diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss index afee4ff06..e8acf0e37 100644 --- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss +++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss @@ -4,7 +4,9 @@ .str-chat__attachment-preview-unsupported { background: transparent; color: var(--text-primary); - border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)); + border-radius: calc( + var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + ); display: flex; align-items: center; justify-content: center; diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss index 829f36a6e..7fd9bc99e 100644 --- a/src/components/Notifications/styling/NotificationList.scss +++ b/src/components/Notifications/styling/NotificationList.scss @@ -6,15 +6,10 @@ flex-direction: column; align-items: center; justify-content: flex-start; - inline-size: min( - 100%, - calc(100% - (var(--str-chat__notification-list-inset) * 2)) - ); + inline-size: min(100%, calc(100% - (var(--str-chat__notification-list-inset) * 2))); max-width: 100%; min-width: 0; - max-height: calc( - 100% - (var(--str-chat__notification-list-inset) * 2) - ); + max-height: calc(100% - (var(--str-chat__notification-list-inset) * 2)); padding-inline: var(--spacing-xs); pointer-events: none; position: absolute; From 9bce36b78d0f6f0317612556b9e1eb0c13ac8cce Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 17 Apr 2026 11:12:19 +0200 Subject: [PATCH 5/7] Center stuff --- .../ChannelHeader/styling/ChannelHeader.scss | 12 ++++++------ src/components/ChannelList/styling/ChannelList.scss | 3 ++- src/components/MessageList/styling/MessageList.scss | 4 +++- .../MessageList/styling/VirtualizedMessageList.scss | 4 +++- src/components/Thread/ThreadHeader.tsx | 8 +++----- src/components/Thread/styling/ThreadHeader.scss | 11 ++++++----- src/styling/_utils.scss | 11 +++-------- 7 files changed, 26 insertions(+), 27 deletions(-) diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss index 796cd1869..3d05eed51 100644 --- a/src/components/ChannelHeader/styling/ChannelHeader.scss +++ b/src/components/ChannelHeader/styling/ChannelHeader.scss @@ -10,19 +10,19 @@ @include utils.header-layout; .str-chat__channel-header__start { - flex: 1; - display: flex; + justify-self: start; + min-width: 0; } .str-chat__channel-header__data { @include utils.header-text-layout; - width: unset; + justify-self: center; + min-width: 0; } .str-chat__channel-header__end { - flex: 1; - display: flex; - justify-content: flex-end; + justify-self: end; + min-width: 0; } .str-chat__channel-header__data__title, diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index df706f01a..d2f7904d6 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -41,7 +41,6 @@ transform var(--str-chat__channel-list-transition-duration) var(--str-chat__channel-list-transition-easing); width: var(--str-chat__channel-list-width); - @include utils.scrollable-y; background: var(--background-core-elevation-1); color: var(--text-primary); border-inline-end: 1px solid var(--border-core-default); @@ -54,6 +53,8 @@ .str-chat__channel-list-inner__main { height: 100%; overflow-y: auto; + scrollbar-gutter: stable both-edges; + scrollbar-width: thin; .str-chat__channel-list-empty { height: 100%; diff --git a/src/components/MessageList/styling/MessageList.scss b/src/components/MessageList/styling/MessageList.scss index 763c8626b..107e2f023 100644 --- a/src/components/MessageList/styling/MessageList.scss +++ b/src/components/MessageList/styling/MessageList.scss @@ -19,7 +19,9 @@ } .str-chat__message-list { - @include utils.scrollable-y; + overflow-y: auto; + scrollbar-gutter: stable both-edges; + overscroll-behavior: contain; display: flex; justify-content: center; position: relative; diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss index 9df1ca097..3f0420fec 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -1,9 +1,11 @@ @use '../../../styling/utils'; .str-chat__virtual-list { + overflow-y: auto; + scrollbar-gutter: stable both-edges; + background: var(--background-core-app); color: var(--text-primary); - @include utils.scrollable-y; --str-chat__message-list-scroll-max-width: calc( var(--str-chat__message-composer-max-width) + var(--str-chat__message-composer-padding) diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx index a3aef4765..f61303e62 100644 --- a/src/components/Thread/ThreadHeader.tsx +++ b/src/components/Thread/ThreadHeader.tsx @@ -99,11 +99,9 @@ export const ThreadHeader = (props: ThreadHeaderProps) => { return (
- {activeChatView === 'threads' && HeaderStartContent && ( -
- -
- )} +
+ {activeChatView === 'threads' && HeaderStartContent && } +
{t('Thread')}
Date: Fri, 17 Apr 2026 14:39:34 +0200 Subject: [PATCH 6/7] Transform same-file CSS variables use to SCSS variables --- .../styling/AIStateIndicator.scss | 2 +- src/components/Attachment/styling/Giphy.scss | 11 ++++------ src/components/Channel/styling/Channel.scss | 2 +- src/components/ChatView/styling/ChatView.scss | 19 +++++----------- .../styling/DragAndDropContainer.scss | 22 +++++-------------- src/components/Form/styling/SwitchField.scss | 21 +++++++++--------- .../Loading/styling/LoadingChannels.scss | 2 +- .../Location/styling/ShareLocationDialog.scss | 8 +++---- src/components/Message/styling/Message.scss | 19 ++++++++-------- .../styling/AttachmentPreview.scss | 13 ++++++----- .../styling/NotificationList.scss | 14 ++++++------ .../Poll/styling/PollOptionList.scss | 8 +++---- src/plugins/Emojis/styling/EmojiPicker.scss | 8 +++---- 13 files changed, 63 insertions(+), 86 deletions(-) diff --git a/src/components/AIStateIndicator/styling/AIStateIndicator.scss b/src/components/AIStateIndicator/styling/AIStateIndicator.scss index d22188dae..0d62e0864 100644 --- a/src/components/AIStateIndicator/styling/AIStateIndicator.scss +++ b/src/components/AIStateIndicator/styling/AIStateIndicator.scss @@ -1,6 +1,6 @@ .str-chat__ai-state-indicator-container { padding: 0 8px; - background-color: var(--background-core-surface); + background-color: var(--background-core-surface-default); } .str-chat__ai-state-indicator-text { diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss index 51ffd1829..49d04f05d 100644 --- a/src/components/Attachment/styling/Giphy.scss +++ b/src/components/Attachment/styling/Giphy.scss @@ -1,9 +1,6 @@ @use '../../../styling/utils' as utils; -.str-chat { - /* The height of GIFs */ - --str-chat__gif-height: 200px; -} +$gif-height: 200px; .str-chat__message-attachment-giphy { position: relative; @@ -26,7 +23,7 @@ } .str-chat__image-placeholder { - height: var(--str-chat__gif-height); + height: $gif-height; width: var(--str-chat__attachment-max-width); } } @@ -54,10 +51,10 @@ .str-chat__message-attachment--giphy--actions { .str-chat__message-attachment-giphy { - height: var(--str-chat__gif-height); + height: $gif-height; img.str-chat__base-image { - height: var(--str-chat__gif-height); + height: $gif-height; } } diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index adc8c3b1e..507c03c1b 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -181,7 +181,7 @@ } @mixin channel-loading-shimmer { - background-color: var(--background-core-surface); + background-color: var(--background-core-surface-default); background-image: linear-gradient( 90deg, var(--skeleton-loading-base) 0%, diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index 9063cc46f..4f7ee4755 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -5,9 +5,6 @@ --str-chat__chat-view-selector-mobile-width: calc( var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px ); - - --str-chat-selector-button-color-default: var(--text-tertiary); - --str-chat-selector-button-color-selected: var(--text-primary); } .str-chat__chat-view { @@ -39,10 +36,7 @@ } .str-chat__chat-view__selector-button { - --str-chat-icon-height: 20px; - --str-chat-icon-width: 20px; --str-chat-unread-count-badge-absolute-offset-vertical: 25%; - --str-chat-icon-color: var(--str-chat-selector-button-color-default); gap: 4px; padding: var(--spacing-xs); @@ -52,17 +46,16 @@ position: relative; background: transparent; - color: var(--str-chat-selector-button-color-default); + color: var(--text-tertiary); &[aria-selected='true'] { - --str-chat-icon-color: var(--str-chat-selector-button-color-selected); - color: var(--str-chat-selector-button-color-selected); - background: var(--background-core-surface); + color: var(--text-primary); + background: var(--background-core-surface-default); } - svg { - height: var(--str-chat-icon-height); - width: var(--str-chat-icon-height); + .str-chat__icon { + height: var(--icon-size-md); + width: var(--icon-size-md); } .str-chat__button__content { diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss index daf883277..871df772e 100644 --- a/src/components/DragAndDrop/styling/DragAndDropContainer.scss +++ b/src/components/DragAndDrop/styling/DragAndDropContainer.scss @@ -1,18 +1,6 @@ // Ported from stream-chat-css DragAndDropContainer (layout + theme) -.str-chat { - /* Top border of the component */ - --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent; - - /* Bottom border of the component */ - --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent; - - /* Left (right in RTL layout) border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none; - - /* Right (left in RTL layout) border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none; -} +$drag-and-drop-container-border-block-start: 2px solid transparent; .str-chat__drag-and-drop-container--dragging { cursor: grabbing; @@ -30,14 +18,14 @@ display: flex; width: 100%; padding-block: 0.25rem; - border-bottom: var(--str-chat__drag-and-drop-container-border-block-start); - border-top: var(--str-chat__drag-and-drop-container-border-block-start); + border-block-start: $drag-and-drop-container-border-block-start; + border-block-end: $drag-and-drop-container-border-block-start; &.str-chat__drag-and-drop-container__item--dragged-over-from-top { - border-bottom: 2px solid var(--accent-primary); + border-block-end: 2px solid var(--accent-primary); } &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { - border-top: 2px solid var(--accent-primary); + border-block-start: 2px solid var(--accent-primary); } } diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index b939b9473..e436e606c 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -2,12 +2,13 @@ // Single row: [label / title+description] [optional expanded content] [toggle] // CSS variables aligned with Figma tokens; fallbacks from get_variable_defs. +$switch-field-track-height: 24px; +$switch-field-track-thumb-bg: var(--base-white, #ffffff); +$switch-field-track-radius: var(--button-radius-full, 9999px); + .str-chat { --str-chat__switch-field-background-color: var(--background-core-surface-card); --str-chat__switch-field-border-radius: var(--radius-md); - --str-chat__switch-field__track-thumb-bg: var(--base-white, #ffffff); - --str-chat__switch-field__track-height: 24px; - --str-chat__switch-field__track-radius: var(--button-radius-full, 9999px); .str-chat__form__switch-fieldset { width: 100%; @@ -50,18 +51,18 @@ align-items: center; flex-shrink: 0; width: 44px; - height: var(--str-chat__switch-field__track-height); + height: $switch-field-track-height; padding: var(--spacing-xxs); cursor: pointer; background-color: var(--control-toggle-switch-bg); - border-radius: var(--str-chat__switch-field__track-radius); + border-radius: $switch-field-track-radius; transition: background-color 0.2s ease; &-handle { - width: calc(var(--str-chat__switch-field__track-height) - 8px); - height: calc(var(--str-chat__switch-field__track-height) - 8px); - border-radius: var(--str-chat__switch-field__track-radius); - background-color: var(--str-chat__switch-field__track-thumb-bg); + width: calc($switch-field-track-height - 8px); + height: calc($switch-field-track-height - 8px); + border-radius: $switch-field-track-radius; + background-color: $switch-field-track-thumb-bg; transition: transform 0.2s ease; } @@ -70,7 +71,7 @@ justify-content: flex-end; .str-chat__form__switch-field__switch-handle { - background-color: var(--str-chat__switch-field__track-thumb-bg); + background-color: $switch-field-track-thumb-bg; } } } diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss index 1eafe09e9..cfd00ce8c 100644 --- a/src/components/Loading/styling/LoadingChannels.scss +++ b/src/components/Loading/styling/LoadingChannels.scss @@ -1,5 +1,5 @@ @mixin channel-list-item-shimmer { - background-color: var(--background-core-surface); + background-color: var(--background-core-surface-default); background-image: linear-gradient( 90deg, var(--skeleton-loading-base) 0%, diff --git a/src/components/Location/styling/ShareLocationDialog.scss b/src/components/Location/styling/ShareLocationDialog.scss index d4d51d597..9239a45c7 100644 --- a/src/components/Location/styling/ShareLocationDialog.scss +++ b/src/components/Location/styling/ShareLocationDialog.scss @@ -1,5 +1,7 @@ @use '../../../styling/utils'; +$duration-selector-min-width: 120px; + .str-chat__share-location-dialog { width: 100%; max-width: 520px; @@ -30,8 +32,6 @@ .str-chat__live-location-sharing-duration-selector { padding-inline: calc(var(--spacing-md) - var(--spacing-xs)); padding-bottom: var(--spacing-xs); - --str-chat__duration-selector-min-width: 120px; - .str-chat__live-location-sharing-duration-selector__button { @include utils.button-reset; align-items: center; @@ -41,12 +41,12 @@ cursor: pointer; display: flex; justify-content: space-between; - min-width: var(--str-chat__duration-selector-min-width); + min-width: $duration-selector-min-width; font: var(--str-chat__font-caption-default); } .str-chat__context-menu { - min-width: var(--str-chat__duration-selector-min-width); + min-width: $duration-selector-min-width; } .str-chat__live-location-sharing-duration-option { width: 100%; diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 63dc28167..fd6895f95 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -1,10 +1,11 @@ @use '../../../styling/utils'; +$message-active-background-color: transparent; +$message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); + .str-chat { /* The width/height of the message options button(s) */ --str-chat__message-options-button-size: var(--size-32); - --str-chat__message-active-background-color: transparent; - --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); /* The maximum allowed width of the message component */ --str-chat__message-max-width: 400px; /* The maximum allowed width of the message component, if it has attachments */ @@ -273,11 +274,9 @@ } &:has(.str-chat__message-reactions--top) { - padding-inline-start: calc( - var(--str-chat__message-reactions-host-offset-x) * -1 - ); + padding-inline-start: calc($message-reactions-host-offset-x * -1); - margin-inline-end: var(--str-chat__message-reactions-host-offset-x); + margin-inline-end: $message-reactions-host-offset-x; } .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom @@ -318,9 +317,9 @@ } &:has(.str-chat__message-reactions--top) { - padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1); + padding-inline-end: calc($message-reactions-host-offset-x * -1); - margin-inline-start: var(--str-chat__message-reactions-host-offset-x); + margin-inline-start: $message-reactions-host-offset-x; } .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom @@ -534,13 +533,13 @@ /* This rule won't be applied in browsers that don't support :has() */ .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) { - background-color: var(--str-chat__message-active-background-color); + background-color: $message-active-background-color; } /* Fallback for when :has() is unsupported */ @supports not selector(:has(a, b)) { .str-chat__li:hover { - background-color: var(--str-chat__message-active-background-color); + background-color: $message-active-background-color; } } diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 3790a20c4..32e273eea 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -1,7 +1,8 @@ @use '../../../styling/utils'; +$attachment-preview-row-height: 72px; + .str-chat { - --str-chat__attachment-preview-row-height: 72px; --str-chat__attachment-preview-close-icon-background: var(--control-remove-control-bg); --str-chat__attachment-preview-close-icon-color: var(--control-remove-control-icon); --str-chat__attachment-preview-close-icon-border-color: var( @@ -59,8 +60,8 @@ width: 100%; min-width: 0; max-width: 100%; - min-height: calc(var(--str-chat__attachment-preview-row-height) * 1.2); - max-height: calc(var(--str-chat__attachment-preview-row-height) * 1.7); + min-height: calc($attachment-preview-row-height * 1.2); + max-height: calc($attachment-preview-row-height * 1.7); overflow-x: hidden; overflow-y: auto; flex: 0 1 auto; @@ -82,7 +83,7 @@ padding: var(--spacing-md); padding-inline-end: var(--spacing-sm); width: 290px; - height: var(--str-chat__attachment-preview-row-height); + height: $attachment-preview-row-height; } .str-chat__attachment-preview-audio { @@ -108,8 +109,8 @@ border-radius: var(--message-bubble-radius-attachment); border: 1px solid var(--border-core-default); flex: 0 0 auto; - width: var(--str-chat__attachment-preview-row-height); - height: var(--str-chat__attachment-preview-row-height); + width: $attachment-preview-row-height; + height: $attachment-preview-row-height; cursor: pointer; .str-chat__attachment-preview-media__thumbnail-wrapper { diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss index 7fd9bc99e..4babc676a 100644 --- a/src/components/Notifications/styling/NotificationList.scss +++ b/src/components/Notifications/styling/NotificationList.scss @@ -1,28 +1,28 @@ +$notification-list-inset: 16px; + .str-chat__notification-list { - --str-chat__notification-list-inset: 16px; - --str-chat__notification-list-gap: 8px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - inline-size: min(100%, calc(100% - (var(--str-chat__notification-list-inset) * 2))); + inline-size: min(100%, calc(100% - ($notification-list-inset * 2))); max-width: 100%; min-width: 0; - max-height: calc(100% - (var(--str-chat__notification-list-inset) * 2)); + max-height: calc(100% - ($notification-list-inset * 2)); padding-inline: var(--spacing-xs); pointer-events: none; position: absolute; - inset-inline-end: var(--str-chat__notification-list-inset); + inset-inline-end: $notification-list-inset; z-index: 2; } .str-chat__notification-list--position-top { - inset-block-start: var(--str-chat__notification-list-inset); + inset-block-start: $notification-list-inset; } .str-chat__notification-list--position-bottom { - inset-block-end: var(--str-chat__notification-list-inset); + inset-block-end: $notification-list-inset; } .str-chat__notification-list__edge { diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index a4dfe8cdb..fb9db3510 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -1,6 +1,4 @@ -.str-chat { - --str-chat__poll-checkmark-size: 24px; -} +$poll-checkmark-size: var(--size-24); .str-chat__poll-option-list { display: flex; @@ -25,8 +23,8 @@ .str-chat__checkmark { grid-column: 1; grid-row: span 2; - height: var(--str-chat__poll-checkmark-size); - width: var(--str-chat__poll-checkmark-size); + height: $poll-checkmark-size; + width: $poll-checkmark-size; border-radius: var(--radius-max); border: 1px solid var(--chat-border-on-chat, var(--chat-border-on-chat-incoming)); } diff --git a/src/plugins/Emojis/styling/EmojiPicker.scss b/src/plugins/Emojis/styling/EmojiPicker.scss index 5cf3cba2e..2bd0aadea 100644 --- a/src/plugins/Emojis/styling/EmojiPicker.scss +++ b/src/plugins/Emojis/styling/EmojiPicker.scss @@ -1,11 +1,11 @@ -.str-chat__message-textarea-emoji-picker-container { - --str-chat__emoji-picker-border-radius: 10px; +$emoji-picker-border-radius: 10px; - border-radius: var(--str-chat__emoji-picker-border-radius); +.str-chat__message-textarea-emoji-picker-container { + border-radius: $emoji-picker-border-radius; box-shadow: var(--str-chat__box-shadow-3); overflow: hidden; em-emoji-picker { - --border-radius: var(--str-chat__emoji-picker-border-radius); + --border-radius: #{$emoji-picker-border-radius}; } } From 597bc52f0ec6249a8dd7d59c40b3d33f8f6963ba Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 17 Apr 2026 16:10:53 +0200 Subject: [PATCH 7/7] Add variable namespacing --- .../styling/AIStateIndicator.scss | 4 +- .../Attachment/styling/Attachment.scss | 48 +- .../Attachment/styling/AttachmentActions.scss | 17 +- src/components/Attachment/styling/Audio.scss | 14 +- .../Attachment/styling/CardAudio.scss | 2 +- .../Attachment/styling/DownloadButton.scss | 4 +- .../Attachment/styling/Geolocation.scss | 14 +- src/components/Attachment/styling/Giphy.scss | 26 +- .../Attachment/styling/LinkPreview.scss | 23 +- .../Attachment/styling/ModalGallery.scss | 36 +- .../styling/UnsupportedAttachment.scss | 14 +- .../Attachment/styling/VoiceRecording.scss | 20 +- .../styling/DurationDisplay.scss | 2 +- .../styling/PlaybackRateButton.scss | 16 +- .../AudioPlayback/styling/ProgressBar.scss | 19 +- .../styling/WaveProgressBar.scss | 20 +- src/components/Avatar/styling/Avatar.scss | 40 +- .../Avatar/styling/AvatarStack.scss | 6 +- .../Avatar/styling/GroupAvatar.scss | 32 +- src/components/Badge/styling/Badge.scss | 62 +- src/components/Badge/styling/MediaBadge.scss | 18 +- .../BaseImage/styling/ImagePlaceholder.scss | 8 +- src/components/Button/styling/Button.scss | 82 +- src/components/Channel/styling/Channel.scss | 40 +- .../ChannelHeader/styling/ChannelHeader.scss | 6 +- .../ChannelList/styling/ChannelList.scss | 16 +- .../styling/ChannelListHeader.scss | 4 +- .../styling/ChannelListItem.scss | 62 +- src/components/ChatView/styling/ChatView.scss | 27 +- .../DateSeparator/styling/DateSeparator.scss | 12 +- src/components/Dialog/styling/Alert.scss | 14 +- src/components/Dialog/styling/Callout.scss | 8 +- .../Dialog/styling/ContextMenu.scss | 72 +- src/components/Dialog/styling/Prompt.scss | 22 +- src/components/Dialog/styling/Viewer.scss | 18 +- .../styling/DragAndDropContainer.scss | 4 +- .../styling/EmptyStateIndicator.scss | 10 +- src/components/Form/styling/FieldError.scss | 6 +- src/components/Form/styling/NumericInput.scss | 20 +- src/components/Form/styling/SwitchField.scss | 26 +- src/components/Form/styling/TextInput.scss | 63 +- .../Form/styling/TextInputFieldset.scss | 8 +- src/components/Gallery/styling/Gallery.scss | 34 +- .../Loading/styling/LoadingChannels.scss | 14 +- .../Location/styling/ShareLocationDialog.scss | 8 +- .../AudioRecorder/styling/AudioRecorder.scss | 44 +- src/components/Message/styling/Message.scss | 118 +- .../MessageAlsoSentInChannelIndicator.scss | 12 +- .../styling/MessageRepliesCountButton.scss | 20 +- .../Message/styling/MessageStatus.scss | 6 +- .../Message/styling/MessageSystem.scss | 12 +- .../styling/MessageTranslationIndicator.scss | 6 +- .../Message/styling/QuotedMessage.scss | 4 +- .../Message/styling/ReminderNotification.scss | 20 +- .../styling/MessageBouncePrompt.scss | 2 +- .../styling/AttachmentPreview.scss | 135 +- .../styling/AttachmentPreviewThumbnail.scss | 2 +- .../styling/AttachmentSelector.scss | 16 +- .../MessageComposer/styling/CommandChip.scss | 10 +- .../MessageComposer/styling/CommandsMenu.scss | 2 +- .../styling/DropzoneContainer.scss | 6 +- .../styling/GeologacationPreview.scss | 12 +- .../styling/LinkPreviewList.scss | 16 +- .../styling/MessageComposer.scss | 70 +- .../styling/QuotedMessageIndicator.scss | 9 +- .../styling/QuotedMessagePreview.scss | 28 +- .../RemoveAttachmentPreviewButton.scss | 2 +- .../styling/SendToChannelCheckbox.scss | 22 +- .../styling/UnsupportedAttachmentPreview.scss | 14 +- .../MessageList/styling/MessageList.scss | 5 +- .../styling/NewMessageNotification.scss | 8 +- .../styling/ScrollToLatestMessageButton.scss | 15 +- .../styling/UnreadMessageNotification.scss | 24 +- .../styling/UnreadMessagesSeparator.scss | 15 +- .../styling/VirtualizedMessageList.scss | 7 +- src/components/Modal/styling/Modal.scss | 12 +- .../Notifications/styling/Notification.scss | 47 +- .../styling/NotificationList.scss | 2 +- .../Poll/styling/OptionFieldSet.scss | 2 +- src/components/Poll/styling/Poll.scss | 13 +- .../Poll/styling/PollAnswerList.scss | 28 +- .../Poll/styling/PollCreationDialog.scss | 6 +- .../Poll/styling/PollOptionFullList.scss | 18 +- .../Poll/styling/PollOptionList.scss | 30 +- src/components/Poll/styling/PollQuestion.scss | 12 +- src/components/Poll/styling/PollResults.scss | 46 +- src/components/Poll/styling/PollVote.scss | 6 +- .../Reactions/styling/MessageReactions.scss | 6 +- .../styling/MessageReactionsDetail.scss | 88 +- .../Reactions/styling/ReactionSelector.scss | 40 +- .../styling/ReactionSelectorExtendedList.scss | 10 +- src/components/Reactions/styling/common.scss | 26 +- src/components/Search/styling/Search.scss | 64 +- .../styling/SummarizedMessagePreview.scss | 24 +- src/components/Thread/styling/Thread.scss | 4 +- src/components/Thread/styling/ThreadHead.scss | 18 +- .../Thread/styling/ThreadHeader.scss | 14 +- .../ThreadList/styling/ThreadList.scss | 32 +- .../ThreadList/styling/ThreadListHeader.scss | 4 +- .../ThreadList/styling/ThreadListItemUI.scss | 62 +- .../Threads/styling/UnreadCountBadge.scss | 4 +- src/components/Tooltip/styling/Tooltip.scss | 12 +- .../styling/TypingIndicator.scss | 27 +- .../VideoPlayer/styling/VideoThumbnail.scss | 6 +- src/styling/_utils.scss | 10 +- src/styling/base.scss | 10 +- src/styling/dark.scss | 659 ++------- src/styling/light.scss | 1256 ++++++++++------- src/styling/variables/font.scss | 163 ++- src/styling/variables/shadows.scss | 16 +- 110 files changed, 2144 insertions(+), 2316 deletions(-) diff --git a/src/components/AIStateIndicator/styling/AIStateIndicator.scss b/src/components/AIStateIndicator/styling/AIStateIndicator.scss index 0d62e0864..37683c253 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(--background-core-surface-default); + background-color: var(--str-chat__background-core-surface-default); } .str-chat__ai-state-indicator-text { - color: var(--text-primary); + color: var(--str-chat__text-primary); } diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index 4faa5138b..7634f1dea 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -2,7 +2,7 @@ .str-chat { /* The margin applied to every attachment in the attachment list */ - --str-chat__attachment-margin: var(--spacing-xs); + --str-chat__attachment-margin: var(--str-chat__spacing-xs); } .str-chat__attachment-list { @@ -17,25 +17,27 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 0; background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__message-attachment--image, .str-chat__message-attachment--video { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); } .str-chat__message-attachment { overflow: hidden; background-color: var(--chat-bg-attachment); - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); // Many classes to increase selector specificity .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline { @@ -136,7 +138,7 @@ .str-chat__gallery .str-chat__message-attachment--svg-image, .str-chat__message-attachment--image.str-chat__message-attachment--svg-image { - $padding: var(--space-24); + $padding: var(--str-chat__space-24); padding: $padding; img { @@ -150,8 +152,8 @@ .str-chat__message-attachment-file--item, .str-chat__message-attachment-audio-widget { @include utils.flex-row-center; - padding: var(--spacing-sm); - column-gap: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); + column-gap: var(--str-chat__spacing-sm); .str-chat__message-attachment-file--item__info, .str-chat__message-attachment-audio-widget--text { @@ -160,9 +162,9 @@ flex-direction: column; align-items: flex-start; justify-content: center; - row-gap: var(--space-2); + row-gap: var(--str-chat__space-2); min-width: 0; - line-height: var(--typography-line-height-tight); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__message-attachment-file--item__first-row, .str-chat__message-attachment-audio-widget--text-first-row { @@ -170,9 +172,9 @@ display: flex; align-items: center; justify-content: space-between; - column-gap: var(--space-8); - font-weight: var(--typography-font-weight-semi-bold); - font-size: var(--typography-font-size-sm); + column-gap: var(--str-chat__space-8); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); .str-chat__message-attachment-file--item__name, .str-chat__message-attachment-audio-widget--title { @@ -182,16 +184,18 @@ } .str-chat__message-attachment-file--item__data { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); } } } .str-chat__message-attachment-file--item { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); } @@ -199,7 +203,7 @@ } .str-chat__message-attachment-download-icon { - --str-chat-icon-height: var(--size-16); + --str-chat-icon-height: var(--str-chat__size-16); } } @@ -218,7 +222,7 @@ .str-chat__message-bubble { border: 1px solid var(--chat-border); - box-shadow: var(--background-core-elevation-0); + box-shadow: var(--str-chat__background-core-elevation-0); } .str-chat__message-attachment { @@ -237,14 +241,14 @@ .str-chat__message--other { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-end-start-radius: var(--message-bubble-radius-tail); + border-end-start-radius: var(--str-chat__message-bubble-radius-tail); } } .str-chat__message--me { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-end-end-radius: var(--message-bubble-radius-tail); + border-end-end-radius: var(--str-chat__message-bubble-radius-tail); } } } @@ -253,7 +257,7 @@ .str-chat__li--middle { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-radius: var(--message-bubble-radius-group-middle); + border-radius: var(--str-chat__message-bubble-radius-group-middle); } } diff --git a/src/components/Attachment/styling/AttachmentActions.scss b/src/components/Attachment/styling/AttachmentActions.scss index 153c5f02a..638ff4e4a 100644 --- a/src/components/Attachment/styling/AttachmentActions.scss +++ b/src/components/Attachment/styling/AttachmentActions.scss @@ -1,6 +1,6 @@ .str-chat__message-attachment-actions { background: transparent; - color: var(--button-secondary-text); + color: var(--str-chat__button-secondary-text); .str-chat__message-attachment-actions-form { display: flex; @@ -9,23 +9,24 @@ .str-chat__message-attachment-actions-button { background: transparent; - color: var(--button-secondary-text); + color: var(--str-chat__button-secondary-text); width: 100%; - padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); + padding: var(--str-chat__button-padding-y-sm) + var(--str-chat__button-padding-x-with-label-sm); white-space: nowrap; border-collapse: collapse; - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); + font-size: var(--str-chat__typography-font-size-md); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); &.str-chat__button { &:active { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } &:focus-visible { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); outline: none; } } diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index e64d4c4a1..f3d75584a 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -2,9 +2,11 @@ .str-chat__message-attachment-audio-widget { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); flex: 1 1 auto; width: 100%; @@ -19,14 +21,14 @@ min-width: 0; display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__message-attachment-audio-widget--text-first-row { display: flex; justify-content: space-between; align-items: start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); svg { flex-shrink: 0; @@ -47,14 +49,14 @@ .str-chat__duration-display { width: 40px; font: var(--str-chat__font-metadata-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__message-attachment-audio-widget--text-second-row { display: flex; align-items: center; width: 100%; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); .str-chat__message-attachment-file--item-size { font: var(--str-chat__font-metadata-default); diff --git a/src/components/Attachment/styling/CardAudio.scss b/src/components/Attachment/styling/CardAudio.scss index 4ddfd8593..d5a059b50 100644 --- a/src/components/Attachment/styling/CardAudio.scss +++ b/src/components/Attachment/styling/CardAudio.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: column; width: 100%; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); } } } diff --git a/src/components/Attachment/styling/DownloadButton.scss b/src/components/Attachment/styling/DownloadButton.scss index 51369748e..75e958dc8 100644 --- a/src/components/Attachment/styling/DownloadButton.scss +++ b/src/components/Attachment/styling/DownloadButton.scss @@ -1,5 +1,5 @@ .str-chat__button.str-chat__button--secondary.str-chat__button--outline.str-chat__audio-attachment-download-button { - border-color: var(--chat-border-on-chat-incoming); + border-color: var(--str-chat__chat-border-on-chat-incoming); flex-shrink: 0; .str-chat__attachment-download-button__icon { @@ -10,5 +10,5 @@ .str-chat__message--me .str-chat__button.str-chat__button--outline.str-chat__audio-attachment-download-button { - border-color: var(--chat-border-on-chat-outgoing); + border-color: var(--str-chat__chat-border-on-chat-outgoing); } diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index ea2f00caf..9033ef150 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -4,7 +4,9 @@ background: var(--chat-bg-attachment); color: var(--chat-text); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); display: flex; flex-direction: column; @@ -26,10 +28,10 @@ min-width: 0; min-height: 0; @include utils.flex-col-center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); .str-chat__icon { - fill: var(--accent-neutral); + fill: var(--str-chat__accent-neutral); height: 40px; width: 40px; } @@ -40,7 +42,7 @@ inset-block: 0.5rem; height: 12px; width: 12px; - color: var(--accent-neutral); + color: var(--str-chat__accent-neutral); } } @@ -48,7 +50,7 @@ display: flex; justify-content: center; padding: 0.5rem; - background-color: var(--background-core-surface-subtle); + background-color: var(--str-chat__background-core-surface-subtle); font: var(--str-chat__font-caption-default); .str-chat__message-attachment-geolocation__status--active { @@ -58,7 +60,7 @@ gap: 0.375rem; .str-chat__message-attachment-geolocation__status--active-status { - color: var(--accent-success); + color: var(--str-chat__accent-success); } .str-chat__message-attachment-geolocation__status--active-until { diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss index 49d04f05d..15bbc3a19 100644 --- a/src/components/Attachment/styling/Giphy.scss +++ b/src/components/Attachment/styling/Giphy.scss @@ -31,21 +31,21 @@ $gif-height: 200px; .str-chat__giphy-badge { display: inline-flex; height: 24px; - padding: var(--spacing-xxxs, 2px) var(--spacing-xs, 8px); + padding: var(--str-chat__spacing-xxxs, 2px) var(--str-chat__spacing-xs, 8px); justify-content: center; align-items: center; - gap: var(--spacing-xxs, 4px); + gap: var(--str-chat__spacing-xxs, 4px); position: absolute; inset-inline-start: 8px; bottom: 8px; - border-radius: var(--radius-lg, 12px); - background-color: var(--badge-bg-overlay, rgba(0, 0, 0, 0.75)); - color: var(--badge-text-on-accent, #fff); + border-radius: var(--str-chat__radius-lg, 12px); + background-color: var(--str-chat__badge-bg-overlay, rgba(0, 0, 0, 0.75)); + color: var(--str-chat__badge-text-on-accent, #fff); - font-size: var(--typography-font-size-xs, 12px); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight, 16px); + font-size: var(--str-chat__typography-font-size-xs, 12px); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight, 16px); text-transform: uppercase; } @@ -60,14 +60,14 @@ $gif-height: 200px; .str-chat__visibility-disclaimer { display: flex; - padding: var(--spacing-sm, 12px); + padding: var(--str-chat__spacing-sm, 12px); align-items: center; - gap: var(--spacing-xs, 8px); + gap: var(--str-chat__spacing-xs, 8px); align-self: stretch; 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); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); } } diff --git a/src/components/Attachment/styling/LinkPreview.scss b/src/components/Attachment/styling/LinkPreview.scss index 9372232d1..c05214058 100644 --- a/src/components/Attachment/styling/LinkPreview.scss +++ b/src/components/Attachment/styling/LinkPreview.scss @@ -8,11 +8,12 @@ width: 100%; display: flex; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm) + var(--str-chat__spacing-xs) var(--str-chat__spacing-xs); overflow: hidden; - border-radius: var(--message-bubble-radius-attachment); - line-height: var(--typography-line-height-tight); + border-radius: var(--str-chat__message-bubble-radius-attachment); + line-height: var(--str-chat__typography-line-height-tight); * { color: var(--chat-text); @@ -29,7 +30,7 @@ img, .str-chat__image-placeholder { - border-radius: var(--message-bubble-radius-attachment-inline, 8px); + border-radius: var(--str-chat__message-bubble-radius-attachment-inline, 8px); } img { @@ -46,19 +47,19 @@ .str-chat__message-attachment-card--content { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); min-width: 0; } .str-chat__message-attachment-card--title { @include utils.ellipsis-text; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__message-attachment-card--source-link, .str-chat__message-attachment-card--text { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); } .str-chat__message-attachment-card--title, @@ -75,7 +76,7 @@ align-items: center; min-width: 0; max-width: 100%; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__message-attachment-card--url { flex: 1; @@ -104,7 +105,7 @@ } .str-chat__message-attachment-card--content { - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); .str-chat__message-attachment-card--text { @include utils.ellipsis-text-clamp-lines(2); diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index 3f28e2464..fa37a432d 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -6,16 +6,18 @@ .str-chat__modal-gallery { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; overflow: hidden; - border-radius: var(--radius-lg); - gap: var(--space-2); + border-radius: var(--str-chat__radius-lg); + gap: var(--str-chat__space-2); width: $max-width; max-width: $max-width; // CDN resize requires height/max-height to be present on the img element, this rule ensures that @@ -60,15 +62,15 @@ cursor: zoom-in; // CDN resize requires max-width to be present on this element max-width: $max-width; - color: var(--text-on-inverse); + color: var(--str-chat__text-on-inverse); border: none; - font-size: var(--typography-font-size-2xl); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-relaxed); + font-size: var(--str-chat__typography-font-size-2xl); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-relaxed); inset: 0; position: absolute; - background-color: var(--background-core-scrim); + background-color: var(--str-chat__background-core-scrim); } } } @@ -140,9 +142,9 @@ background-color: var(--chat-bg); background-image: linear-gradient( 90deg, - var(--skeleton-loading-base) 0%, - var(--skeleton-loading-highlight) 50%, - var(--skeleton-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -152,8 +154,8 @@ .str-chat__loading-indicator { position: relative; z-index: 1; - width: var(--icon-size-lg); - height: var(--icon-size-lg); + width: var(--str-chat__icon-size-lg); + height: var(--str-chat__icon-size-lg); } } @@ -163,9 +165,9 @@ z-index: 1; width: 2.75rem; height: 2.75rem; - border-radius: var(--radius-max); - background-color: var(--accent-error); - color: var(--text-on-inverse); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__accent-error); + color: var(--str-chat__text-on-inverse); svg { width: 1.125rem; diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss index 8bf4fe542..a862dc37a 100644 --- a/src/components/Attachment/styling/UnsupportedAttachment.scss +++ b/src/components/Attachment/styling/UnsupportedAttachment.scss @@ -3,19 +3,21 @@ .str-chat__message-attachment-unsupported { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); - column-gap: var(--spacing-xs); + padding: var(--str-chat__spacing-md); + column-gap: var(--str-chat__spacing-xs); .str-chat__icon { - height: var(--size-20); - width: var(--size-20); + height: var(--str-chat__size-20); + width: var(--str-chat__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 0d85417b6..76c37b0d8 100644 --- a/src/components/Attachment/styling/VoiceRecording.scss +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -1,8 +1,10 @@ .str-chat__message-attachment__voice-recording-widget { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); display: flex; align-items: center; @@ -10,10 +12,10 @@ width: 100%; min-width: 0; min-height: 60px; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); .str-chat__message-attachment__voice-recording-widget__play-button-container { - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__message-attachment__voice-recording-widget__metadata { @@ -23,20 +25,20 @@ a { cursor: pointer; text-decoration: none; - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__message-attachment-download-icon { svg { - width: var(--size-24); - height: var(--size-16); + width: var(--str-chat__size-24); + height: var(--str-chat__size-16); } } } .str-chat__message-attachment__voice-recording-widget__timer { - min-width: var(--size-40); - width: var(--size-40); + min-width: var(--str-chat__size-40); + width: var(--str-chat__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 42bc3de36..82c9cd523 100644 --- a/src/components/AudioPlayback/styling/DurationDisplay.scss +++ b/src/components/AudioPlayback/styling/DurationDisplay.scss @@ -3,7 +3,7 @@ letter-spacing: 0; min-width: 35px; width: 35px; - color: var(--text-primary); + color: var(--str-chat__text-primary); white-space: nowrap; text-align: center; } diff --git a/src/components/AudioPlayback/styling/PlaybackRateButton.scss b/src/components/AudioPlayback/styling/PlaybackRateButton.scss index 230822d25..1f1836ccf 100644 --- a/src/components/AudioPlayback/styling/PlaybackRateButton.scss +++ b/src/components/AudioPlayback/styling/PlaybackRateButton.scss @@ -5,19 +5,19 @@ display: flex; justify-content: center; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 48px; min-height: 24px; max-height: 24px; - padding: var(--button-padding-y-sm) var(--spacing-xs); + padding: var(--str-chat__button-padding-y-sm) var(--str-chat__spacing-xs); background-color: inherit; - border-radius: var(--button-radius-lg); + border-radius: var(--str-chat__button-radius-lg); border: 1px solid var(--chat-border-on-chat); - color: var(--control-playback-toggle-text, var(--text-primary)); + color: var(--str-chat__control-playback-toggle-text, var(--str-chat__text-primary)); font: var(--str-chat__font-metadata-emphasis); &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } &:not(:disabled):focus-visible { @@ -28,12 +28,12 @@ &:not(:disabled):active { // pressed - @include utils.overlay-after(var(--background-utility-pressed)); + @include utils.overlay-after(var(--str-chat__background-utility-pressed)); } &:disabled { - border-color: var(--border-utility-disabled); - color: var(--text-disabled); + border-color: var(--str-chat__border-utility-disabled); + color: var(--str-chat__text-disabled); cursor: default; } } diff --git a/src/components/AudioPlayback/styling/ProgressBar.scss b/src/components/AudioPlayback/styling/ProgressBar.scss index 22ff4e094..bac8d54af 100644 --- a/src/components/AudioPlayback/styling/ProgressBar.scss +++ b/src/components/AudioPlayback/styling/ProgressBar.scss @@ -1,32 +1,33 @@ .str-chat { .str-chat__message-attachment-audio-widget--progress-track { position: relative; - height: var(--size-4); + height: var(--str-chat__size-4); flex: 1; min-width: 0; cursor: pointer; background: linear-gradient( to var(--str-chat__progress-direction, right), - var(--chat-waveform-bar-playing) + var(--str-chat__chat-waveform-bar-playing) var(--str-chat__message-attachment-audio-widget-progress), - var(--chat-waveform-bar) var(--str-chat__message-attachment-audio-widget-progress) + var(--str-chat__chat-waveform-bar) + var(--str-chat__message-attachment-audio-widget-progress) ); [dir='rtl'] & { --str-chat__progress-direction: left; } - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); .str-chat__message-attachment-audio-widget--progress-indicator { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); - 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); + height: var(--str-chat__size-12); + width: var(--str-chat__size-12); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__control-playback-thumb-border-default); + background: var(--str-chat__control-playback-thumb-bg-default); 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 3855aad9d..c21a1262e 100644 --- a/src/components/AudioPlayback/styling/WaveProgressBar.scss +++ b/src/components/AudioPlayback/styling/WaveProgressBar.scss @@ -8,8 +8,8 @@ .str-chat__message-attachment__voice-recording-widget__audio-state { display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs); height: 100%; } @@ -34,26 +34,26 @@ .str-chat__wave-progress-bar__progress-indicator { position: absolute; inset-inline-start: 0; - // todo: CSS use semantic variable instead of --base-white - border: 2px solid var(--base-white); + // todo: CSS use semantic variable instead of --str-chat__base-white + border: 2px solid var(--str-chat__base-white); box-shadow: var(--str-chat__box-shadow-3); - background: var(--accent-neutral); + background: var(--str-chat__accent-neutral); height: 14px; width: 14px; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); cursor: grab; transition: inset-inline-start 250ms linear; } } .str-chat__wave-progress-bar__amplitude-bar { - background: var(--chat-waveform-bar); - border-radius: var(--radius-max); + background: var(--str-chat__chat-waveform-bar); + border-radius: var(--str-chat__radius-max); transition: background 250ms linear; } .str-chat__wave-progress-bar__amplitude-bar--active { - background: var(--chat-waveform-bar-playing); + background: var(--str-chat__chat-waveform-bar-playing); } .str-chat__wave-progress-bar__track--dragging { @@ -68,7 +68,7 @@ .str-chat__wave-progress-bar__track--playback-initiated { .str-chat__wave-progress-bar__progress-indicator { - background: var(--accent-primary); + background: var(--str-chat__accent-primary); } } } diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss index cb9079989..83db515e4 100644 --- a/src/components/Avatar/styling/Avatar.scss +++ b/src/components/Avatar/styling/Avatar.scss @@ -4,12 +4,12 @@ display: flex; justify-content: center; align-items: center; - border-radius: var(--radius-max); - background: var(--avatar-bg-default); - color: var(--avatar-text-default); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__avatar-bg-default); + color: var(--str-chat__avatar-text-default); text-align: center; - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); font-style: normal; line-height: 1; text-transform: uppercase; @@ -49,7 +49,7 @@ position: absolute; width: calc(100% + 4px); height: calc(100% + 4px); - border: 2px solid var(--border-core-inverse); + border: 2px solid var(--str-chat__border-core-inverse); border-radius: inherit; } @@ -69,63 +69,63 @@ sin(var(--avatar-status-badge-angle)) - var(--avatar-status-badge-size) / 2 ); - border-radius: var(--radius-max, 9999px); + border-radius: var(--str-chat__radius-max, 9999px); border-style: solid; - border-color: var(--presence-border); + border-color: var(--str-chat__presence-border); border-width: 2px; &.str-chat__avatar-status-badge--online { - background: var(--presence-bg-online); + background: var(--str-chat__presence-bg-online); } &.str-chat__avatar-status-badge--offline { - background: var(--presence-bg-offline); + background: var(--str-chat__presence-bg-offline); } } &.str-chat__avatar--size-2xl { --avatar-size: 64px; --avatar-status-badge-size: 16px; - --avatar-icon-size: var(--icon-size-lg); + --avatar-icon-size: var(--str-chat__icon-size-lg); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-xl); + font-size: var(--str-chat__typography-font-size-xl); } &.str-chat__avatar--size-xl { --avatar-size: 48px; --avatar-status-badge-size: 16px; - --avatar-icon-size: var(--size-24); // TODO: missing icon size + --avatar-icon-size: var(--str-chat__size-24); // TODO: missing icon size --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-xl); + font-size: var(--str-chat__typography-font-size-xl); } &.str-chat__avatar--size-lg { --avatar-size: 40px; --avatar-status-badge-size: 14px; - --avatar-icon-size: var(--icon-size-md); + --avatar-icon-size: var(--str-chat__icon-size-md); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-md); + font-size: var(--str-chat__typography-font-size-md); } &.str-chat__avatar--size-md { --avatar-size: 32px; --avatar-status-badge-size: 12px; - --avatar-icon-size: var(--icon-size-md); + --avatar-icon-size: var(--str-chat__icon-size-md); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); } &.str-chat__avatar--size-sm { --avatar-size: 24px; --avatar-status-badge-size: 8px; - --avatar-icon-size: var(--icon-size-sm); + --avatar-icon-size: var(--str-chat__icon-size-sm); --avatar-icon-stroke-width: 1.2px; - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); .str-chat__avatar-status-badge { border-width: 1px; @@ -138,7 +138,7 @@ --avatar-icon-size: 10px; --avatar-icon-stroke-width: 1.2px; - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); .str-chat__avatar-status-badge { border-width: 1px; diff --git a/src/components/Avatar/styling/AvatarStack.scss b/src/components/Avatar/styling/AvatarStack.scss index a81747f2b..efd9e7eb7 100644 --- a/src/components/Avatar/styling/AvatarStack.scss +++ b/src/components/Avatar/styling/AvatarStack.scss @@ -8,21 +8,21 @@ &.str-chat__avatar-stack--size-xs { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-xs) * -1); + margin-inline-start: calc(var(--str-chat__spacing-xs) * -1); } } &.str-chat__avatar-stack--size-sm { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-sm) * -1); + margin-inline-start: calc(var(--str-chat__spacing-sm) * -1); } } &.str-chat__avatar-stack--size-md { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-sm) * -1); + margin-inline-start: calc(var(--str-chat__spacing-sm) * -1); } } } diff --git a/src/components/Avatar/styling/GroupAvatar.scss b/src/components/Avatar/styling/GroupAvatar.scss index dbd0e428e..08d8de455 100644 --- a/src/components/Avatar/styling/GroupAvatar.scss +++ b/src/components/Avatar/styling/GroupAvatar.scss @@ -16,8 +16,8 @@ --avatar-group-count-badge-size: 32px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-sm); - padding-inline: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + padding-inline: var(--str-chat__spacing-xs); } } @@ -27,8 +27,8 @@ --avatar-group-count-badge-size: 24px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-sm); - padding-inline: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + padding-inline: var(--str-chat__spacing-xs); } } @@ -38,8 +38,8 @@ --avatar-group-count-badge-size: 20px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-xxs); - padding-inline: var(--spacing-xxs); + font-size: var(--str-chat__typography-font-size-xxs); + padding-inline: var(--str-chat__spacing-xxs); } } @@ -53,28 +53,28 @@ inset-inline-end: -2px; top: -2px; - border-radius: var(--radius-max, 9999px); + border-radius: var(--str-chat__radius-max, 9999px); border-style: solid; - border-color: var(--presence-border, #fff); + border-color: var(--str-chat__presence-border, #fff); border-width: 2px; } &.str-chat__avatar-group--online::after { - background: var(--presence-bg-online, #00c384); + background: var(--str-chat__presence-bg-online, #00c384); } &.str-chat__avatar-group--offline::after { - background: var(--presence-bg-offline, #687385); + background: var(--str-chat__presence-bg-offline, #687385); } // TODO: discuss // & > .str-chat__avatar::before { // content: ''; - // border-radius: var(--radius-max); + // border-radius: var(--str-chat__radius-max); // width: 100%; // height: 100%; - // border: 2px solid var(--border-core-on-accent); + // border: 2px solid var(--str-chat__border-core-on-accent); // background: transparent; // position: absolute; // box-sizing: content-box; @@ -90,12 +90,12 @@ height: var(--avatar-group-count-badge-size); min-width: var(--avatar-group-count-badge-size); min-height: var(--avatar-group-count-badge-size); - font-weight: var(--typography-font-weight-bold); - font-family: var(--typography-font-family-sans); + font-weight: var(--str-chat__typography-font-weight-bold); + font-family: var(--str-chat__typography-font-family-sans); justify-content: center; align-items: center; - border-radius: var(--radius-max); - background: var(--badge-bg-default); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-default); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } diff --git a/src/components/Badge/styling/Badge.scss b/src/components/Badge/styling/Badge.scss index fc9f95d9f..a2eb9dc45 100644 --- a/src/components/Badge/styling/Badge.scss +++ b/src/components/Badge/styling/Badge.scss @@ -5,83 +5,83 @@ display: flex; align-items: center; justify-content: center; - font-weight: var(--typography-font-weight-bold); - border-radius: var(--radius-max); + font-weight: var(--str-chat__typography-font-weight-bold); + border-radius: var(--str-chat__radius-max); line-height: 1; border-style: solid; } // Variants: map to design tokens .str-chat__badge--variant-default { - background: var(--badge-bg-default); - color: var(--badge-text); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-default); + color: var(--str-chat__badge-text); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-primary { - background: var(--badge-bg-primary); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-primary); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-error { - background: var(--badge-bg-error); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-error); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-neutral { - background: var(--badge-bg-neutral); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-neutral); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-inverse { - background: var(--badge-bg-inverse); - color: var(--badge-text-on-inverse); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-inverse); + color: var(--str-chat__badge-text-on-inverse); + border-color: var(--str-chat__badge-border); } // Sizes: caption-numeric equivalents (sm/12px, md/14px, lg/16px) .str-chat__badge--size-sm { - font-size: var(--typography-font-size-xxs); + font-size: var(--str-chat__typography-font-size-xxs); min-width: 16px; min-height: 16px; - padding-inline: var(--spacing-xxxs); + padding-inline: var(--str-chat__spacing-xxxs); border-width: 1px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--size-md { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); min-width: 20px; min-height: 20px; - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); border-width: 2px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--size-lg { - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); min-width: 24px; min-height: 24px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); border-width: 2px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--variant-counter { - border-radius: var(--radius-max); - border: 1px solid var(--border-core-subtle); - background: var(--badge-bg-default); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__border-core-subtle); + background: var(--str-chat__badge-bg-default); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); font: var(--str-chat__font-numeric-xl); - color: var(--badge-text); + color: var(--str-chat__badge-text); &.str-chat__badge--size-xs { min-width: 20px; min-height: 20px; - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); font: var(--str-chat__font-numeric-md); } @@ -89,19 +89,19 @@ &.str-chat__badge--size-sm { min-width: 24px; min-height: 24px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); } &.str-chat__badge--size-md { min-width: 32px; min-height: 32px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); } &.str-chat__badge--size-lg { min-width: 40px; min-height: 40px; - padding-inline: var(--spacing-sm); + padding-inline: var(--str-chat__spacing-sm); } } diff --git a/src/components/Badge/styling/MediaBadge.scss b/src/components/Badge/styling/MediaBadge.scss index 14ee1ba5b..f4100c3f2 100644 --- a/src/components/Badge/styling/MediaBadge.scss +++ b/src/components/Badge/styling/MediaBadge.scss @@ -1,21 +1,21 @@ .str-chat__media-badge { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); position: absolute; - bottom: var(--spacing-xs); - inset-inline-start: var(--spacing-xs); - padding: var(--spacing-xxs) var(--spacing-xs); - border-radius: var(--radius-max); - background: var(--badge-bg-inverse); - color: var(--badge-text-on-inverse); + bottom: var(--str-chat__spacing-xs); + inset-inline-start: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-inverse); + color: var(--str-chat__badge-text-on-inverse); font: var(--str-chat__font-numeric-md); overflow: hidden; text-overflow: ellipsis; .str-chat__icon { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); fill: currentColor; } } diff --git a/src/components/BaseImage/styling/ImagePlaceholder.scss b/src/components/BaseImage/styling/ImagePlaceholder.scss index 1c4813ad0..1d1397364 100644 --- a/src/components/BaseImage/styling/ImagePlaceholder.scss +++ b/src/components/BaseImage/styling/ImagePlaceholder.scss @@ -7,12 +7,12 @@ min-width: 0; min-height: 0; @include utils.flex-col-center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); svg { - fill: var(--accent-neutral); - width: min(var(--icon-size-lg, 32px), 50%); - height: min(var(--icon-size-lg, 32px), 50%); + fill: var(--str-chat__accent-neutral); + width: min(var(--str-chat__icon-size-lg, 32px), 50%); + height: min(var(--str-chat__icon-size-lg, 32px), 50%); } } } diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss index 1d31b44d5..93ba6dd1b 100644 --- a/src/components/Button/styling/Button.scss +++ b/src/components/Button/styling/Button.scss @@ -17,54 +17,54 @@ &.str-chat__button--solid { &.str-chat__button--primary { - background-color: var(--button-primary-bg); - color: var(--button-primary-text-on-accent); + background-color: var(--str-chat__button-primary-bg); + color: var(--str-chat__button-primary-text-on-accent); } &.str-chat__button--secondary { - background-color: var(--button-secondary-bg); - color: var(--button-secondary-text-on-accent); + background-color: var(--str-chat__button-secondary-bg); + color: var(--str-chat__button-secondary-text-on-accent); } &.str-chat__button--destructive { - background-color: var(--button-destructive-bg); - color: var(--button-destructive-text-on-accent); + background-color: var(--str-chat__button-destructive-bg); + color: var(--str-chat__button-destructive-text-on-accent); } &:disabled { - background-color: var(--background-utility-disabled); + background-color: var(--str-chat__background-utility-disabled); } } &.str-chat__button--ghost { &.str-chat__button--primary { - color: var(--button-primary-text); + color: var(--str-chat__button-primary-text); } &.str-chat__button--secondary { - color: var(--button-secondary-text); + color: var(--str-chat__button-secondary-text); } &.str-chat__button--destructive { - color: var(--button-destructive-text); + color: var(--str-chat__button-destructive-text); } } // todo: shouldn't we specify also background color? &.str-chat__button--outline { &.str-chat__button--primary { - color: var(--button-primary-text); - border-color: var(--button-primary-border); + color: var(--str-chat__button-primary-text); + border-color: var(--str-chat__button-primary-border); } &.str-chat__button--secondary { - color: var(--button-secondary-text); - border-color: var(--button-secondary-border); + color: var(--str-chat__button-secondary-text); + border-color: var(--str-chat__button-secondary-border); } &.str-chat__button--destructive { - color: var(--button-destructive-text); - border-color: var(--button-destructive-border); + color: var(--str-chat__button-destructive-text); + border-color: var(--str-chat__button-destructive-border); } } @@ -77,13 +77,13 @@ &.str-chat__button--outline, &.str-chat__button--ghost { &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } &[aria-expanded='true'], &:not(:disabled):active { // pressed - @include utils.overlay-after(var(--background-utility-pressed)); + @include utils.overlay-after(var(--str-chat__background-utility-pressed)); } &:not(:disabled):focus-visible { @@ -93,17 +93,17 @@ &:not(:disabled)[aria-pressed='true'] { // toggled - @include utils.overlay-after(var(--background-utility-selected)); + @include utils.overlay-after(var(--str-chat__background-utility-selected)); } &:disabled { - color: var(--text-disabled); + color: var(--str-chat__text-disabled); cursor: default; } } &.str-chat__button--outline:disabled { - border-color: var(--border-utility-disabled); + border-color: var(--str-chat__border-utility-disabled); } &.str-chat__button--floating { @@ -115,42 +115,42 @@ } &.str-chat__button--size-lg { - padding-block: var(--button-padding-y-lg); - padding-inline: var(--button-padding-x-with-label-lg); - border-radius: var(--button-radius-lg); + padding-block: var(--str-chat__button-padding-y-lg); + padding-inline: var(--str-chat__button-padding-x-with-label-lg); + border-radius: var(--str-chat__button-radius-lg); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-lg); + padding-inline: var(--str-chat__button-padding-x-icon-only-lg); } } &.str-chat__button--size-md { - padding-block: var(--button-padding-y-md); - padding-inline: var(--button-padding-x-with-label-md); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-md); + padding-inline: var(--str-chat__button-padding-x-with-label-md); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-md); + padding-inline: var(--str-chat__button-padding-x-icon-only-md); } } &.str-chat__button--size-sm { - padding-block: var(--button-padding-y-sm); - padding-inline: var(--button-padding-x-with-label-sm); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-sm); + padding-inline: var(--str-chat__button-padding-x-with-label-sm); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-sm); + padding-inline: var(--str-chat__button-padding-x-icon-only-sm); } } &.str-chat__button--size-xs { - padding-block: var(--button-padding-y-xs); - padding-inline: var(--button-padding-x-with-label-xs); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-xs); + padding-inline: var(--str-chat__button-padding-x-with-label-xs); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-xs); + padding-inline: var(--str-chat__button-padding-x-icon-only-xs); } } @@ -159,11 +159,11 @@ display: flex; align-items: center; justify-content: center; - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); .str-chat__icon { - height: var(--icon-size-sm); - width: var(--icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); } } @@ -171,7 +171,7 @@ display: flex; align-items: center; justify-content: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index 507c03c1b..c615ca712 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -42,9 +42,9 @@ } .str-chat__loading-channel { - $header-bar-height: var(--size-16); - $metadata-bar-height: var(--size-16); - $composer-control-height: var(--size-48); + $header-bar-height: var(--str-chat__size-16); + $metadata-bar-height: var(--str-chat__size-16); + $composer-control-height: var(--str-chat__size-48); height: 100%; display: flex; flex-direction: column; @@ -63,8 +63,8 @@ .str-chat__loading-channel-header-avatar { flex-shrink: 0; - width: var(--size-40); - height: var(--size-40); + width: var(--str-chat__size-40); + height: var(--str-chat__size-40); border-radius: 50%; } } @@ -88,13 +88,13 @@ width: 100%; display: flex; flex-direction: column; - gap: var(--size-28); - padding-block: var(--size-32) var(--size-24); + gap: var(--str-chat__size-28); + padding-block: var(--str-chat__size-32) var(--str-chat__size-24); .str-chat__loading-channel-message { display: flex; width: 100%; - column-gap: var(--spacing-sm); + column-gap: var(--str-chat__spacing-sm); .str-chat__loading-channel-message-avatar { flex-shrink: 0; @@ -109,17 +109,17 @@ flex-direction: column; width: min(100%, var(--str-chat__message-max-width)); max-width: var(--str-chat__message-max-width); - row-gap: var(--size-12); + row-gap: var(--str-chat__size-12); min-width: 0; } .str-chat__loading-channel-message-bubble { width: min(100%, var(--str-chat__message-max-width)); - border-radius: var(--radius-3xl); + border-radius: var(--str-chat__radius-3xl); } .str-chat__loading-channel-message-bubble--md { - height: var(--size-64); + height: var(--str-chat__size-64); width: min(58%, 272px); } @@ -163,7 +163,7 @@ flex-shrink: 0; width: $composer-control-height; height: $composer-control-height; - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); } .str-chat__loading-channel-message-input-pill { @@ -176,17 +176,17 @@ } .str-chat__channel { - background: var(--background-core-app); - color: var(--text-primary); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); } @mixin channel-loading-shimmer { - background-color: var(--background-core-surface-default); + background-color: var(--str-chat__background-core-surface-default); background-image: linear-gradient( 90deg, - var(--skeleton-loading-base) 0%, - var(--skeleton-loading-highlight) 50%, - var(--skeleton-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -246,11 +246,11 @@ } .str-chat__loading-channel-message-input-button { - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); } .str-chat__loading-channel-message-input-pill { - border-radius: var(--radius-3xl); + border-radius: var(--str-chat__radius-3xl); } } } diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss index 3d05eed51..1572a3010 100644 --- a/src/components/ChannelHeader/styling/ChannelHeader.scss +++ b/src/components/ChannelHeader/styling/ChannelHeader.scss @@ -5,8 +5,8 @@ } .str-chat__channel-header { - background: var(--background-core-elevation-1); - border-block-end: 1px solid var(--border-core-default); + background: var(--str-chat__background-core-elevation-1); + border-block-end: 1px solid var(--str-chat__border-core-default); @include utils.header-layout; .str-chat__channel-header__start { @@ -36,6 +36,6 @@ .str-chat__channel-header__data__subtitle { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } } diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index d2f7904d6..1d391e03c 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -41,14 +41,14 @@ transform var(--str-chat__channel-list-transition-duration) var(--str-chat__channel-list-transition-easing); width: var(--str-chat__channel-list-width); - background: var(--background-core-elevation-1); - color: var(--text-primary); - border-inline-end: 1px solid var(--border-core-default); + background: var(--str-chat__background-core-elevation-1); + color: var(--str-chat__text-primary); + border-inline-end: 1px solid var(--str-chat__border-core-default); .str-chat__channel-list-inner { height: 100%; overflow: hidden; - padding-bottom: calc(var(--space-8) + var(--space-2)); + padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2)); .str-chat__channel-list-inner__main { height: 100%; @@ -62,10 +62,10 @@ flex-direction: column; align-items: center; justify-content: center; - padding: calc(var(--space-8) + var(--space-4)); + padding: calc(var(--str-chat__space-8) + var(--str-chat__space-4)); p { - color: var(--text-secondary); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); } } @@ -75,12 +75,12 @@ .str-chat__load-more-button { display: flex; justify-content: center; - margin: var(--space-8) 0; + margin: var(--str-chat__space-8) 0; } .str-chat__channel-list-empty { @include utils.empty-theme('channel-list'); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } /* Mobile: hide when nav closed; when open show as overlay. */ diff --git a/src/components/ChannelList/styling/ChannelListHeader.scss b/src/components/ChannelList/styling/ChannelListHeader.scss index bf22d494c..9af4b46e0 100644 --- a/src/components/ChannelList/styling/ChannelListHeader.scss +++ b/src/components/ChannelList/styling/ChannelListHeader.scss @@ -1,12 +1,12 @@ .str-chat__channel-list__header { display: flex; align-items: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); width: 100%; .str-chat__channel-list__header__title { flex: 1; font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/ChannelListItem/styling/ChannelListItem.scss b/src/components/ChannelListItem/styling/ChannelListItem.scss index 59bf1ce75..89df6cd9c 100644 --- a/src/components/ChannelListItem/styling/ChannelListItem.scss +++ b/src/components/ChannelListItem/styling/ChannelListItem.scss @@ -1,6 +1,6 @@ .str-chat__channel-list-item-container { // display: flex; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); position: relative; &:has(.str-chat__channel-list-item__action-buttons--active), @@ -13,10 +13,10 @@ .str-chat__channel-list-item__action-buttons { display: none; position: absolute; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); - border-radius: var(--radius-md, 8px); - background: var(--background-core-elevation-3, #fff); + border-radius: var(--str-chat__radius-md, 8px); + background: var(--str-chat__background-core-elevation-3, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -25,15 +25,15 @@ inset-inline-end: 10px; top: 10px; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); & > .str-chat__button.str-chat__button--size-sm.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-xs); - padding-block: var(--button-padding-x-icon-only-xs); + padding-inline: var(--str-chat__button-padding-x-icon-only-xs); + padding-block: var(--str-chat__button-padding-x-icon-only-xs); } } - border-bottom: 1px solid var(--border-core-subtle); + border-bottom: 1px solid var(--str-chat__border-core-subtle); } .str-chat__channel-list-item__action-buttons-context-menu { @@ -42,26 +42,26 @@ .str-chat__channel-list-item { display: flex; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); align-items: center; - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); border: none; background: none; cursor: pointer; text-align: start; - font-family: var(--typography-font-family-sans); - border-radius: var(--radius-lg); + font-family: var(--str-chat__typography-font-family-sans); + border-radius: var(--str-chat__radius-lg); width: 100%; - background: var(--background-core-elevation-1); + background: var(--str-chat__background-core-elevation-1); &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } .str-chat__avatar { @@ -71,7 +71,7 @@ .str-chat__channel-list-item-data { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex-shrink: 1; flex-grow: 1; min-width: 0; @@ -80,7 +80,7 @@ display: flex; justify-content: space-between; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); .str-chat__channel-list-item-data__title { flex-shrink: 1; @@ -89,11 +89,11 @@ display: flex; align-items: inherit; - gap: var(--spacing-xxs); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-primary); + gap: var(--str-chat__spacing-xxs); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-primary); & > span { overflow-x: hidden; @@ -102,9 +102,9 @@ } & > .str-chat__icon--mute { - color: var(--text-tertiary); - width: var(--icon-size-sm); - height: var(--icon-size-sm); + color: var(--str-chat__text-tertiary); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } @@ -112,13 +112,13 @@ flex-shrink: 0; display: flex; align-items: inherit; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); .str-chat__channel-list-item-timestamp { - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + line-height: var(--str-chat__typography-line-height-normal); } } } diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index 4f7ee4755..df6bbaad0 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -3,7 +3,8 @@ --str-chat__chat-view-selector-transition-easing: ease; --str-chat__chat-view-selector-transition-offset: 8px; --str-chat__chat-view-selector-mobile-width: calc( - var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px + var(--str-chat__spacing-md) + var(--str-chat__spacing-md) + + var(--str-chat__spacing-xs) + var(--str-chat__spacing-xs) + 20px ); } @@ -13,15 +14,15 @@ height: 100%; min-height: 0; position: relative; - background-color: var(--background-core-app); + background-color: var(--str-chat__background-core-app); .str-chat__chat-view__selector { display: flex; flex-direction: column; - padding: var(--spacing-md); - gap: var(--spacing-xs); - border-inline-end: 1px solid var(--border-core-subtle); - background-color: var(--background-core-elevation-1); + padding: var(--str-chat__spacing-md); + gap: var(--str-chat__spacing-xs); + border-inline-end: 1px solid var(--str-chat__border-core-subtle); + background-color: var(--str-chat__background-core-elevation-1); .str-chat__chat-view__selector-button-container { display: flex; @@ -39,23 +40,23 @@ --str-chat-unread-count-badge-absolute-offset-vertical: 25%; gap: 4px; - padding: var(--spacing-xs); - border-radius: var(--radius-md); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-md); font: var(--str-chat__font-caption-emphasis); line-height: 1; position: relative; background: transparent; - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); &[aria-selected='true'] { - color: var(--text-primary); - background: var(--background-core-surface-default); + color: var(--str-chat__text-primary); + background: var(--str-chat__background-core-surface-default); } .str-chat__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } .str-chat__button__content { diff --git a/src/components/DateSeparator/styling/DateSeparator.scss b/src/components/DateSeparator/styling/DateSeparator.scss index b17ad8366..678fe7a25 100644 --- a/src/components/DateSeparator/styling/DateSeparator.scss +++ b/src/components/DateSeparator/styling/DateSeparator.scss @@ -11,21 +11,21 @@ .str-chat__date-separator { background: transparent; - color: var(--chat-text-system); + color: var(--str-chat__chat-text-system); display: flex; justify-content: center; align-items: center; width: 100%; - padding: var(--spacing-xs) 0; + padding: var(--str-chat__spacing-xs) 0; .str-chat__date-separator-date { display: flex; - padding: var(--spacing-xxs) var(--spacing-sm); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); justify-content: center; align-items: center; - color: var(--chat-text-system); - background-color: var(--background-core-surface-subtle); - border-radius: var(--radius-max); + color: var(--str-chat__chat-text-system); + background-color: var(--str-chat__background-core-surface-subtle); + border-radius: var(--str-chat__radius-max); font: var(--str-chat__font-metadata-emphasis); } diff --git a/src/components/Dialog/styling/Alert.scss b/src/components/Dialog/styling/Alert.scss index 3a9f9ba0f..008abaa4c 100644 --- a/src/components/Dialog/styling/Alert.scss +++ b/src/components/Dialog/styling/Alert.scss @@ -9,23 +9,23 @@ .str-chat__alert-root { @include utils.modal; @include flex-column; - gap: var(--spacing-2xl); - padding: var(--spacing-xl); + gap: var(--str-chat__spacing-2xl); + padding: var(--str-chat__spacing-xl); text-align: center; .str-chat__alert-header { @include flex-column; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; svg { - height: var(--button-visual-height-sm); - width: var(--button-visual-height-sm); + height: var(--str-chat__button-visual-height-sm); + width: var(--str-chat__button-visual-height-sm); } .str-chat__alert-header__copy { @include flex-column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; .str-chat__alert-header__title { @@ -40,7 +40,7 @@ .str-chat__alert-actions { @include flex-column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; button { diff --git a/src/components/Dialog/styling/Callout.scss b/src/components/Dialog/styling/Callout.scss index cdc0aaa85..1db8b3518 100644 --- a/src/components/Dialog/styling/Callout.scss +++ b/src/components/Dialog/styling/Callout.scss @@ -1,13 +1,13 @@ .str-chat__callout { position: relative; max-width: 320px; - border-radius: var(--radius-lg); - background-color: var(--background-core-elevation-2); + border-radius: var(--str-chat__radius-lg); + background-color: var(--str-chat__background-core-elevation-2); box-shadow: var(--str-chat__box-shadow-3); .str-chat__callout__close-button { position: absolute; - inset-inline-end: var(--spacing-xs); - top: var(--spacing-xs); + inset-inline-end: var(--str-chat__spacing-xs); + top: var(--str-chat__spacing-xs); } } diff --git a/src/components/Dialog/styling/ContextMenu.scss b/src/components/Dialog/styling/ContextMenu.scss index 442c02dc5..6306bf1c3 100644 --- a/src/components/Dialog/styling/ContextMenu.scss +++ b/src/components/Dialog/styling/ContextMenu.scss @@ -73,51 +73,53 @@ } .str-chat { - --str-chat__dialog-menu-button-hover-background-color: var(--background-utility-hover); + --str-chat__dialog-menu-button-hover-background-color: var( + --str-chat__background-utility-hover + ); --str-chat__menu-roll-duration: 170ms; --str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1); .str-chat__context-menu { - background: var(--background-core-elevation-2); - color: var(--text-primary); + background: var(--str-chat__background-core-elevation-2); + color: var(--str-chat__text-primary); box-shadow: var(--str-chat__box-shadow-3); - border-radius: var(--radius-lg); + border-radius: var(--str-chat__radius-lg); display: flex; flex-direction: column; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); .str-chat__context-menu__header { width: 100%; - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight); + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__context-menu__back-button { @include utils.button-reset; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); height: 32px; width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); text-align: center; cursor: pointer; - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight); &:hover:not(:disabled) { - background-color: var(--background-utility-hover); + background-color: var(--str-chat__background-utility-hover); } &:active:not(:disabled) { - background-color: var(--background-utility-pressed); + background-color: var(--str-chat__background-utility-pressed); } &:focus-visible:not(:disabled) { @@ -137,7 +139,7 @@ width: 100%; display: flex; flex-direction: column; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); overflow-x: hidden; } @@ -169,24 +171,24 @@ .str-chat__context-menu__button { background: transparent; - color: var(--text-primary); - border-radius: var(--radius-md); + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__radius-md); @include utils.button-reset; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); cursor: pointer; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); &.str-chat__context-menu__button--destructive { .str-chat__context-menu__button__label, .str-chat__icon { - color: var(--accent-error); + color: var(--str-chat__accent-error); } } @@ -195,7 +197,7 @@ } &:active:not(:disabled) { - background-color: var(--background-utility-pressed); + background-color: var(--str-chat__background-utility-pressed); } &:focus-visible:not(:disabled) { @@ -207,31 +209,31 @@ } .str-chat__icon { - height: var(--icon-size-sm); - width: var(--icon-size-sm); - color: var(--text-secondary); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); + color: var(--str-chat__text-secondary); } .str-chat__context-menu__button__label { @include utils.ellipsis-text; flex: auto; text-align: start; - color: var(--text-primary); + color: var(--str-chat__text-primary); white-space: nowrap; min-width: 0; } .str-chat__context-menu__button__details { flex: 1; - color: var(--text-tertiary); - font-weight: var(--typography-font-weight-regular); + color: var(--str-chat__text-tertiary); + font-weight: var(--str-chat__typography-font-weight-regular); white-space: nowrap; } } .str-chat__emoji-context-menu__button, .str-chat__user-context-menu__button { - font-weight: var(--typography-font-weight-regular, 400); + font-weight: var(--str-chat__typography-font-weight-regular, 400); } } diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index 1fa837d50..82fd7007b 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -7,41 +7,41 @@ .str-chat__prompt__header { display: flex; align-items: center; - gap: var(--spacing-xs) var(--spacing-md); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__prompt__header__title-group { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1; min-width: 0; } .str-chat__prompt__header__title { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__prompt__header__description { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__prompt__header__close-button { flex-shrink: 0; - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__icon { - width: var(--icon-size-md); - height: var(--icon-size-md); + width: var(--str-chat__icon-size-md); + height: var(--str-chat__icon-size-md); } } } .str-chat__prompt__body { /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */ - padding: var(--spacing-xxs) var(--spacing-xl); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xl); @include utils.scrollable-y; } @@ -50,12 +50,12 @@ align-items: center; justify-content: flex-end; width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__prompt__footer__controls { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } } diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss index d05b9cb46..265ba256b 100644 --- a/src/components/Dialog/styling/Viewer.scss +++ b/src/components/Dialog/styling/Viewer.scss @@ -12,26 +12,26 @@ .str-chat__viewer__header { display: flex; align-items: center; - gap: var(--spacing-xs) var(--spacing-md); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__viewer__header__title-group { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1; min-width: 0; } .str-chat__viewer__header__title { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__viewer__header__description { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__viewer__header__go-back-button { @@ -44,12 +44,12 @@ .str-chat__viewer__header__close-button { flex-shrink: 0; - color: var(--text-primary); + color: var(--str-chat__text-primary); } } .str-chat__viewer__body { - padding: 0 var(--spacing-xl); + padding: 0 var(--str-chat__spacing-xl); flex: 1; min-height: 0; } @@ -59,12 +59,12 @@ align-items: center; justify-content: flex-end; width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__viewer__footer__controls { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } } diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss index 871df772e..1a758910b 100644 --- a/src/components/DragAndDrop/styling/DragAndDropContainer.scss +++ b/src/components/DragAndDrop/styling/DragAndDropContainer.scss @@ -22,10 +22,10 @@ $drag-and-drop-container-border-block-start: 2px solid transparent; border-block-end: $drag-and-drop-container-border-block-start; &.str-chat__drag-and-drop-container__item--dragged-over-from-top { - border-block-end: 2px solid var(--accent-primary); + border-block-end: 2px solid var(--str-chat__accent-primary); } &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { - border-block-start: 2px solid var(--accent-primary); + border-block-start: 2px solid var(--str-chat__accent-primary); } } diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss index e771a100e..2d10ddf99 100644 --- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss +++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss @@ -1,16 +1,16 @@ .str-chat__empty-channel { - --str-chat-icon-color: var(--text-tertiary); + --str-chat-icon-color: var(--str-chat__text-tertiary); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); position: relative; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); text-align: center; - background: var(--background-core-app); - color: var(--text-secondary); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); svg { diff --git a/src/components/Form/styling/FieldError.scss b/src/components/Form/styling/FieldError.scss index 49b072d80..b9736c4b6 100644 --- a/src/components/Form/styling/FieldError.scss +++ b/src/components/Form/styling/FieldError.scss @@ -1,5 +1,5 @@ .str-chat__form-field-error { - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); - color: var(--accent-error); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__accent-error); } diff --git a/src/components/Form/styling/NumericInput.scss b/src/components/Form/styling/NumericInput.scss index 434e5d127..65031416c 100644 --- a/src/components/Form/styling/NumericInput.scss +++ b/src/components/Form/styling/NumericInput.scss @@ -4,7 +4,7 @@ .str-chat__form-numeric-input { display: flex; flex-direction: column; - gap: var(--spacing-xs, 0.5rem); + gap: var(--str-chat__spacing-xs, 0.5rem); &__label { font: var(--str-chat__caption-default-text); @@ -13,10 +13,10 @@ &__wrapper { display: flex; align-items: center; - gap: var(--spacing-xs, 0.5rem); + gap: var(--str-chat__spacing-xs, 0.5rem); padding: 0; background: transparent; - border-radius: var(--radius-md, 0.5rem); + border-radius: var(--str-chat__radius-md, 0.5rem); outline: none; transition: border-color 0.15s ease, @@ -28,11 +28,11 @@ flex: 0 1 auto; min-width: 2ch; width: 2.5rem; - padding: var(--spacing-xs, 0.5rem) 0; - font-size: var(--typography-font-size-sm, 0.875rem); - font-weight: var(--typography-font-weight-medium, 500); - line-height: var(--typography-line-height-tight, 1.25); - color: var(--input-text-default, #1a1b25); + padding: var(--str-chat__spacing-xs, 0.5rem) 0; + font-size: var(--str-chat__typography-font-size-sm, 0.875rem); + font-weight: var(--str-chat__typography-font-weight-medium, 500); + line-height: var(--str-chat__typography-line-height-tight, 1.25); + color: var(--str-chat__input-text-default, #1a1b25); text-align: center; background: transparent; border: none; @@ -40,11 +40,11 @@ box-shadow: none; &::placeholder { - color: var(--input-text-placeholder, var(--text-tertiary)); + color: var(--str-chat__input-text-placeholder, var(--str-chat__text-tertiary)); } .str-chat__form-numeric-input--disabled & { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); cursor: not-allowed; } } diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index e436e606c..c6c2ea6d9 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -3,12 +3,14 @@ // CSS variables aligned with Figma tokens; fallbacks from get_variable_defs. $switch-field-track-height: 24px; -$switch-field-track-thumb-bg: var(--base-white, #ffffff); -$switch-field-track-radius: var(--button-radius-full, 9999px); +$switch-field-track-thumb-bg: var(--str-chat__base-white, #ffffff); +$switch-field-track-radius: var(--str-chat__button-radius-full, 9999px); .str-chat { - --str-chat__switch-field-background-color: var(--background-core-surface-card); - --str-chat__switch-field-border-radius: var(--radius-md); + --str-chat__switch-field-background-color: var( + --str-chat__background-core-surface-card + ); + --str-chat__switch-field-border-radius: var(--str-chat__radius-md); .str-chat__form__switch-fieldset { width: 100%; @@ -19,9 +21,9 @@ $switch-field-track-radius: var(--button-radius-full, 9999px); .str-chat__form__switch-field { display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); width: 100%; - padding: var(--spacing-sm) var(--spacing-md); + padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md); background-color: var(--str-chat__switch-field-background-color); border-radius: var(--str-chat__switch-field-border-radius); box-sizing: border-box; @@ -52,9 +54,9 @@ $switch-field-track-radius: var(--button-radius-full, 9999px); flex-shrink: 0; width: 44px; height: $switch-field-track-height; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); cursor: pointer; - background-color: var(--control-toggle-switch-bg); + background-color: var(--str-chat__control-toggle-switch-bg); border-radius: $switch-field-track-radius; transition: background-color 0.2s ease; @@ -67,7 +69,7 @@ $switch-field-track-radius: var(--button-radius-full, 9999px); } &--on { - background-color: var(--control-toggle-switch-bg-selected); + background-color: var(--str-chat__control-toggle-switch-bg-selected); justify-content: flex-end; .str-chat__form__switch-field__switch-handle { @@ -89,12 +91,12 @@ $switch-field-track-radius: var(--button-radius-full, 9999px); .str-chat__form__switch-field__label { .str-chat__form__switch-field__label__text { - color: var(--text-primary); + color: var(--str-chat__text-primary); font: var(--str-chat__font-heading-xs); } .str-chat__form__switch-field__label__description { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); font: var(--str-chat__font-metadata-default); } } @@ -106,7 +108,7 @@ $switch-field-track-radius: var(--button-radius-full, 9999px); .str-chat__form__switch-field__label--as-error { .str-chat__form__switch-field__label__description { - color: var(--accent-error); + color: var(--str-chat__accent-error); } } } diff --git a/src/components/Form/styling/TextInput.scss b/src/components/Form/styling/TextInput.scss index 72e5126e4..e418a7be5 100644 --- a/src/components/Form/styling/TextInput.scss +++ b/src/components/Form/styling/TextInput.scss @@ -1,14 +1,14 @@ .str-chat__form-text-input { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } .str-chat__form-text-input__label { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-tight); - color: var(--text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__text-primary); } /* Column shell: control row + optional in-border error */ @@ -17,8 +17,8 @@ flex-direction: column; align-items: stretch; gap: 0; - background-color: var(--background-core-elevation-0); - border-radius: var(--radius-md); + background-color: var(--str-chat__background-core-elevation-0); + border-radius: var(--str-chat__radius-md); outline: none; transition: border-color 0.15s ease, @@ -28,8 +28,8 @@ .str-chat__form-text-input__control-row { display: flex; align-items: center; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); min-width: 0; width: 100%; } @@ -38,7 +38,7 @@ // Outline variant — always 1px border on wrapper; + 2px focus ring on focus-within // --------------------------------------------------------------------------- .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-core-default); + border: 1px solid var(--str-chat__border-core-default); box-shadow: none; } @@ -48,18 +48,18 @@ } .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); } /* In-border error: shell keeps default outline (red only on message row) */ .str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-core-default); + border: 1px solid var(--str-chat__border-core-default); } .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -70,7 +70,7 @@ } .str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-disabled); + border: 1px solid var(--str-chat__border-utility-disabled); } // --------------------------------------------------------------------------- @@ -87,7 +87,7 @@ } .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -99,7 +99,7 @@ .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -117,7 +117,7 @@ align-items: center; justify-content: center; flex-shrink: 0; - color: var(--input-text-icon); + color: var(--str-chat__input-text-icon); } .str-chat__form-text-input .str-chat__form-text-input__input { @@ -125,7 +125,7 @@ min-width: 0; padding: 0; font: var(--str-chat__caption-default-text); - color: var(--input-text-default); + color: var(--str-chat__input-text-default); background: transparent; border: none; outline: none; @@ -134,18 +134,18 @@ } .str-chat__form-text-input .str-chat__form-text-input__input::placeholder { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); } .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); cursor: not-allowed; } .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input::placeholder { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); } .str-chat__form-text-input .str-chat__form-text-input__input:focus, @@ -157,9 +157,9 @@ .str-chat__form-text-input__suffix { flex-shrink: 0; - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); } .str-chat__form-text-input__trailing { @@ -167,32 +167,33 @@ align-items: center; justify-content: center; flex-shrink: 0; - margin-inline-end: calc(-1 * var(--space-4)); - color: var(--input-text-icon); + margin-inline-end: calc(-1 * var(--str-chat__space-4)); + color: var(--str-chat__input-text-icon); } .str-chat__form-text-input--error .str-chat__form-text-input__trailing { - color: var(--accent-error); + color: var(--str-chat__accent-error); } .str-chat__form-text-input__message { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); font: var(--str-chat__metadata-default-text); } /* Base typography/color only when not error (error uses str-chat__form-field-error) */ .str-chat__form-text-input__message:not(.str-chat__form-field-error) { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__form-text-input__message--field-message-inside { - padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm); + padding: var(--str-chat__spacing-none) var(--str-chat__spacing-sm) + var(--str-chat__spacing-sm); } .str-chat__form-text-input__message--success { - color: var(--accent-success); + color: var(--str-chat__accent-success); } .str-chat__form-text-input__message-text { diff --git a/src/components/Form/styling/TextInputFieldset.scss b/src/components/Form/styling/TextInputFieldset.scss index 1490d8559..df60618ea 100644 --- a/src/components/Form/styling/TextInputFieldset.scss +++ b/src/components/Form/styling/TextInputFieldset.scss @@ -4,10 +4,10 @@ border: none; .str-chat__form__input-fieldset__label { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-tight); - color: var(--text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__text-primary); } .str-chat__form__input-fieldset__values { diff --git a/src/components/Gallery/styling/Gallery.scss b/src/components/Gallery/styling/Gallery.scss index ced7c1cee..05deb742d 100644 --- a/src/components/Gallery/styling/Gallery.scss +++ b/src/components/Gallery/styling/Gallery.scss @@ -22,7 +22,7 @@ } .str-chat__gallery { - --str-chat__gallery-foreground: var(--text-on-accent); + --str-chat__gallery-foreground: var(--str-chat__text-on-accent); --str-chat__gallery-nav-border: none; --str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92); --str-chat__gallery-nav-color: #101828; @@ -43,16 +43,16 @@ } &.str-chat__modal.str-chat__gallery-modal { - --str-chat__modal-overlay-color: var(--background-core-scrim); + --str-chat__modal-overlay-color: var(--str-chat__background-core-scrim); --str-chat__modal-overlay-backdrop-filter: none; } .str-chat__gallery__header { - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); pointer-events: none; width: 100%; } @@ -85,7 +85,7 @@ display: inline-flex; align-items: center; justify-self: end; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); pointer-events: auto; } @@ -97,7 +97,7 @@ width: 2rem; height: 2rem; padding: 0; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); border: 0; background-color: transparent; color: rgba(255, 255, 255, 0.88); @@ -126,8 +126,8 @@ } .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } @@ -154,7 +154,7 @@ width: 100%; height: 100%; min-height: 0; - padding: var(--size-64); + padding: var(--str-chat__size-64); box-sizing: border-box; overflow: hidden; touch-action: pan-y pinch-zoom; @@ -215,7 +215,7 @@ height: 2rem; padding: 0; border: var(--str-chat__gallery-nav-border); - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); background-color: var(--str-chat__gallery-nav-background); color: var(--str-chat__gallery-nav-color); box-shadow: var(--str-chat__gallery-nav-box-shadow); @@ -250,11 +250,11 @@ } .str-chat__gallery__nav-button--prev { - inset-inline-start: var(--spacing-sm); + inset-inline-start: var(--str-chat__spacing-sm); } .str-chat__gallery__nav-button--next { - inset-inline-end: var(--spacing-sm); + inset-inline-end: var(--str-chat__spacing-sm); } .str-chat__gallery__position-indicator { @@ -267,7 +267,7 @@ display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); } .str-chat__gallery__loading { @@ -278,11 +278,11 @@ .str-chat__gallery__error { @include utils.flex-col-center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); width: 100%; height: 100%; - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); } &.str-chat__theme-dark { @@ -297,7 +297,7 @@ @media only screen and (max-device-width: 768px) { .str-chat__gallery__header { - inset: var(--spacing-xs) var(--spacing-xs) auto; + inset: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs) auto; } .str-chat__gallery__nav-button { diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss index cfd00ce8c..1b3493319 100644 --- a/src/components/Loading/styling/LoadingChannels.scss +++ b/src/components/Loading/styling/LoadingChannels.scss @@ -1,10 +1,10 @@ @mixin channel-list-item-shimmer { - background-color: var(--background-core-surface-default); + background-color: var(--str-chat__background-core-surface-default); background-image: linear-gradient( 90deg, - var(--skeleton-loading-base) 0%, - var(--skeleton-loading-highlight) 50%, - var(--skeleton-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -38,14 +38,14 @@ .str-chat__loading-channels-avatar { flex-shrink: 0; - width: var(--size-48); - height: var(--size-48); + width: var(--str-chat__size-48); + height: var(--str-chat__size-48); border-radius: 50%; } .str-chat__loading-channels-username, .str-chat__loading-channels-status { - height: var(--size-20); + height: var(--str-chat__size-20); border-radius: 999px; -webkit-mask-image: linear-gradient( 90deg, diff --git a/src/components/Location/styling/ShareLocationDialog.scss b/src/components/Location/styling/ShareLocationDialog.scss index 9239a45c7..091a5870d 100644 --- a/src/components/Location/styling/ShareLocationDialog.scss +++ b/src/components/Location/styling/ShareLocationDialog.scss @@ -20,7 +20,7 @@ $duration-selector-min-width: 120px; &.str-chat__live-location-activation--expanded { .str-chat__form__switch-field { - padding-bottom: var(--spacing-xxs); + padding-bottom: var(--str-chat__spacing-xxs); } } @@ -30,13 +30,13 @@ $duration-selector-min-width: 120px; } .str-chat__live-location-sharing-duration-selector { - padding-inline: calc(var(--spacing-md) - var(--spacing-xs)); - padding-bottom: var(--spacing-xs); + padding-inline: calc(var(--str-chat__spacing-md) - var(--str-chat__spacing-xs)); + padding-bottom: var(--str-chat__spacing-xs); .str-chat__live-location-sharing-duration-selector__button { @include utils.button-reset; align-items: center; background: transparent; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); color: inherit; cursor: pointer; display: flex; diff --git a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss index 405f1f63c..e07caf49a 100644 --- a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss +++ b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss @@ -6,8 +6,8 @@ justify-content: center; max-width: var(--str-chat__message-composer-max-width); width: 100%; - border-radius: var(--radius-3xl); - border: 1px solid var(--border-core-default); + border-radius: var(--str-chat__radius-3xl); + border: 1px solid var(--str-chat__border-core-default); background: var(--composer-bg); position: relative; @@ -17,17 +17,17 @@ min-width: 0; display: flex; align-items: center; - gap: var(--spacing-md); - padding: var(--spacing-xs); - padding-inline-start: var(--spacing-sm); + gap: var(--str-chat__spacing-md); + padding: var(--str-chat__spacing-xs); + padding-inline-start: var(--str-chat__spacing-sm); .str-chat__recording-timer { display: flex; align-items: center; width: 2.75rem; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__recording-timer--hours { @@ -37,15 +37,15 @@ .str-chat__audio-recorder__recording-playback--isPlaying { .str-chat__recording-timer { - color: var(--chat-waveform-bar-playing); + color: var(--str-chat__chat-waveform-bar-playing); } } .str-chat__audio-recorder__recording-preview { .str-chat__icon--voice { - height: var(--icon-size-sm); - width: var(--icon-size-sm); - color: var(--button-destructive-text); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); + color: var(--str-chat__button-destructive-text); } } @@ -53,8 +53,8 @@ .str-chat__audio_recorder__cancel-button, .str-chat__audio_recorder__toggle-recording-button { svg { - height: var(--icon-size-sm); - width: 18px; // var(18px, --icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: 18px; // var(18px, --str-chat__icon-size-sm); } } @@ -66,10 +66,10 @@ width: 32px; padding: 0; cursor: pointer; - --str-chat-icon-color: var(--text-on-accent); - border-radius: var(--radius-max); - color: var(--text-on-accent); - background-color: var(--accent-primary); + --str-chat-icon-color: var(--str-chat__text-on-accent); + border-radius: var(--str-chat__radius-max); + color: var(--str-chat__text-on-accent); + background-color: var(--str-chat__accent-primary); &:disabled { cursor: default; @@ -78,7 +78,7 @@ .str-chat__loading-indicator svg { linearGradient { stop:last-child { - stop-color: var(--background-core-app); + stop-color: var(--str-chat__background-core-app); } } } @@ -128,7 +128,7 @@ } .str-chat__wave-progress-bar__track-container { - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); .str-chat__wave-progress-bar__track { flex: 1 1 auto; @@ -137,7 +137,7 @@ .str-chat__audio_recorder__recording-controls { display: flex; - gap: var(--spacing-xs); - padding: 0 var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: 0 var(--str-chat__spacing-xs); } } diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index fd6895f95..4eadb9a1e 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -1,11 +1,11 @@ @use '../../../styling/utils'; $message-active-background-color: transparent; -$message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); +$message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1); .str-chat { /* The width/height of the message options button(s) */ - --str-chat__message-options-button-size: var(--size-32); + --str-chat__message-options-button-size: var(--str-chat__size-32); /* The maximum allowed width of the message component */ --str-chat__message-max-width: 400px; /* The maximum allowed width of the message component, if it has attachments */ @@ -13,47 +13,47 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .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); + --chat-bg: var(--str-chat__chat-bg-outgoing); + --chat-bg-attachment: var(--str-chat__chat-bg-attachment-outgoing); + --chat-text: var(--str-chat__chat-text-outgoing); + --chat-border: var(--str-chat__chat-border-outgoing); + --chat-border-on-chat: var(--str-chat__chat-border-on-chat-outgoing); + --chat-reply-indicator: var(--str-chat__chat-reply-indicator-outgoing); + --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-outgoing); + --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-outgoing); + --chat-thread-connector: var(--str-chat__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); + --chat-bg: var(--str-chat__chat-bg-incoming); + --chat-bg-attachment: var(--str-chat__chat-bg-attachment-incoming); + --chat-text: var(--str-chat__chat-text-incoming); + --chat-border: var(--str-chat__chat-border-incoming); + --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming); + --chat-reply-indicator: var(--str-chat__chat-reply-indicator-incoming); + --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-incoming); + --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-incoming); + --chat-thread-connector: var(--str-chat__chat-thread-connector-incoming); } } } /* Make spaces between message groups */ .str-chat__li--top { - padding-block-start: var(--spacing-xs); - padding-block-end: var(--spacing-xxxs); + padding-block-start: var(--str-chat__spacing-xs); + padding-block-end: var(--str-chat__spacing-xxxs); } .str-chat__li--bottom { - padding-block-start: var(--spacing-xxxs); - padding-block-end: var(--spacing-xs); + padding-block-start: var(--str-chat__spacing-xxxs); + padding-block-end: var(--str-chat__spacing-xs); } .str-chat__li--middle { - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); } .str-chat__li--single { - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); } .str-chat__message { @@ -69,8 +69,8 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); max-width: var(--str-chat__message-max-width); display: flex; flex-direction: column; - gap: var(--spacing-xs); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs); } .str-chat__message-options { @@ -79,7 +79,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); a { text-decoration: none; - color: var(--chat-text-link); + color: var(--str-chat__chat-text-link); } } @@ -151,7 +151,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__message-mention { font: var(--str-chat__font-body-emphasis); - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } .str-chat__message { @@ -159,7 +159,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); color: var(--str-chat__message-color, var(--chat-text)); @mixin chat-bubble-spacing { - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); p { white-space: pre-line; @@ -218,22 +218,22 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__message-pin-indicator { grid-area: pin-indicator; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); .str-chat__message-pin-indicator__content { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); font: var(--str-chat__font-metadata-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__message-pin-indicator__icon { display: flex; align-items: center; .str-chat__icon { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); path { stroke-width: 2px; @@ -254,7 +254,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); } &.str-chat__message--other { - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); justify-items: flex-start; &.str-chat__message--with-avatar { @@ -297,7 +297,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); } &.str-chat__message--me { - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); justify-items: flex-end; &.str-chat__message--with-avatar { @@ -359,7 +359,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); 'message-bubble options' 'replies replies'; grid-template-columns: auto 1fr; - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); position: relative; .str-chat__message-reactions-host { @@ -367,11 +367,11 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); grid-area: reactions; &:has(.str-chat__message-reactions--top) { - margin-bottom: calc(var(--spacing-xxs) * -1); + margin-bottom: calc(var(--str-chat__spacing-xxs) * -1); } &:has(.str-chat__message-reactions--bottom) { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); } } @@ -388,7 +388,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); grid-area: message-bubble; position: relative; min-width: 0; - border-radius: var(--message-bubble-radius-group-bottom); + border-radius: var(--str-chat__message-bubble-radius-group-bottom); color: var(--str-chat__message-bubble-color, inherit); background-color: var(--str-chat__message-bubble-background-color, var(--chat-bg)); overflow: hidden; @@ -437,10 +437,10 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); grid-area: metadata; display: flex; flex-wrap: wrap; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-items: center; - height: var(--size-24); - color: var(--chat-text-timestamp); + height: var(--str-chat__size-24); + color: var(--str-chat__chat-text-timestamp); * { font: var(--str-chat__font-metadata-default); @@ -448,11 +448,11 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__message-metadata__name { @include utils.prevent-glitch-text-overflow; - margin-inline-end: var(--spacing-xxs); + margin-inline-end: var(--str-chat__spacing-xxs); } .str-chat__message-edited-indicator { - margin-inline-start: var(--spacing-xs); + margin-inline-start: var(--str-chat__spacing-xs); } } @@ -463,12 +463,12 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__message--blocked-inner { @include chat-bubble-spacing; - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); 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); + padding-block: var(--str-chat__spacing-xs); } .str-chat__message-error-indicator { @@ -481,13 +481,13 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); &.str-chat__message--deleted { .str-chat__message-bubble { - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); .str-chat__message-text { display: flex; align-items: center; padding: 0; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } } } @@ -506,7 +506,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__message--highlighted { transition: background-color 0.1s ease-out; - background-color: var(--background-core-highlight); + background-color: var(--str-chat__background-core-highlight); } .str-chat__li:has(.str-chat__message--pinned) { @@ -518,7 +518,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); position: absolute; inset-block: 0; inset-inline: -9999px; - background-color: var(--background-core-highlight); + background-color: var(--str-chat__background-core-highlight); z-index: -1; pointer-events: none; } @@ -527,7 +527,7 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); /* Fallback for browsers without :has() support */ @supports not selector(:has(a, b)) { .str-chat__message--pinned { - background-color: var(--background-core-highlight); + background-color: var(--str-chat__background-core-highlight); } } @@ -610,13 +610,13 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__li--bottom { .str-chat__message--other { .str-chat__message-bubble { - border-end-start-radius: var(--message-bubble-radius-tail); + border-end-start-radius: var(--str-chat__message-bubble-radius-tail); } } .str-chat__message--me { .str-chat__message-bubble { - border-end-end-radius: var(--message-bubble-radius-tail); + border-end-end-radius: var(--str-chat__message-bubble-radius-tail); } } } @@ -624,20 +624,20 @@ $message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); .str-chat__li--top, .str-chat__li--middle { .str-chat__message-bubble { - border-radius: var(--message-bubble-radius-group-middle); + border-radius: var(--str-chat__message-bubble-radius-group-middle); } } .str-chat__message-with-thread-link { &.str-chat__message--other { .str-chat__message-bubble { - border-end-start-radius: calc(var(--radius-md) / 6); + border-end-start-radius: calc(var(--str-chat__radius-md) / 6); } } &.str-chat__message--me { .str-chat__message-bubble { - border-end-end-radius: calc(var(--radius-md) / 6); + border-end-end-radius: calc(var(--str-chat__radius-md) / 6); } } } diff --git a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss index 4a696d388..53188698a 100644 --- a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss +++ b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss @@ -3,16 +3,16 @@ .str-chat__message-also-sent-in-channel { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: also-sent-in-channel; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { - height: var(--spacing-sm); - width: var(--spacing-sm); + height: var(--str-chat__spacing-sm); + width: var(--str-chat__spacing-sm); path { stroke-width: 2px; @@ -23,6 +23,6 @@ @include utils.button-reset; cursor: pointer; font: var(--str-chat__font-metadata-default); - color: var(--text-link); + color: var(--str-chat__text-link); } } diff --git a/src/components/Message/styling/MessageRepliesCountButton.scss b/src/components/Message/styling/MessageRepliesCountButton.scss index 885197d8a..f3bc4517f 100644 --- a/src/components/Message/styling/MessageRepliesCountButton.scss +++ b/src/components/Message/styling/MessageRepliesCountButton.scss @@ -8,9 +8,9 @@ --replies-button-connector-stroke-width: 1px; display: flex; - padding-block-start: var(--spacing-xxs); - padding-block-end: var(--spacing-xxs); - margin-block-start: var(--spacing-xxs); + padding-block-start: var(--str-chat__spacing-xxs); + padding-block-end: var(--str-chat__spacing-xxs); + margin-block-start: var(--str-chat__spacing-xxs); position: relative; @@ -29,13 +29,13 @@ cursor: pointer; - border-radius: var(--radius-max); - gap: var(--spacing-xs); + border-radius: var(--str-chat__radius-max); + gap: var(--str-chat__spacing-xs); display: flex; flex-direction: row; align-items: center; - color: var(--text-link); + color: var(--str-chat__text-link); font: var(--str-chat__font-heading-xs); } } @@ -49,10 +49,10 @@ flex-direction: row; } - padding-inline-end: var(--spacing-xl); + padding-inline-end: var(--str-chat__spacing-xl); &::after { - border-end-end-radius: var(--radius-max); + border-end-end-radius: var(--str-chat__radius-max); border-inline-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid @@ -71,10 +71,10 @@ flex-direction: row-reverse; } - padding-inline-start: var(--spacing-xl); + padding-inline-start: var(--str-chat__spacing-xl); &::after { - border-end-start-radius: var(--radius-max); + border-end-start-radius: var(--str-chat__radius-max); border-inline-start: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid diff --git a/src/components/Message/styling/MessageStatus.scss b/src/components/Message/styling/MessageStatus.scss index 7c232082d..977c9065f 100644 --- a/src/components/Message/styling/MessageStatus.scss +++ b/src/components/Message/styling/MessageStatus.scss @@ -3,15 +3,15 @@ display: flex; align-items: center; justify-content: center; - column-gap: var(--space-2); + column-gap: var(--str-chat__space-2); position: relative; - color: var(--chat-text-timestamp); + color: var(--str-chat__chat-text-timestamp); svg { height: 16px; width: 16px; &.str-chat__message-status-read { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } } } diff --git a/src/components/Message/styling/MessageSystem.scss b/src/components/Message/styling/MessageSystem.scss index 08e41658c..3a5017772 100644 --- a/src/components/Message/styling/MessageSystem.scss +++ b/src/components/Message/styling/MessageSystem.scss @@ -1,19 +1,19 @@ .str-chat__message--system { display: flex; - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); width: 100%; justify-content: center; .str-chat__message--system__text { display: flex; max-width: 338px; - padding: var(--spacing-xs) var(--spacing-sm); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); justify-content: center; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--radius-xl); - border: 1px solid var(--border-core-subtle); - background: var(--background-core-surface-subtle); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-xl); + border: 1px solid var(--str-chat__border-core-subtle); + background: var(--str-chat__background-core-surface-subtle); font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/Message/styling/MessageTranslationIndicator.scss b/src/components/Message/styling/MessageTranslationIndicator.scss index 2f87a7a45..229a291c2 100644 --- a/src/components/Message/styling/MessageTranslationIndicator.scss +++ b/src/components/Message/styling/MessageTranslationIndicator.scss @@ -3,11 +3,11 @@ display: flex; align-items: center; grid-area: translation-indicator; - padding-block: var(--spacing-xxs); - gap: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); + gap: var(--str-chat__spacing-xxs); margin: 0; background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); &, .str-chat__message-translation-indicator__translation-toggle { diff --git a/src/components/Message/styling/QuotedMessage.scss b/src/components/Message/styling/QuotedMessage.scss index 72068698f..2d0c83cc8 100644 --- a/src/components/Message/styling/QuotedMessage.scss +++ b/src/components/Message/styling/QuotedMessage.scss @@ -7,7 +7,9 @@ .str-chat__quoted-message-preview { background-color: var(--chat-bg-attachment); width: calc( - var(--str-chat__message-with-attachment-max-width) - calc(2 * var(--spacing-xs)) + var(--str-chat__message-with-attachment-max-width) - calc( + 2 * var(--str-chat__spacing-xs) + ) ); max-width: 100%; min-width: 0; diff --git a/src/components/Message/styling/ReminderNotification.scss b/src/components/Message/styling/ReminderNotification.scss index 057f670f2..58f338226 100644 --- a/src/components/Message/styling/ReminderNotification.scss +++ b/src/components/Message/styling/ReminderNotification.scss @@ -2,20 +2,20 @@ .str-chat__message-saved-for-later { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: message-saved-for-later; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); margin: 0; background: transparent; - color: var(--accent-primary); + color: var(--str-chat__accent-primary); font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); path { - stroke-width: var(--icon-stroke-emphasis); + stroke-width: var(--str-chat__icon-stroke-emphasis); } } } @@ -24,17 +24,17 @@ .str-chat__message-reminder { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: message-reminder; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); margin: 0; background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { path { - stroke-width: var(--icon-stroke-default); + stroke-width: var(--str-chat__icon-stroke-default); } } diff --git a/src/components/MessageBounce/styling/MessageBouncePrompt.scss b/src/components/MessageBounce/styling/MessageBouncePrompt.scss index d8ce696cc..3cd3652dc 100644 --- a/src/components/MessageBounce/styling/MessageBouncePrompt.scss +++ b/src/components/MessageBounce/styling/MessageBouncePrompt.scss @@ -2,6 +2,6 @@ max-width: 300px; .str-chat__alert-header svg.str-chat__icon--exclamation-mark { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } } diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index 32e273eea..35b983461 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -3,27 +3,33 @@ $attachment-preview-row-height: 72px; .str-chat { - --str-chat__attachment-preview-close-icon-background: var(--control-remove-control-bg); - --str-chat__attachment-preview-close-icon-color: var(--control-remove-control-icon); + --str-chat__attachment-preview-close-icon-background: var( + --str-chat__control-remove-control-bg + ); + --str-chat__attachment-preview-close-icon-color: var( + --str-chat__control-remove-control-icon + ); --str-chat__attachment-preview-close-icon-border-color: var( - --control-remove-control-border + --str-chat__control-remove-control-border ); - --str-chat__attachment-preview-retry-icon-color: var(--accent-primary); - --str-chat__attachment-preview-download-icon-color: var(--text-secondary); + --str-chat__attachment-preview-retry-icon-color: var(--str-chat__accent-primary); + --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-secondary); --str-chat__attachment-preview-overlay-color: var(--background-core-overlay); /* React-specific preview variants (classes diverged from v2 theme) */ --str-chat__attachment-preview-media-video-indicator-background-color: var( --chat-bg-typing-indicator ); - --str-chat__attachment-preview-media-video-indicator-color: var(--badge-text); - --str-chat__attachment-preview-media-video-indicator-border-radius: var(--radius-max); + --str-chat__attachment-preview-media-video-indicator-color: var(--str-chat__badge-text); + --str-chat__attachment-preview-media-video-indicator-border-radius: var( + --str-chat__radius-max + ); --str-chat__attachment-preview-media-overlay-hover-background-color: var( - --background-utility-hover + --str-chat__background-utility-hover ); --str-chat__attachment-preview-media-overlay-pressed-background-color: var( - --background-utility-pressed + --str-chat__background-utility-pressed ); --str-chat__attachment-preview-media-upload-error-overlay-background-color: var( @@ -34,7 +40,7 @@ $attachment-preview-row-height: 72px; display: flex; align-items: center; width: 100%; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); min-width: 0; .str-chat__attachment-preview-audio { @@ -50,8 +56,8 @@ $attachment-preview-row-height: 72px; .str-chat__attachment-preview-list { background: transparent; - color: var(--text-primary); - padding: var(--spacing-xxs); + color: var(--str-chat__text-primary); + padding: var(--str-chat__spacing-xxs); display: flex; align-items: flex-start; align-content: flex-start; @@ -65,7 +71,7 @@ $attachment-preview-row-height: 72px; overflow-x: hidden; overflow-y: auto; flex: 0 1 auto; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); } .str-chat__attachment-preview-audio, @@ -73,22 +79,22 @@ $attachment-preview-row-height: 72px; .str-chat__attachment-preview-voice-recording, .str-chat__attachment-preview-unsupported { background: transparent; - color: var(--text-primary); - border-radius: var(--radius-lg); - border: 1px solid var(--border-core-default); + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__radius-lg); + border: 1px solid var(--str-chat__border-core-default); display: flex; align-items: center; flex: 0 1 auto; - gap: var(--spacing-sm); - padding: var(--spacing-md); - padding-inline-end: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); + padding: var(--str-chat__spacing-md); + padding-inline-end: var(--str-chat__spacing-sm); width: 290px; height: $attachment-preview-row-height; } .str-chat__attachment-preview-audio { .str-chat__attachment-preview-file__data { - padding-inline-end: var(--spacing-xs); + padding-inline-end: var(--str-chat__spacing-xs); } } @@ -105,16 +111,19 @@ $attachment-preview-row-height: 72px; .str-chat__attachment-preview-media { background: transparent; - color: var(--text-primary); - border-radius: var(--message-bubble-radius-attachment); - border: 1px solid var(--border-core-default); + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__message-bubble-radius-attachment); + border: 1px solid var(--str-chat__border-core-default); flex: 0 0 auto; width: $attachment-preview-row-height; height: $attachment-preview-row-height; cursor: pointer; .str-chat__attachment-preview-media__thumbnail-wrapper { - border-radius: max(0px, calc(var(--message-bubble-radius-attachment) - 1px)); + border-radius: max( + 0px, + calc(var(--str-chat__message-bubble-radius-attachment) - 1px) + ); overflow: hidden; height: 100%; width: 100%; @@ -134,7 +143,7 @@ $attachment-preview-row-height: 72px; position: absolute; inset: 0; overflow: hidden; - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); &:hover { @include utils.overlay-after( @@ -156,27 +165,27 @@ $attachment-preview-row-height: 72px; .str-chat__loading-indicator, .str-chat__progress-indicator { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); position: absolute; - inset-inline-start: var(--spacing-xxs); - bottom: var(--spacing-xxs); - border-radius: var(--radius-max); - background: var(--background-core-elevation-0); - color: var(--accent-primary); + inset-inline-start: var(--str-chat__spacing-xxs); + bottom: var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__background-core-elevation-0); + color: var(--str-chat__accent-primary); } .str-chat__icon--exclamation { - padding: var(--spacing-xxxs); - width: var(--icon-size-sm); - height: var(--icon-size-sm); + padding: var(--str-chat__spacing-xxxs); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); position: absolute; - inset-inline-start: var(--spacing-xxs); - bottom: var(--spacing-xxs); - border: 2px solid var(--badge-border); - border-radius: var(--radius-max); - background: var(--badge-bg-error); - color: var(--badge-text-on-accent); + inset-inline-start: var(--str-chat__spacing-xxs); + bottom: var(--str-chat__spacing-xxs); + border: 2px solid var(--str-chat__badge-border); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-error); + color: var(--str-chat__badge-text-on-accent); } } @@ -190,7 +199,11 @@ $attachment-preview-row-height: 72px; .str-chat__attachment-preview-media--uploading { .str-chat__attachment-preview-media__overlay { - background: linear-gradient(180deg, var(--base-white) 0%, var(--slate-100) 100%); + background: linear-gradient( + 180deg, + var(--str-chat__base-white) 0%, + var(--str-chat__slate-100) 100% + ); } } @@ -206,14 +219,14 @@ $attachment-preview-row-height: 72px; flex-direction: column; align-items: flex-start; justify-content: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__attachment-preview-file-name { @include utils.ellipsis-text; max-width: 100%; - font-weight: var(--typography-font-weight-semi-bold); - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-tight); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__attachment-preview-file__data { @@ -221,50 +234,50 @@ $attachment-preview-row-height: 72px; align-items: center; width: min(160px, 100%); max-width: 100%; - gap: var(--spacing-xxs); - color: var(--text-secondary); - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); + gap: var(--str-chat__spacing-xxs); + color: var(--str-chat__text-secondary); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__loading-indicator, .str-chat__progress-indicator { - width: var(--icon-size-sm); - height: var(--icon-size-sm); - color: var(--accent-primary); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); + color: var(--str-chat__accent-primary); } .str-chat__attachment-preview-file__fatal-error { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); color: var(--color-accent-error); } .str-chat__attachment-preview-file__retriable-error { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); white-space: nowrap; .str-chat__icon--exclamation-triangle path { - fill: var(--accent-error); + fill: var(--str-chat__accent-error); } .str-chat__attachment-preview-file__retry-upload-button { @include utils.button-reset; padding: 0; - color: var(--text-link); + color: var(--str-chat__text-link); cursor: pointer; - line-height: var(--typography-line-height-tight, 16px); + line-height: var(--str-chat__typography-line-height-tight, 16px); } } } } .str-chat__button-play { - height: var(--button-visual-height-md); - width: var(--button-visual-height-md); + height: var(--str-chat__button-visual-height-md); + width: var(--str-chat__button-visual-height-md); border: 1px solid var(--control-play-control-border); } } diff --git a/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss b/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss index cd9b7f54f..a79d12958 100644 --- a/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss +++ b/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss @@ -2,7 +2,7 @@ .str-chat__location-preview-image, .str-chat__link-preview-card .str-chat__image-placeholder, .str-chat__attachment-preview__thumbnail { - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); overflow: hidden; width: 40px; height: 40px; diff --git a/src/components/MessageComposer/styling/AttachmentSelector.scss b/src/components/MessageComposer/styling/AttachmentSelector.scss index 26afb3935..ee3097d9d 100644 --- a/src/components/MessageComposer/styling/AttachmentSelector.scss +++ b/src/components/MessageComposer/styling/AttachmentSelector.scss @@ -1,17 +1,21 @@ .str-chat { // todo: find existing replacement for variable button-style-outline-text) --str-chat__attachment-selector-button-icon-color: var(--button-style-outline-text); - --str-chat__attachment-selector-button-icon-color-hover: var(--text-secondary); - --str-chat__attachment-selector-actions-menu-button-icon-color: var(--text-secondary); + --str-chat__attachment-selector-button-icon-color-hover: var( + --str-chat__text-secondary + ); + --str-chat__attachment-selector-actions-menu-button-icon-color: var( + --str-chat__text-secondary + ); --str-chat__attachment-selector-actions-menu-button-icon-color-active: var( - --text-secondary + --str-chat__text-secondary ); .str-chat__attachment-selector { .str-chat__attachment-selector__menu-button { .str-chat__attachment-selector__menu-button__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); color: var(--str-chat__attachment-selector-button-icon-color); } @@ -48,7 +52,7 @@ .str-chat__message-composer--floating { .str-chat__attachment-selector__menu-button { - background-color: var(--background-core-elevation-1); + background-color: var(--str-chat__background-core-elevation-1); // todo: variable exists only in Figma, not added to tokens repo box-shadow: var(--shadow-web-light-elevation-2); } diff --git a/src/components/MessageComposer/styling/CommandChip.scss b/src/components/MessageComposer/styling/CommandChip.scss index a89cb5afb..9a64add60 100644 --- a/src/components/MessageComposer/styling/CommandChip.scss +++ b/src/components/MessageComposer/styling/CommandChip.scss @@ -2,14 +2,14 @@ .str-chat__command-chip { display: flex; - padding: var(--spacing-xxs) var(--spacing-xs); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); justify-content: center; align-items: center; - gap: var(--spacing-xxs); - border-radius: var(--radius-max); + gap: var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__radius-max); - color: var(--text-on-inverse); - background-color: var(--background-core-inverse); + color: var(--str-chat__text-on-inverse); + background-color: var(--str-chat__background-core-inverse); text-transform: uppercase; font: var(--str-chat__font-metadata-emphasis); diff --git a/src/components/MessageComposer/styling/CommandsMenu.scss b/src/components/MessageComposer/styling/CommandsMenu.scss index dd57f5444..9bcbd743d 100644 --- a/src/components/MessageComposer/styling/CommandsMenu.scss +++ b/src/components/MessageComposer/styling/CommandsMenu.scss @@ -20,6 +20,6 @@ .str-chat__context-menu__header--commands:not( .str-chat__context-menu__header--submenu-commands ) { - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); } } diff --git a/src/components/MessageComposer/styling/DropzoneContainer.scss b/src/components/MessageComposer/styling/DropzoneContainer.scss index 076c1e7e3..1a26b3fc5 100644 --- a/src/components/MessageComposer/styling/DropzoneContainer.scss +++ b/src/components/MessageComposer/styling/DropzoneContainer.scss @@ -19,8 +19,8 @@ position: absolute; inset: 0; z-index: 5; - background-color: var(--background-core-overlay-light); - color: var(--text-primary); + background-color: var(--str-chat__background-core-overlay-light); + color: var(--str-chat__text-primary); backdrop-filter: blur(3.5px); font: var(--str-chat__font-heading-sm); @@ -28,7 +28,7 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-xs, 8px); + gap: var(--str-chat__spacing-xs, 8px); } svg { diff --git a/src/components/MessageComposer/styling/GeologacationPreview.scss b/src/components/MessageComposer/styling/GeologacationPreview.scss index 6ae742c5c..e6ace98eb 100644 --- a/src/components/MessageComposer/styling/GeologacationPreview.scss +++ b/src/components/MessageComposer/styling/GeologacationPreview.scss @@ -7,17 +7,17 @@ display: flex; align-items: start; justify-content: space-around; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs) var(--spacing-sm); - padding-block: var(--spacing-xs); - background-color: var(--chat-bg-outgoing); - border-radius: var(--message-bubble-radius-attachment); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); + background-color: var(--str-chat__chat-bg-outgoing); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__location-preview-image { display: flex; align-items: center; justify-content: center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); width: 40px; height: 40px; diff --git a/src/components/MessageComposer/styling/LinkPreviewList.scss b/src/components/MessageComposer/styling/LinkPreviewList.scss index 9789278c7..3165b388f 100644 --- a/src/components/MessageComposer/styling/LinkPreviewList.scss +++ b/src/components/MessageComposer/styling/LinkPreviewList.scss @@ -6,7 +6,7 @@ align-items: center; gap: 0.75rem; width: 100%; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__link-preview-card { @@ -16,11 +16,11 @@ display: flex; align-items: center; justify-content: space-around; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs) var(--spacing-sm); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); background-color: var(--chat-bg); - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__tooltip { @include utils.ellipsis-text(); @@ -51,7 +51,7 @@ .str-chat__link-preview-card__content__url { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } } } @@ -63,12 +63,12 @@ // gap: 0.25rem; // // .str-chat__link-preview-card__content-title { -// height: var(--size-16); +// height: var(--str-chat__size-16); // width: 100% // } // // .str-chat__link-preview-card__content-description { -// height: var(--size-12); +// height: var(--str-chat__size-12); // width: 100%; // } // } diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss index 0ddeeff4c..d11744c0a 100644 --- a/src/components/MessageComposer/styling/MessageComposer.scss +++ b/src/components/MessageComposer/styling/MessageComposer.scss @@ -1,6 +1,6 @@ .str-chat { --str-chat__message-composer-max-width: 1120px; - --str-chat__message-composer-padding: var(--spacing-md); + --str-chat__message-composer-padding: var(--str-chat__spacing-md); --str-chat__message-composer-command-transition-duration: 280ms; --str-chat__message-composer-command-ease: cubic-bezier(0.22, 1, 0.32, 1); @@ -34,12 +34,12 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); justify-content: center; padding: var(--str-chat__message-composer-padding); min-width: 0; - border-top: 1px solid var(--border-core-default); - background: var(--background-core-elevation-1); + border-top: 1px solid var(--str-chat__border-core-default); + background: var(--str-chat__background-core-elevation-1); } .str-chat__message-composer { @@ -47,7 +47,7 @@ align-items: end; width: 100%; max-width: var(--str-chat__message-composer-max-width); - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 0; flex-shrink: 1; transition: gap var(--str-chat__message-composer-command-transition-duration) @@ -60,11 +60,11 @@ flex-grow: 0; width: var( --str-chat__message-composer-attachment-slot-width, - calc(var(--button-visual-height-lg) + 2 * var(--spacing-xxs)) + calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs)) ); max-width: var( --str-chat__message-composer-attachment-slot-width, - calc(var(--button-visual-height-lg) + 2 * var(--spacing-xxs)) + calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs)) ); box-sizing: border-box; opacity: 1; @@ -118,9 +118,9 @@ flex: 1 1 0; min-width: 0; background: var(--composer-bg); - color: var(--input-text-default); - border-radius: var(--radius-3xl); - border: 1px solid var(--border-core-default); + color: var(--str-chat__input-text-default); + border-radius: var(--str-chat__radius-3xl); + border: 1px solid var(--str-chat__border-core-default); } .str-chat__message-composer-previews { @@ -129,8 +129,8 @@ max-height: 400px; overflow: hidden; width: 100%; - padding: var(--spacing-xs) var(--spacing-xs) 0; - gap: var(--spacing-xxs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs) 0; + gap: var(--str-chat__spacing-xxs); min-width: 0; min-height: 0; @@ -140,9 +140,9 @@ display: flex; align-items: end; width: 100%; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); padding: calc( - var(--spacing-sm) - 1px + var(--str-chat__spacing-sm) - 1px ); // compensate for the 1px border of the composer container $controls-containers-min-height: 26px; @@ -153,7 +153,7 @@ flex-direction: column; min-height: $controls-containers-min-height; justify-content: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); .str-chat__message-composer-controls__text-composition-controls__command-chip-container { height: 100%; @@ -169,7 +169,7 @@ align-items: center; width: 100%; min-width: 0; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__message-composer__actions, @@ -201,13 +201,13 @@ textarea { background: transparent; - color: var(--input-text-default); + color: var(--str-chat__input-text-default); resize: none; border: none; box-shadow: none; outline: none; width: 100%; - font-size: var(--typography-font-size-md); + font-size: var(--str-chat__typography-font-size-md); scrollbar-width: none; } } @@ -217,22 +217,22 @@ cursor: pointer; svg { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } .str-chat__start-recording-audio-button { .str-chat__icon--voice { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } .str-chat__send-button { .str-chat__icon--send { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } @@ -247,14 +247,14 @@ } .str-chat__message-composer-cooldown { - background: var(--background-utility-disabled); - color: var(--text-disabled); - border-radius: var(--button-radius-full); + background: var(--str-chat__background-utility-disabled); + color: var(--str-chat__text-disabled); + border-radius: var(--str-chat__button-radius-full); display: flex; align-items: center; justify-content: center; - height: var(--button-visual-height-md); - width: var(--button-visual-height-md); + height: var(--str-chat__button-visual-height-md); + width: var(--str-chat__button-visual-height-md); } [dir='rtl'] .str-chat__send-button, @@ -290,17 +290,17 @@ // todo: need designs? what kind of action buttons to use on modals? .str-chat__recording-permission-denied-notification { max-width: 100%; - padding: var(--spacing-md); - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-tight); + padding: var(--str-chat__spacing-md); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__recording-permission-denied-notification__heading { - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__recording-permission-denied-notification__message { - margin: var(--spacing-xs) 0 0; - font-weight: var(--typography-font-weight-regular, 400); + margin: var(--str-chat__spacing-xs) 0 0; + font-weight: var(--str-chat__typography-font-weight-regular, 400); } } } diff --git a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss index 25382c1c4..0856af481 100644 --- a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss +++ b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss @@ -1,10 +1,13 @@ .str-chat__quoted-message-indicator { - background-color: var(--chat-reply-indicator, var(--chat-reply-indicator-incoming)); - border-radius: var(--radius-max); + background-color: var( + --chat-reply-indicator, + var(--str-chat__chat-reply-indicator-incoming) + ); + border-radius: var(--str-chat__radius-max); height: 100%; width: 2px; } .str-chat__quoted-message-indicator--own-message { - background-color: var(--chat-reply-indicator-outgoing); + background-color: var(--str-chat__chat-reply-indicator-outgoing); } diff --git a/src/components/MessageComposer/styling/QuotedMessagePreview.scss b/src/components/MessageComposer/styling/QuotedMessagePreview.scss index 977dc1786..243a5d012 100644 --- a/src/components/MessageComposer/styling/QuotedMessagePreview.scss +++ b/src/components/MessageComposer/styling/QuotedMessagePreview.scss @@ -2,17 +2,17 @@ .str-chat { .str-chat__message-composer__quoted-message-preview-slot { - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__quoted-message-preview { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); position: relative; - background-color: var(--chat-bg-incoming); - padding: var(--spacing-xs); - border-radius: var(--message-bubble-radius-attachment); + background-color: var(--str-chat__chat-bg-incoming); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__quoted-message-indicator { height: 36px; @@ -24,25 +24,25 @@ justify-content: center; flex: 1; min-width: 0; - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); height: 40px; // to keep the same height even though the image preview is missing (it has 40px height) .str-chat__quoted-message-preview__author { @include utils.ellipsis-text(); overflow-x: hidden; // force ellipsis to show - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__quoted-message-preview__message { //@include utils.ellipsis-text-parent; display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); svg { - height: var(--typography-font-size-xs); - width: var(--typography-font-size-xs); + height: var(--str-chat__typography-font-size-xs); + width: var(--str-chat__typography-font-size-xs); } .str-chat__icon--voice path { @@ -57,7 +57,7 @@ // we do not want links to be blue etc. * { white-space: nowrap; - color: var(--chat-text-incoming); + color: var(--str-chat__chat-text-incoming); } } } @@ -85,7 +85,7 @@ position: absolute; inset-inline-start: 10px; top: 10px; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); background-color: var(--control-play-control-bg); .str-chat__icon--play-fill { @@ -101,6 +101,6 @@ } .str-chat__quoted-message-preview--own { - background-color: var(--chat-bg-outgoing); + background-color: var(--str-chat__chat-bg-outgoing); } } diff --git a/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss b/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss index 397e9b832..d40d74029 100644 --- a/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss +++ b/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss @@ -6,5 +6,5 @@ background-color: var(--str-chat__attachment-preview-close-icon-background); border: 3px solid var(--str-chat__attachment-preview-close-icon-border-color); color: var(--str-chat__attachment-preview-close-icon-color); - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); } diff --git a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss index 1d3f9266e..a9e581381 100644 --- a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss +++ b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss @@ -3,17 +3,17 @@ display: flex; align-items: flex-start; max-width: var(--str-chat__message-composer-max-width); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); &.str-chat__send-to-channel-checkbox__container--checked { - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__send-to-channel-checkbox__field { position: relative; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); cursor: pointer; /* Visually hide the native checkbox; it stays focusable and clickable for a11y */ @@ -36,8 +36,8 @@ .str-chat__send-to-channel-checkbox__visual { width: 20px; height: 20px; - border: 1px solid var(--control-checkbox-border, #d5dbe1); - border-radius: var(--radius-sm); + border: 1px solid var(--str-chat__control-checkbox-border, #d5dbe1); + border-radius: var(--str-chat__radius-sm); display: flex; align-items: center; justify-content: center; @@ -49,12 +49,18 @@ .str-chat__send-to-channel-checkbox__input:checked + .str-chat__send-to-channel-checkbox__visual { - background-color: var(--control-radiocheck-bg-selected, var(--accent-primary)); - border-color: var(--control-radiocheck-bg-selected, var(--accent-primary)); + background-color: var( + --control-radiocheck-bg-selected, + var(--str-chat__accent-primary) + ); + border-color: var( + --control-radiocheck-bg-selected, + var(--str-chat__accent-primary) + ); } .str-chat__send-to-channel-checkbox__checkmark { - color: var(--control-checkbox-icon); + color: var(--str-chat__control-checkbox-icon); opacity: 0; display: flex; align-items: center; diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss index e8acf0e37..36dc58d43 100644 --- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss +++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss @@ -3,19 +3,21 @@ .str-chat__attachment-preview-unsupported { background: transparent; - color: var(--text-primary); + color: var(--str-chat__text-primary); border-radius: calc( - var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin) + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) ); display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); - column-gap: var(--spacing-xs); + padding: var(--str-chat__spacing-md); + column-gap: var(--str-chat__spacing-xs); .str-chat__icon { - height: var(--size-20); - width: var(--size-20); + height: var(--str-chat__size-20); + width: var(--str-chat__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 107e2f023..c4f8c6c4f 100644 --- a/src/components/MessageList/styling/MessageList.scss +++ b/src/components/MessageList/styling/MessageList.scss @@ -20,6 +20,7 @@ .str-chat__message-list { overflow-y: auto; + overflow-x: hidden; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; display: flex; @@ -29,8 +30,8 @@ width: 100%; height: 100%; max-height: 100%; - background: var(--background-core-app); - color: var(--text-primary); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); .str-chat__message-list-scroll { @include utils.message-list-spacing; diff --git a/src/components/MessageList/styling/NewMessageNotification.scss b/src/components/MessageList/styling/NewMessageNotification.scss index bd4ffa968..f61ea1f65 100644 --- a/src/components/MessageList/styling/NewMessageNotification.scss +++ b/src/components/MessageList/styling/NewMessageNotification.scss @@ -11,10 +11,10 @@ display: flex; align-items: center; justify-content: center; - padding: var(--spacing-xxs) var(--spacing-sm); - background-color: var(--background-core-surface-subtle); - border-radius: var(--radius-max); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); + background-color: var(--str-chat__background-core-surface-subtle); + border-radius: var(--str-chat__radius-max); font: var(--str-chat__font-metadata-emphasis); - color: var(--chat-text-system); + color: var(--str-chat__chat-text-system); } } diff --git a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss index bcc57ad1a..da8c5304f 100644 --- a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss +++ b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss @@ -2,14 +2,17 @@ height: 40px; width: 40px; position: absolute; - inset-block-end: var(--spacing-md); + inset-block-end: var(--str-chat__spacing-md); inset-inline-end: max( - var(--spacing-md), - calc((100% - var(--str-chat__message-list-scroll-max-width)) / 2 + var(--spacing-md)) + var(--str-chat__spacing-md), + calc( + (100% - var(--str-chat__message-list-scroll-max-width)) / 2 + + var(--str-chat__spacing-md) + ) ); z-index: 2; - border-radius: var(--radius-max); - background-color: var(--background-core-elevation-1); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__background-core-elevation-1); // todo - we ned to have the shadows in variables that are supported in light and dark mode too box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -25,7 +28,7 @@ .str-chat__jump-to-latest__unread-count { position: absolute; inset-block-end: 100%; - margin-block-end: var(--space-4); + margin-block-end: var(--str-chat__space-4); inset-inline-end: -15%; top: -15%; } diff --git a/src/components/MessageList/styling/UnreadMessageNotification.scss b/src/components/MessageList/styling/UnreadMessageNotification.scss index 90dff26c1..6249a3f25 100644 --- a/src/components/MessageList/styling/UnreadMessageNotification.scss +++ b/src/components/MessageList/styling/UnreadMessageNotification.scss @@ -2,9 +2,9 @@ .str-chat__unread-messages-notification { display: flex; align-items: center; - background: var(--background-core-elevation-1); - border-radius: var(--button-radius-lg); - border: 1px solid var(--button-secondary-border); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__button-radius-lg); + border: 1px solid var(--str-chat__button-secondary-border); /* shadow/web/light/elevation-2 */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -27,17 +27,21 @@ button:first-of-type { display: flex; align-items: center; - gap: var(--spacing-xs); - 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); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__button-radius-lg) 0 0 + var(--str-chat__button-radius-lg); + padding: var(--str-chat__button-padding-y-md) var(--str-chat__spacing-xxs) + var(--str-chat__button-padding-y-md) + var(--str-chat__button-padding-x-with-label-md); font: var(--str-chat__font-caption-emphasis); } button:last-of-type { - border-radius: 0 var(--button-radius-lg) var(--button-radius-lg) 0; - padding: var(--button-padding-y-md) var(--button-padding-x-with-label-md) - var(--button-padding-y-md) var(--spacing-xxs); + border-radius: 0 var(--str-chat__button-radius-lg) var(--str-chat__button-radius-lg) + 0; + padding: var(--str-chat__button-padding-y-md) + var(--str-chat__button-padding-x-with-label-md) + var(--str-chat__button-padding-y-md) var(--str-chat__spacing-xxs); svg { height: 16px; diff --git a/src/components/MessageList/styling/UnreadMessagesSeparator.scss b/src/components/MessageList/styling/UnreadMessagesSeparator.scss index a14594b2d..81b19a64e 100644 --- a/src/components/MessageList/styling/UnreadMessagesSeparator.scss +++ b/src/components/MessageList/styling/UnreadMessagesSeparator.scss @@ -1,5 +1,5 @@ .str-chat__unread-messages-separator-wrapper { - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); display: flex; justify-content: center; @@ -7,15 +7,16 @@ display: flex; align-items: center; width: fit-content; - padding: var(--spacing-xxs) var(--spacing-xs); - background: var(--background-core-elevation-1); - border-radius: var(--button-radius-lg); - border: 1px solid var(--button-secondary-border); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__button-radius-lg); + border: 1px solid var(--str-chat__button-secondary-border); overflow: clip; .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); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__button-radius-lg) 0 0 + var(--str-chat__button-radius-lg); 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 3f0420fec..c62fa4eaa 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -2,10 +2,11 @@ .str-chat__virtual-list { overflow-y: auto; + overflow-x: hidden; scrollbar-gutter: stable both-edges; - background: var(--background-core-app); - color: var(--text-primary); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); --str-chat__message-list-scroll-max-width: calc( var(--str-chat__message-composer-max-width) + var(--str-chat__message-composer-padding) @@ -35,7 +36,7 @@ // a simple workaround is to make the loading indicator an overlay. &__loading { display: flex; - padding-top: var(--space-8); + padding-top: var(--str-chat__space-8); justify-content: center; width: 100%; position: absolute; diff --git a/src/components/Modal/styling/Modal.scss b/src/components/Modal/styling/Modal.scss index f0264f16e..b0795b7ce 100644 --- a/src/components/Modal/styling/Modal.scss +++ b/src/components/Modal/styling/Modal.scss @@ -2,16 +2,16 @@ .str-chat { /* The border radius used for the borders of the content area of the component of the content area of the component */ - --str-chat__modal-border-radius: var(--radius-xl); + --str-chat__modal-border-radius: var(--str-chat__radius-xl); /* The text/icon color of the content area of the component */ - --str-chat__modal-color: var(--text-primary); + --str-chat__modal-color: var(--str-chat__text-primary); /* The background color of the content area of the component */ - --str-chat__modal-background-color: var(--background-core-elevation-1); + --str-chat__modal-background-color: var(--str-chat__background-core-elevation-1); /* The overlay color of the component */ - --str-chat__modal-overlay-color: var(--background-core-scrim); + --str-chat__modal-overlay-color: var(--str-chat__background-core-scrim); /* The backdrop filter applied to the component */ --str-chat__modal-overlay-backdrop-filter: blur(3px); @@ -50,8 +50,8 @@ position: absolute; inset-inline-end: 10px; top: 10px; - padding: var(--spacing-xs); - color: var(--text-on-accent); + padding: var(--str-chat__spacing-xs); + color: var(--str-chat__text-on-accent); svg { height: 12px; diff --git a/src/components/Notifications/styling/Notification.scss b/src/components/Notifications/styling/Notification.scss index 14d5a2a7a..aefae8dc0 100644 --- a/src/components/Notifications/styling/Notification.scss +++ b/src/components/Notifications/styling/Notification.scss @@ -1,26 +1,29 @@ .str-chat__notification { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-height: 48px; max-width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); position: relative; pointer-events: visible; - background: var(--str-chat__notification-background, var(--background-core-inverse)); - border-radius: var(--str-chat__notification-border-radius, var(--radius-3xl)); + background: var( + --str-chat__notification-background, + var(--str-chat__background-core-inverse) + ); + border-radius: var(--str-chat__notification-border-radius, var(--str-chat__radius-3xl)); box-shadow: 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); - color: var(--str-chat__notification-color, var(--text-on-inverse)); + color: var(--str-chat__notification-color, var(--str-chat__text-on-inverse)); .str-chat__notification-content { align-items: flex-start; display: flex; flex: 1 1 auto; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xxs) var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); .str-chat__notification-icon { display: flex; @@ -28,14 +31,14 @@ height: 100%; svg { - block-size: var(--icon-size-sm); - inline-size: var(--icon-size-sm); + block-size: var(--str-chat__icon-size-sm); + inline-size: var(--str-chat__icon-size-sm); } } .str-chat__notification-message { flex: 1 1 auto; - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); font: var(--str-chat__font-caption-default); text-align: center; white-space: nowrap; @@ -47,16 +50,16 @@ flex-basis: 100%; align-items: center; justify-content: flex-end; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__notification-close-button { align-self: center; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); svg { - height: var(--icon-size-sm); - width: var(--icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); } } } @@ -93,23 +96,23 @@ //// Severity overrides: allow themes to keep colored variants; defaults match Figma (inverse). //.str-chat__notification--success { -// background: var(--str-chat-success-background, var(--background-core-inverse)); -// color: var(--str-chat-success-color, var(--text-on-inverse)); +// background: var(--str-chat-success-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-success-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--error { -// background: var(--str-chat-error-background, var(--background-core-inverse)); -// color: var(--str-chat-error-color, var(--text-on-inverse)); +// background: var(--str-chat-error-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-error-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--warning { -// background: var(--str-chat-warning-background, var(--background-core-inverse)); -// color: var(--str-chat-warning-color, var(--text-on-inverse)); +// background: var(--str-chat-warning-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-warning-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--info { -// background: var(--str-chat-info-background, var(--background-core-inverse)); -// color: var(--str-chat-info-color, var(--text-on-inverse)); +// background: var(--str-chat-info-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-info-color, var(--str-chat__text-on-inverse)); //} // Loading state: spin the refresh icon diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss index 4babc676a..f17171523 100644 --- a/src/components/Notifications/styling/NotificationList.scss +++ b/src/components/Notifications/styling/NotificationList.scss @@ -10,7 +10,7 @@ $notification-list-inset: 16px; max-width: 100%; min-width: 0; max-height: calc(100% - ($notification-list-inset * 2)); - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); pointer-events: none; position: absolute; inset-inline-end: $notification-list-inset; diff --git a/src/components/Poll/styling/OptionFieldSet.scss b/src/components/Poll/styling/OptionFieldSet.scss index 28d972c5a..ca7324117 100644 --- a/src/components/Poll/styling/OptionFieldSet.scss +++ b/src/components/Poll/styling/OptionFieldSet.scss @@ -2,7 +2,7 @@ .str-chat__form__input-field { .str-chat__form__input-field__value { .str-chat__form__remove-option-button { - color: var(--input-text-icon); + color: var(--str-chat__input-text-icon); } } } diff --git a/src/components/Poll/styling/Poll.scss b/src/components/Poll/styling/Poll.scss index bc6d66817..9fc0669c1 100644 --- a/src/components/Poll/styling/Poll.scss +++ b/src/components/Poll/styling/Poll.scss @@ -4,10 +4,12 @@ .str-chat__poll { display: flex; flex-direction: column; - gap: var(--spacing-xl); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xl); + padding: var(--str-chat__spacing-xs); width: calc( - var(--str-chat__message-with-attachment-max-width) - calc(2 * var(--spacing-xs)) + var(--str-chat__message-with-attachment-max-width) - calc( + 2 * var(--str-chat__spacing-xs) + ) ); max-width: 100%; min-width: 260px; @@ -28,13 +30,14 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } .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); + padding: var(--str-chat__button-padding-y-sm) + var(--str-chat__button-padding-x-with-label-sm); font: var(--str-chat__font-caption-emphasis); &.str-chat__poll-action--additional { diff --git a/src/components/Poll/styling/PollAnswerList.scss b/src/components/Poll/styling/PollAnswerList.scss index 512fa553b..6e9dd4b7a 100644 --- a/src/components/Poll/styling/PollAnswerList.scss +++ b/src/components/Poll/styling/PollAnswerList.scss @@ -9,14 +9,16 @@ .str-chat__infinite-scroll-paginator__content { display: flex; flex-direction: column; - gap: var(--spacing-md); - padding-bottom: var(--spacing-xl); + gap: var(--str-chat__spacing-md); + padding-bottom: var(--str-chat__spacing-xl); } } .str-chat__loading-indicator-placeholder { width: 100%; - height: calc(var(--str-chat__loading-indicator-size) + (2 * var(--spacing-xxs))); + height: calc( + var(--str-chat__loading-indicator-size) + (2 * var(--str-chat__spacing-xxs)) + ); display: flex; justify-content: center; } @@ -25,22 +27,22 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__poll-answer__data { display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-self: stretch; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); .str-chat__avatar { - height: var(--spacing-xl); - width: var(--spacing-xl); + height: var(--str-chat__spacing-xl); + width: var(--str-chat__spacing-xl); } p { @@ -52,7 +54,7 @@ } .str-chat__poll-vote { - padding-inline: var(--spacing-none); + padding-inline: var(--str-chat__spacing-none); padding-block: 0; } } @@ -61,8 +63,8 @@ display: flex; justify-content: center; width: 100%; - padding: var(--spacing-xs) var(--spacing-md); - border-top: 1px solid var(--border-core-default); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); + border-top: 1px solid var(--str-chat__border-core-default); } } } diff --git a/src/components/Poll/styling/PollCreationDialog.scss b/src/components/Poll/styling/PollCreationDialog.scss index 6fd9de80c..c8b83a487 100644 --- a/src/components/Poll/styling/PollCreationDialog.scss +++ b/src/components/Poll/styling/PollCreationDialog.scss @@ -10,14 +10,14 @@ form { display: flex; flex-direction: column; - gap: var(--spacing-xl); + gap: var(--str-chat__spacing-xl); } } .str-chat__poll-creation-dialog__features-selectors { display: flex; flex-direction: column; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); align-items: center; } @@ -42,7 +42,7 @@ .str-chat__multiple-answers-field__votes-limit-field__numeric-field { display: flex; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; .str-chat__form__switch-field__label { diff --git a/src/components/Poll/styling/PollOptionFullList.scss b/src/components/Poll/styling/PollOptionFullList.scss index c07fc8184..99862acbb 100644 --- a/src/components/Poll/styling/PollOptionFullList.scss +++ b/src/components/Poll/styling/PollOptionFullList.scss @@ -6,23 +6,23 @@ scrollbar-width: none; display: flex; flex-direction: column; - gap: var(--spacing-2xl); - padding-bottom: var(--spacing-xl); + gap: var(--str-chat__spacing-2xl); + padding-bottom: var(--str-chat__spacing-xl); .str-chat__poll-option-list--full { - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); scrollbar-width: none; - padding: var(--spacing-xs); - border-radius: var(--radius-lg); - background-color: var(--background-core-surface-card); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-lg); + background-color: var(--str-chat__background-core-surface-card); .str-chat__poll-option { - padding: var(--spacing-xs); - border-radius: var(--radius-md); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-md); } .str-chat__poll-option--votable { &:hover { - background-color: var(--background-utility-hover); + background-color: var(--str-chat__background-utility-hover); } } } diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index fb9db3510..7af07bc91 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -1,19 +1,19 @@ -$poll-checkmark-size: var(--size-24); +$poll-checkmark-size: var(--str-chat__size-24); .str-chat__poll-option-list { display: flex; flex-direction: column; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); .str-chat__poll-option { display: grid; grid-template-columns: minmax(0, auto) 1fr; grid-template-rows: 1fr auto; - row-gap: var(--spacing-xs); + row-gap: var(--str-chat__spacing-xs); align-items: start; &.str-chat__poll-option--votable { - column-gap: var(--spacing-sm); + column-gap: var(--str-chat__spacing-sm); &:hover { cursor: pointer; @@ -25,8 +25,9 @@ $poll-checkmark-size: var(--size-24); grid-row: span 2; height: $poll-checkmark-size; width: $poll-checkmark-size; - border-radius: var(--radius-max); - border: 1px solid var(--chat-border-on-chat, var(--chat-border-on-chat-incoming)); + border-radius: var(--str-chat__radius-max); + border: 1px solid + var(--chat-border-on-chat, var(--str-chat__chat-border-on-chat-incoming)); } .str-chat__checkmark--checked { @@ -34,7 +35,7 @@ $poll-checkmark-size: var(--size-24); background-repeat: no-repeat; background-position: center; background-size: 11px 10px; - background-color: var(--control-radio-check-bg-selected); + background-color: var(--str-chat__control-radio-check-bg-selected); border: none; } @@ -42,11 +43,11 @@ $poll-checkmark-size: var(--size-24); flex: 1; display: flex; align-items: baseline; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); grid-column: 2 / 3; grid-row: 1 / 2; min-height: 24px; - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); p { margin: 0; @@ -58,7 +59,7 @@ $poll-checkmark-size: var(--size-24); .str-chat__poll-option-votes { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__poll-option-voters { --str-chat__avatar-size: 1.175rem; @@ -79,12 +80,15 @@ $poll-checkmark-size: var(--size-24); width: 100%; background: linear-gradient( to right, - var(--chat-poll-progress-fill, var(--chat-poll-progress-fill-incoming)) + var(--chat-poll-progress-fill, var(--str-chat__chat-poll-progress-fill-incoming)) var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track, var(--chat-poll-progress-track-incoming)) + var( + --chat-poll-progress-track, + var(--str-chat__chat-poll-progress-track-incoming) + ) var(--str-chat__amount-bar-fulfillment) ); - border-radius: var(--size-4); + border-radius: var(--str-chat__size-4); } } } diff --git a/src/components/Poll/styling/PollQuestion.scss b/src/components/Poll/styling/PollQuestion.scss index d1d7fc7e3..f6cc0cb53 100644 --- a/src/components/Poll/styling/PollQuestion.scss +++ b/src/components/Poll/styling/PollQuestion.scss @@ -1,20 +1,20 @@ .str-chat__modal__poll-question { display: flex; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__modal__poll-question__label { font: var(--str-chat__font-heading-xs); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__modal__poll-question__text { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/Poll/styling/PollResults.scss b/src/components/Poll/styling/PollResults.scss index 740db5aa2..18c7b5a90 100644 --- a/src/components/Poll/styling/PollResults.scss +++ b/src/components/Poll/styling/PollResults.scss @@ -9,7 +9,7 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-2xl); + gap: var(--str-chat__spacing-2xl); } .str-chat__modal__poll-results__options { @@ -22,37 +22,37 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); align-self: stretch; .str-chat__poll-option { display: flex; flex-direction: column; width: 100%; - padding-block: var(--spacing-md); - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + padding-block: var(--str-chat__spacing-md); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__poll-option__header { display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - padding-inline: var(--spacing-md); + padding-inline: var(--str-chat__spacing-md); .str-chat__poll-option__header__label { font: var(--str-chat__font-heading-xs); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__poll-option__header__title { display: flex; align-items: start; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__poll-option__option-text { flex: 1; @@ -67,11 +67,11 @@ flex-direction: column; align-items: flex-start; align-self: stretch; - padding: var(--spacing-xs) var(--spacing-none); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-none); .str-chat__avatar { - height: var(--spacing-2xl); - width: var(--spacing-2xl); + height: var(--str-chat__spacing-2xl); + width: var(--str-chat__spacing-2xl); } } @@ -79,8 +79,8 @@ display: flex; justify-content: center; width: 100%; - padding: var(--spacing-xs) var(--spacing-md); - border-top: 1px solid var(--border-core-default); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); + border-top: 1px solid var(--str-chat__border-core-default); } } @@ -98,7 +98,9 @@ .str-chat__poll-option__votes-paginated-list { .str-chat__loading-indicator-placeholder { width: 100%; - height: calc(var(--str-chat__loading-indicator-size) + (2 * var(--spacing-xxs))); + height: calc( + var(--str-chat__loading-indicator-size) + (2 * var(--str-chat__spacing-xxs)) + ); display: flex; justify-content: center; } @@ -106,7 +108,7 @@ } .str-chat__modal__poll-results__options__footer { - padding-top: var(--spacing-2xl); + padding-top: var(--str-chat__spacing-2xl); .str-chat__modal__poll-results__options-total-count { width: 100%; @@ -117,13 +119,13 @@ .str-chat__poll-result-option-vote-counter { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; font: var(--str-chat__font-caption-emphasis); .str-chat__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } } @@ -134,7 +136,7 @@ scrollbar-width: none; width: 100%; height: 100%; - padding-bottom: var(--spacing-xl); + padding-bottom: var(--str-chat__spacing-xl); } } @@ -143,6 +145,6 @@ @include utils.scrollable-y; scrollbar-width: none; max-height: calc(640px - 76px); - padding-bottom: var(--spacing-2xl); + padding-bottom: var(--str-chat__spacing-2xl); } } diff --git a/src/components/Poll/styling/PollVote.scss b/src/components/Poll/styling/PollVote.scss index 11b8a1174..c35d1171a 100644 --- a/src/components/Poll/styling/PollVote.scss +++ b/src/components/Poll/styling/PollVote.scss @@ -1,8 +1,8 @@ .str-chat__poll-vote { display: flex; - padding: var(--spacing-xxs) var(--spacing-sm); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); align-items: center; - gap: var(--spacing-none, 0); + gap: var(--str-chat__spacing-none, 0); align-self: stretch; width: 100%; font: var(--str-chat__font-caption-default); @@ -11,7 +11,7 @@ flex: 1; display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); } .str-chat__poll-vote__author__name { diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss index e54961b8c..b4ff58f0d 100644 --- a/src/components/Reactions/styling/MessageReactions.scss +++ b/src/components/Reactions/styling/MessageReactions.scss @@ -9,7 +9,7 @@ padding: 0; display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__message-reactions__list-item { display: flex; @@ -26,9 +26,9 @@ .str-chat__message-reactions__list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions__total-count, diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss index 1f756e972..d426b0823 100644 --- a/src/components/Reactions/styling/MessageReactionsDetail.scss +++ b/src/components/Reactions/styling/MessageReactionsDetail.scss @@ -4,13 +4,13 @@ .str-chat { .str-chat__dialog-contents:has(.str-chat__message-reactions-detail):focus-visible { - border-radius: var(--radius-lg); + border-radius: var(--str-chat__radius-lg); } } .str-chat__message-reactions-detail { - border-radius: var(--radius-lg); - background: var(--background-core-elevation-2); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-elevation-2); max-width: 256px; min-width: min(90vw, 256px); @@ -26,38 +26,38 @@ min-width: unset; } - font-family: var(--typography-font-family-sans); + font-family: var(--str-chat__typography-font-family-sans); box-shadow: var(--str-chat__box-shadow-3); - padding-block-start: var(--spacing-xxs); + padding-block-start: var(--str-chat__spacing-xxs); display: flex; flex-direction: column; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); .str-chat__message-reactions-detail__total-count { display: flex; align-items: center; justify-content: flex-start; - padding-inline: var(--spacing-md); - min-height: var(--size-32); - max-height: var(--size-32); - - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-normal); + padding-inline: var(--str-chat__spacing-md); + min-height: var(--str-chat__size-32); + max-height: var(--str-chat__size-32); + + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__reaction-type-list { list-style: none; margin: 0; - padding-inline: var(--spacing-md); - padding-block: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-md); + padding-block: var(--str-chat__spacing-xs); display: flex; flex-wrap: wrap; - gap: var(--spacing-xs) var(--spacing-xxs); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-xxs); .str-chat__message-reactions-detail__reaction-type-list-item { display: flex; @@ -65,19 +65,19 @@ .str-chat__message-reactions-detail__reaction-type-list-item-button { @include common.reaction-button; box-shadow: unset; - min-width: var(--size-48); + min-width: var(--str-chat__size-48); background: none; - border: 1px solid var(--control-chip-border); + border: 1px solid var(--str-chat__control-chip-border); .str-chat__message-reactions-detail__reaction-type-list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } &:has(.str-chat__icon) { @@ -88,7 +88,7 @@ } .str-chat__message-reactions-detail__reaction-type-list-item-count { - color: var(--reaction-text); + color: var(--str-chat__reaction-text); font: var(--str-chat__font-metadata-emphasis); } } @@ -108,45 +108,45 @@ @include utils.scrollable-y; scrollbar-width: none; position: relative; - padding-block-end: var(--spacing-xxs); + padding-block-end: var(--str-chat__spacing-xxs); max-height: 180px; .str-chat__message-reactions-detail__skeleton-item { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs)); + gap: var(--str-chat__spacing-xs); + padding-inline: calc(var(--str-chat__spacing-sm) + var(--str-chat__spacing-xxs)); .str-chat__message-reactions-detail__skeleton-avatar { - width: var(--size-32); - height: var(--size-32); - border-radius: var(--radius-max); + width: var(--str-chat__size-32); + height: var(--str-chat__size-32); + border-radius: var(--str-chat__radius-max); @include channel-utils.channel-loading-shimmer; flex-shrink: 0; } .str-chat__message-reactions-detail__skeleton-line { flex-grow: 1; - height: var(--size-20); - border-radius: var(--radius-sm); + height: var(--str-chat__size-20); + border-radius: var(--str-chat__radius-sm); @include channel-utils.channel-loading-faded-bar; } } .str-chat__message-reactions-detail__user-list-item { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs)); - max-height: var(--size-40); + gap: var(--str-chat__spacing-xs); + padding-inline: calc(var(--str-chat__spacing-sm) + var(--str-chat__spacing-xxs)); + max-height: var(--str-chat__size-40); .str-chat__message-reactions-detail__user-list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__user-list-item-info { @@ -156,15 +156,15 @@ min-width: 0; .str-chat__message-reactions-detail__user-list-item-username { - color: var(--text-primary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + color: var(--str-chat__text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__user-list-item-button { @include utils.unset-button; - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); 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 784ad45cd..32bd011e8 100644 --- a/src/components/Reactions/styling/ReactionSelector.scss +++ b/src/components/Reactions/styling/ReactionSelector.scss @@ -3,14 +3,14 @@ .str-chat__reaction-selector { display: flex; - padding-inline-start: var(--spacing-xxs, 0); - padding-inline-end: var(--spacing-xs, 0); - padding-block: var(--spacing-xxs, 0); + padding-inline-start: var(--str-chat__spacing-xxs, 0); + padding-inline-end: var(--str-chat__spacing-xs, 0); + padding-block: var(--str-chat__spacing-xxs, 0); align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); - border-radius: var(--radius-4xl, 32px); - background: var(--background-core-elevation-2, #fff); + border-radius: var(--str-chat__radius-4xl, 32px); + background: var(--str-chat__background-core-elevation-2, #fff); box-shadow: var(--str-chat__box-shadow-3); @@ -19,7 +19,7 @@ display: block; @include utils.scrollable-y; scrollbar-width: none; - border-radius: var(--radius-lg); + border-radius: var(--str-chat__radius-lg); max-height: 320px; @include common.clipping-fade; @@ -30,17 +30,17 @@ aspect-ratio: 1/1; .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } .str-chat__reaction-selector-list { list-style: none; - margin: var(--spacing-none, 0); - padding: var(--spacing-none, 0); + margin: var(--str-chat__spacing-none, 0); + padding: var(--str-chat__spacing-none, 0); display: flex; - gap: var(--space-2, 2px); + gap: var(--str-chat__space-2, 2px); .str-chat__reaction-selector-list__item { display: flex; @@ -49,33 +49,33 @@ .str-chat__reaction-selector-list__item-button { background-color: transparent; border: none; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); cursor: pointer; display: flex; min-width: 40px; min-height: 40px; - padding: var(--spacing-none, 0); + padding: var(--str-chat__spacing-none, 0); justify-content: center; align-items: center; - gap: var(--spacing-none, 0); + gap: var(--str-chat__spacing-none, 0); &:not(:disabled):hover { - background-color: var(--background-utility-hover); + background-color: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background-color: var(--background-utility-pressed); + background-color: var(--str-chat__background-utility-pressed); } &:not(:disabled):focus-visible { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: -2px; } &:not(:disabled)[aria-pressed='true'] { - background-color: var(--background-utility-selected); + background-color: var(--str-chat__background-utility-selected); } .str-chat__reaction-icon { - font-size: var(--typography-font-size-2xl); + font-size: var(--str-chat__typography-font-size-2xl); line-height: 1; display: flex; justify-content: center; diff --git a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss index fb0ca14a5..30d5b9c83 100644 --- a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss +++ b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss @@ -2,14 +2,14 @@ display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; - padding-block: var(--spacing-md); - padding-inline: var(--spacing-sm); + padding-block: var(--str-chat__spacing-md); + padding-inline: var(--str-chat__spacing-sm); .str-chat__reaction-selector-extended-list__button { .str-chat__reaction-icon { - height: var(--emoji-md); - width: var(--emoji-md); - font-size: var(--emoji-md); + height: var(--str-chat__emoji-md); + width: var(--str-chat__emoji-md); + font-size: var(--str-chat__emoji-md); letter-spacing: var(--typography-letter-spacing-default); font-style: normal; line-height: 0; diff --git a/src/components/Reactions/styling/common.scss b/src/components/Reactions/styling/common.scss index 83607f610..7b73b9f8f 100644 --- a/src/components/Reactions/styling/common.scss +++ b/src/components/Reactions/styling/common.scss @@ -6,15 +6,15 @@ cursor: pointer; position: relative; display: flex; - gap: var(--spacing-xxs); - padding-inline: var(--spacing-xs); - padding-block: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxs); + padding-inline: var(--str-chat__spacing-xs); + padding-block: var(--str-chat__spacing-xxxs); align-items: center; justify-content: center; - border-radius: var(--radius-max); - border: 1px solid var(--reaction-border); - background: var(--reaction-bg); - color: var(--reaction-text); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__reaction-border); + background: var(--str-chat__reaction-bg); + color: var(--str-chat__reaction-text); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16); font-weight: inherit; font-size: inherit; @@ -36,13 +36,13 @@ } &:hover::before { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:active::before { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &[aria-pressed='true']::before { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } } } @@ -54,7 +54,7 @@ position: absolute; width: 100%; inset-inline-start: 0; - height: var(--size-16); + height: var(--str-chat__size-16); } &::after { @@ -64,7 +64,7 @@ background: linear-gradient( to bottom, transparent 5%, - var(--background-core-elevation-2) 95% + var(--str-chat__background-core-elevation-2) 95% ); } @@ -77,7 +77,7 @@ background: linear-gradient( to top, transparent 5%, - var(--background-core-elevation-2) 95% + var(--str-chat__background-core-elevation-2) 95% ); } } diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss index d88646948..09653432f 100644 --- a/src/components/Search/styling/Search.scss +++ b/src/components/Search/styling/Search.scss @@ -1,27 +1,27 @@ .str-chat__search { display: flex; flex-direction: column; - gap: var(--spacing-sm); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); justify-content: center; } .str-chat__search-bar { - padding-inline: var(--spacing-md); + padding-inline: var(--str-chat__spacing-md); display: flex; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); .str-chat__search-bar__input-wrapper { display: flex; min-height: 40px; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--radius-max); - border: 1px solid var(--border-core-default); - color: var(--input-text-placeholder); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__border-core-default); + color: var(--str-chat__input-text-placeholder); font: var(--str_chat__heading-xs-text); // FIXME: there's no proper variation so we need to adjust font-weight separately - font-weight: var(--typography-font-weight-regular); + font-weight: var(--str-chat__typography-font-weight-regular); flex-shrink: 1; flex-grow: 1; @@ -42,8 +42,8 @@ flex-shrink: 0; } - padding-block: var(--spacing-xs); - padding-inline: var(--spacing-sm); + padding-block: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-sm); } .str-chat__search-bar__exit-search-button { @@ -54,7 +54,7 @@ .str-chat__search-results { display: flex; flex-direction: column; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); .str-chat__search-results-header { overflow-x: auto; @@ -62,8 +62,8 @@ .str-chat__search-results-header__filter-source-buttons { display: flex; - gap: var(--spacing-xxs); - padding-inline: var(--spacing-md); + gap: var(--str-chat__spacing-xxs); + padding-inline: var(--str-chat__spacing-md); & > .str-chat__button { flex-shrink: 0; @@ -74,16 +74,16 @@ .str-chat__search-source-result-list { .str-chat__search-result-container { - padding: var(--spacing-xxs); - border-bottom: 1px solid var(--border-core-subtle); + padding: var(--str-chat__spacing-xxs); + border-bottom: 1px solid var(--str-chat__border-core-subtle); .str-chat__search-result { &--user { display: flex; align-items: center; - gap: var(--spacing-md); - padding: var(--spacing-sm); - border-radius: var(--radius-lg); + gap: var(--str-chat__spacing-md); + padding: var(--str-chat__spacing-sm); + border-radius: var(--str-chat__radius-lg); width: 100%; border: none; background: none; @@ -96,14 +96,14 @@ .str-chat__search-result-data { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1 0 0; min-width: 0; text-align: start; .str-chat__search-result__display-name { font: var(--str-chat__font-heading-xs); - color: var(--text-primary); + color: var(--str-chat__text-primary); flex: 1; min-width: 0; text-overflow: ellipsis; @@ -117,22 +117,22 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + line-height: var(--str-chat__typography-line-height-normal); } } - background: var(--background-core-elevation-1); + background: var(--str-chat__background-core-elevation-1); &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } } } @@ -142,9 +142,9 @@ .str-chat__search-source-result-list__footer, .str-chat__search-results-presearch, .str-chat__search-source-results-empty { - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - padding-block: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + padding-block: var(--str-chat__spacing-xs); display: flex; justify-content: center; align-items: center; diff --git a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss index ddd644f83..6449fb48c 100644 --- a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss +++ b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss @@ -1,22 +1,22 @@ .str-chat__summarized-message-preview { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex-grow: 1; flex-shrink: 1; min-width: 0; - color: var(--text-secondary); - font-size: var(--typography-font-size-sm); + color: var(--str-chat__text-secondary); + font-size: var(--str-chat__typography-font-size-sm); font-style: normal; - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); .str-chat__icon { flex-shrink: 0; - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } &--error { @@ -24,7 +24,7 @@ } &--deleted { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__summarized-message-preview__text { @@ -39,16 +39,16 @@ .str-chat__summarized-message-preview__delivery-status { display: flex; flex-shrink: 0; - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); &--read { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } } .str-chat__summarized-message-preview__sender { - color: var(--text-tertiary); - font-weight: var(--typography-font-weight-semi-bold); + color: var(--str-chat__text-tertiary); + font-weight: var(--str-chat__typography-font-weight-semi-bold); white-space: nowrap; overflow: hidden; diff --git a/src/components/Thread/styling/Thread.scss b/src/components/Thread/styling/Thread.scss index 86e4576e1..9ffa5c954 100644 --- a/src/components/Thread/styling/Thread.scss +++ b/src/components/Thread/styling/Thread.scss @@ -1,7 +1,7 @@ // FIXME: figure out why does this "container" exist when __thread is completely valid .str-chat__thread-container { - color: var(--text-primary); - border-inline-start: 1px solid var(--border-core-default); + color: var(--str-chat__text-primary); + border-inline-start: 1px solid var(--str-chat__border-core-default); position: relative; height: 100%; display: flex; diff --git a/src/components/Thread/styling/ThreadHead.scss b/src/components/Thread/styling/ThreadHead.scss index 9384836c7..a1a32f533 100644 --- a/src/components/Thread/styling/ThreadHead.scss +++ b/src/components/Thread/styling/ThreadHead.scss @@ -1,28 +1,28 @@ .str-chat__parent-message-li { - padding-block-start: var(--spacing-sm); + padding-block-start: var(--str-chat__spacing-sm); .str-chat__message { max-width: calc( var(--str-chat__message-composer-max-width) + var(--str-chat__message-composer-padding) ); - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); margin-inline: auto; } .str-chat__thread-start { display: flex; - padding: var(--spacing-xs) var(--spacing-none); - margin-block: var(--spacing-xs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-none); + margin-block: var(--str-chat__spacing-xs); justify-content: center; align-items: center; - gap: var(--spacing-none); + gap: var(--str-chat__spacing-none); width: 100%; - border-top: 1px solid var(--border-core-subtle); - border-bottom: 1px solid var(--border-core-subtle); - background: var(--background-core-surface-subtle); - color: var(--chat-text-system); + border-top: 1px solid var(--str-chat__border-core-subtle); + border-bottom: 1px solid var(--str-chat__border-core-subtle); + background: var(--str-chat__background-core-surface-subtle); + color: var(--str-chat__chat-text-system); font: var(--str-chat__font-metadata-emphasis); } } diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss index f8586a784..8e63b3bcf 100644 --- a/src/components/Thread/styling/ThreadHeader.scss +++ b/src/components/Thread/styling/ThreadHeader.scss @@ -2,9 +2,9 @@ .str-chat__thread-header { @include utils.header-layout; - background: var(--background-core-elevation-1); - color: var(--text-primary); - border-block-end: 1px solid var(--border-core-default); + background: var(--str-chat__background-core-elevation-1); + color: var(--str-chat__text-primary); + border-block-end: 1px solid var(--str-chat__border-core-default); .str-chat__thread-header-title { font: var(--str-chat__font-heading-sm); @@ -12,7 +12,7 @@ .str-chat__thread-header-subtitle { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__thread-header-details { @@ -44,14 +44,14 @@ display: flex; align-items: flex-start; justify-content: flex-end; - width: var(--size-40); - height: var(--size-40); + width: var(--str-chat__size-40); + height: var(--str-chat__size-40); cursor: pointer; background-color: transparent; border: none; .str-chat__icon { - fill: var(--text-primary); + fill: var(--str-chat__text-primary); } } } diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss index c6ca4a301..dfa4b75bb 100644 --- a/src/components/Threads/ThreadList/styling/ThreadList.scss +++ b/src/components/Threads/ThreadList/styling/ThreadList.scss @@ -15,9 +15,9 @@ } .str-chat__thread-list-container { - background: var(--background-core-elevation-1); - color: var(--text-primary); - border-inline-end: 1px solid var(--border-core-default); + background: var(--str-chat__background-core-elevation-1); + color: var(--str-chat__text-primary); + border-inline-end: 1px solid var(--str-chat__border-core-default); display: flex; flex: 0 0 var(--str-chat__thread-list-width); flex-direction: column; @@ -72,22 +72,22 @@ font: var(--str-chat__font-metadata-emphasis); cursor: pointer; display: flex; - color: var(--text-secondary); + color: var(--str-chat__text-secondary); height: 36px; justify-content: center; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--radius-none); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-none); background: var(--background-core-surface); position: relative; & > .str-chat__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } } } @@ -105,7 +105,7 @@ } .str-chat__thread-list-empty-placeholder { - --str-chat-icon-color: var(--text-secondary); + --str-chat-icon-color: var(--str-chat__text-secondary); @include utils.empty-theme('thread-list'); height: 100%; @@ -114,14 +114,14 @@ flex-direction: column; align-items: center; justify-content: center; - padding: var(--spacing-xl); - color: var(--text-secondary); + padding: var(--str-chat__spacing-xl); + color: var(--str-chat__text-secondary); p { margin: 0; - color: var(--text-secondary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + color: var(--str-chat__text-secondary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); } } diff --git a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss index 5d51fb4cd..b4edd1609 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss @@ -1,13 +1,13 @@ .str-chat__thread-list__header { display: flex; align-items: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); height: var(--str-chat__channel-header-height); width: 100%; .str-chat__thread-list__header__title { flex: 1; font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss index c5e1a3999..d81448042 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss @@ -1,38 +1,38 @@ @use '../../../../styling/utils'; .str-chat__thread-list-item-container { - border-bottom: 1px solid var(--border-core-subtle); - padding: var(--spacing-xxs); + border-bottom: 1px solid var(--str-chat__border-core-subtle); + padding: var(--str-chat__spacing-xxs); max-width: 100%; &:has(.str-chat__thread-list-item--highlighted) { - background: var(--background-core-highlight); + background: var(--str-chat__background-core-highlight); } } .str-chat__thread-list-item { display: flex; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); align-items: flex-start; - padding-inline: var(--spacing-sm); - padding-block: var(--spacing-sm); - padding-block-start: calc(var(--spacing-sm) - 1px); + padding-inline: var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-sm); + padding-block-start: calc(var(--str-chat__spacing-sm) - 1px); border: none; cursor: pointer; text-align: start; - background: var(--background-core-elevation-1); - border-radius: var(--radius-lg); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__radius-lg); width: 100%; max-width: 100%; &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } .str-chat__avatar { @@ -41,10 +41,10 @@ .str-chat__summarized-message-preview { .str-chat__summarized-message-preview__sender { - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__summarized-message-preview__text { - color: var(--text-primary); + color: var(--str-chat__text-primary); } } } @@ -52,7 +52,7 @@ .str-chat__thread-list-item__content { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); flex: 1 0 0; min-width: 0; } @@ -60,15 +60,15 @@ .str-chat__thread-list-item__content-leading { display: flex; flex-direction: column; - gap: var(--spacing-xxs); - padding-block: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxs); + padding-block: var(--str-chat__spacing-xxxs); } .str-chat__thread-list-item__title { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -76,31 +76,31 @@ .str-chat__thread-list-item__content-trailing { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; } .str-chat__thread-list-item__reply-information { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; } .str-chat__thread-list-item__reply-count { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-link); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .str-chat__thread-list-item__timestamp { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); white-space: nowrap; min-width: 0; @include utils.ellipsis-text; diff --git a/src/components/Threads/styling/UnreadCountBadge.scss b/src/components/Threads/styling/UnreadCountBadge.scss index 1602cbd6f..a6192c460 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__unread-count-badge { - background-color: var(--accent-error); - color: var(--badge-text-on-accent); + background-color: var(--str-chat__accent-error); + color: var(--str-chat__badge-text-on-accent); border-radius: 9999px; } diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index ffb2f7be0..28d3ebeea 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -1,23 +1,23 @@ @use '../../../styling/utils'; .str-chat { - --str-chat__tooltip-background-color: var(--background-core-inverse); + --str-chat__tooltip-background-color: var(--str-chat__background-core-inverse); // FIXME: this should not be the case &.str-chat__theme-dark { - --str-chat__tooltip-background-color: var(--background-core-elevation-2); + --str-chat__tooltip-background-color: var(--str-chat__background-core-elevation-2); } } .str-chat__tooltip { background: var(--str-chat__tooltip-background-color); - color: var(--text-on-accent); + color: var(--str-chat__text-on-accent); box-shadow: var(--str-chat__box-shadow-3); - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); @include utils.prevent-glitch-text-overflow; display: flex; - gap: var(--spacing-xs); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs); z-index: 1; max-width: 150px; width: max-content; diff --git a/src/components/TypingIndicator/styling/TypingIndicator.scss b/src/components/TypingIndicator/styling/TypingIndicator.scss index 4e2493d7a..69e9a6b8b 100644 --- a/src/components/TypingIndicator/styling/TypingIndicator.scss +++ b/src/components/TypingIndicator/styling/TypingIndicator.scss @@ -23,8 +23,8 @@ var(--str-chat__message-composer-padding) ); margin: auto; - gap: var(--spacing-xs); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-block: var(--str-chat__spacing-xs); padding-inline: var(--str-chat__message-composer-padding); &.str-chat__typing-indicator--with-transition { @@ -37,11 +37,12 @@ align-items: center; min-height: 36px; max-height: 36px; - padding-block: var(--spacing-xs); - padding-inline: var(--spacing-sm); - 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); + padding-block: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-sm); + border-radius: var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-tail); // variable --chat-bg-typing-indicator has incorrect color value? //background: var(--chat-bg-typing-indicator); border: 1px solid var(--chat-bg); @@ -51,7 +52,7 @@ .str-chat__typing-indicator__dots { display: flex; align-items: center; - column-gap: var(--spacing-xxs); + column-gap: var(--str-chat__spacing-xxs); } /* SVG dots (TypingIndicatorDots component) */ @@ -59,19 +60,19 @@ display: block; circle:nth-child(1) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0s; } circle:nth-child(2) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0.15s; } circle:nth-child(3) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0.3s; } @@ -96,9 +97,9 @@ .str-chat__typing-indicator-header { display: inline-flex; align-items: baseline; - gap: var(--spacing-xs, 4px); + gap: var(--str-chat__spacing-xs); white-space: nowrap; - color: var(--text-secondary); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); } diff --git a/src/components/VideoPlayer/styling/VideoThumbnail.scss b/src/components/VideoPlayer/styling/VideoThumbnail.scss index c3594ab1f..594b0ee92 100644 --- a/src/components/VideoPlayer/styling/VideoThumbnail.scss +++ b/src/components/VideoPlayer/styling/VideoThumbnail.scss @@ -19,8 +19,8 @@ position: absolute; height: $size; width: $size; - border-radius: var(--radius-max); - background-color: var(--control-play-button-bg); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__control-play-button-bg); left: calc(50% - calc($size / 2)); top: calc(50% - calc($size / 2)); @@ -29,7 +29,7 @@ width: calc($size / 2); path { - fill: var(--control-play-button-icon); + fill: var(--str-chat__control-play-button-icon); } } } diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss index d1bbc1aca..8ad59b58c 100644 --- a/src/styling/_utils.scss +++ b/src/styling/_utils.scss @@ -52,7 +52,7 @@ text-overflow: ellipsis; } -@mixin unset-button($outline-radius: var(--radius-max)) { +@mixin unset-button($outline-radius: var(--str-chat__radius-max)) { padding: unset; background: unset; border: unset; @@ -60,7 +60,7 @@ } @mixin focusable { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: 2px; } @@ -77,8 +77,8 @@ } @mixin modal { - border-radius: var(--radius-xl); - background: var(--background-core-elevation-1); + border-radius: var(--str-chat__radius-xl); + background: var(--str-chat__background-core-elevation-1); /* shadow/web/light/elevation-4 */ box-shadow: @@ -100,7 +100,7 @@ @mixin header-layout { width: 100%; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); height: var(--str-chat__channel-header-height); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); diff --git a/src/styling/base.scss b/src/styling/base.scss index 9b7bf5666..1fc01b23d 100644 --- a/src/styling/base.scss +++ b/src/styling/base.scss @@ -1,13 +1,13 @@ .str-chat { font-family: var(--str-chat__font-family); - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + font-size: var(--str-chat__typography-font-size-md); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); letter-spacing: var(--typography-letter-spacing-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); *:not(:disabled):focus-visible { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: 2px; } diff --git a/src/styling/dark.scss b/src/styling/dark.scss index 0e6401ba8..56fcb9a3f 100644 --- a/src/styling/dark.scss +++ b/src/styling/dark.scss @@ -1,610 +1,165 @@ -@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( + +@mixin variables { + --str-chat__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( + --str-chat__background-core-overlay-dark: rgba( 0, 0, 0, 0.5 ); /** A dark semi-transparent layer. Used for image overlays. */ - --background-core-scrim: rgba( + --str-chat__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( + --str-chat__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( + --str-chat__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( + --str-chat__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( + --str-chat__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( + --str-chat__border-utility-hover: rgba( 255, 255, 255, 0.1 ); /** Applied on pointer hover over bordered interactive elements. */ - --border-utility-pressed: rgba( + --str-chat__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( + --str-chat__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( + --str-chat__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; + --str-chat__system-bg-blur: rgba(0, 0, 0, 0.01); + --str-chat__system-scrollbar: rgba(255, 255, 255, 0.5); + /** + * 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. + */ + /** + * 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. + */ + --str-chat__background-core-highlight: var( + --str-chat__yellow-800 + ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --str-chat__avatar-palette-bg-1: var(--str-chat__blue-600); + --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-600); + --str-chat__avatar-palette-bg-3: var(--str-chat__green-600); + --str-chat__avatar-palette-bg-4: var(--str-chat__purple-600); + --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-600); + --str-chat__avatar-palette-text-1: var(--str-chat__blue-100); + --str-chat__avatar-palette-text-2: var(--str-chat__cyan-100); + --str-chat__avatar-palette-text-3: var(--str-chat__green-100); + --str-chat__avatar-palette-text-4: var(--str-chat__purple-100); + --str-chat__avatar-palette-text-5: var(--str-chat__yellow-100); + --str-chat__accent-success: var( + --str-chat__green-300 + ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --str-chat__accent-warning: var( + --str-chat__yellow-300 + ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --str-chat__accent-error: var( + --str-chat__red-400 + ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --str-chat__brand-50: var(--str-chat__blue-900); + --str-chat__brand-100: var(--str-chat__blue-800); + --str-chat__brand-150: var(--str-chat__blue-700); + --str-chat__brand-200: var(--str-chat__blue-600); + --str-chat__brand-300: var(--str-chat__blue-500); + --str-chat__brand-500: var(--str-chat__blue-300); + --str-chat__brand-600: var(--str-chat__blue-200); + --str-chat__brand-700: var(--str-chat__blue-150); + --str-chat__brand-800: var(--str-chat__blue-100); + --str-chat__brand-900: var(--str-chat__blue-50); + --str-chat__chrome-0: var(--str-chat__base-black); + --str-chat__chrome-50: var(--str-chat__neutral-900); + --str-chat__chrome-100: var(--str-chat__neutral-800); + --str-chat__chrome-150: var(--str-chat__neutral-700); + --str-chat__chrome-200: var(--str-chat__neutral-600); + --str-chat__chrome-300: var(--str-chat__neutral-500); + --str-chat__chrome-400: var(--str-chat__neutral-400); + --str-chat__chrome-500: var(--str-chat__neutral-300); + --str-chat__chrome-600: var(--str-chat__neutral-200); + --str-chat__chrome-700: var(--str-chat__neutral-150); + --str-chat__chrome-800: var(--str-chat__neutral-100); + --str-chat__chrome-900: var(--str-chat__neutral-50); + --str-chat__chrome-1000: var(--str-chat__base-white); + --str-chat__background-core-elevation-1: var( + --str-chat__chrome-50 + ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --str-chat__background-core-elevation-2: var( + --str-chat__chrome-100 + ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --str-chat__background-core-elevation-3: var( + --str-chat__chrome-200 + ); /** Used for badge counts that float above other UI elements. */ + --str-chat__background-core-surface-card: var( + --str-chat__chrome-100 + ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --str-chat__background-core-on-accent: var( + --str-chat__chrome-1000 + ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --str-chat__border-core-default: var( + --str-chat__chrome-200 + ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --str-chat__border-core-on-accent: var( + --str-chat__chrome-1000 + ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --str-chat__text-on-accent: var( + --str-chat__chrome-1000 + ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --str-chat__text-link: var( + --str-chat__brand-600 + ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --str-chat__accent-primary: var( + --str-chat__brand-400 + ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ } diff --git a/src/styling/light.scss b/src/styling/light.scss index 5b93f6d4d..1175475f1 100644 --- a/src/styling/light.scss +++ b/src/styling/light.scss @@ -1,610 +1,798 @@ -@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: + +@mixin variables { + --str-chat__base-transparent-0: rgba(255, 255, 255, 0); + --str-chat__base-transparent-white-10: rgba(255, 255, 255, 0.1); + --str-chat__base-transparent-white-20: rgba(255, 255, 255, 0.2); + --str-chat__base-transparent-white-30: rgba(255, 255, 255, 0.3); + --str-chat__base-transparent-white-70: rgba(255, 255, 255, 0.7); + --str-chat__base-transparent-black-5: rgba( + 0, + 0, + 0, + 0.05 + ); /** Used for bg in closeButton */ + --str-chat__base-transparent-black-10: rgba( + 0, + 0, + 0, + 0.1 + ); /** Used for bg in closeButton */ + --str-chat__base-transparent-black-70: rgba( + 0, + 0, + 0, + 0.7 + ); /** Used for bg in closeButton */ + --str-chat__base-black: #000000; + --str-chat__base-white: #ffffff; + --str-chat__slate-50: #f6f8fa; + --str-chat__slate-100: #ebeef1; + --str-chat__slate-150: #d5dbe1; + --str-chat__slate-200: #c0c8d2; + --str-chat__slate-300: #a3acba; + --str-chat__slate-400: #87909f; + --str-chat__slate-500: #687385; + --str-chat__slate-600: #545969; + --str-chat__slate-700: #414552; + --str-chat__slate-800: #30313d; + --str-chat__slate-900: #1a1b25; + --str-chat__neutral-50: #f8f8f8; + --str-chat__neutral-100: #efefef; + --str-chat__neutral-150: #d8d8d8; + --str-chat__neutral-200: #c4c4c4; + --str-chat__neutral-300: #ababab; + --str-chat__neutral-400: #8f8f8f; + --str-chat__neutral-500: #6a6a6a; + --str-chat__neutral-600: #565656; + --str-chat__neutral-700: #464646; + --str-chat__neutral-800: #323232; + --str-chat__neutral-900: #1c1c1c; + --str-chat__blue-50: #f3f7ff; + --str-chat__blue-100: #e3edff; + --str-chat__blue-150: #c3d9ff; + --str-chat__blue-200: #a5c5ff; + --str-chat__blue-300: #78a8ff; + --str-chat__blue-400: #4586ff; + --str-chat__blue-500: #005fff; + --str-chat__blue-600: #1b53bd; + --str-chat__blue-700: #19418d; + --str-chat__blue-800: #142f63; + --str-chat__blue-900: #091a3b; + --str-chat__cyan-50: #f1fbfc; + --str-chat__cyan-100: #d1f3f6; + --str-chat__cyan-150: #a9e4ea; + --str-chat__cyan-200: #72d7e0; + --str-chat__cyan-300: #45bcc7; + --str-chat__cyan-400: #1e9ea9; + --str-chat__cyan-500: #248088; + --str-chat__cyan-600: #006970; + --str-chat__cyan-700: #065056; + --str-chat__cyan-800: #003a3f; + --str-chat__cyan-900: #002124; + --str-chat__green-50: #e1ffee; + --str-chat__green-100: #bdfcdb; + --str-chat__green-150: #8febbd; + --str-chat__green-200: #59dea3; + --str-chat__green-300: #00c384; + --str-chat__green-400: #00a46e; + --str-chat__green-500: #277e59; + --str-chat__green-600: #006643; + --str-chat__green-700: #004f33; + --str-chat__green-800: #003a25; + --str-chat__green-900: #002213; + --str-chat__purple-50: #f7f8ff; + --str-chat__purple-100: #ecedff; + --str-chat__purple-150: #d4d7ff; + --str-chat__purple-200: #c1c5ff; + --str-chat__purple-300: #a1a3ff; + --str-chat__purple-400: #8482fc; + --str-chat__purple-500: #644af9; + --str-chat__purple-600: #553bd8; + --str-chat__purple-700: #4032a1; + --str-chat__purple-800: #2e2576; + --str-chat__purple-900: #1a114d; + --str-chat__yellow-50: #fef9da; + --str-chat__yellow-100: #fcedb9; + --str-chat__yellow-150: #fcd579; + --str-chat__yellow-200: #f6bf57; + --str-chat__yellow-300: #fa922b; + --str-chat__yellow-400: #f26d10; + --str-chat__yellow-500: #c84801; + --str-chat__yellow-600: #a82c00; + --str-chat__yellow-700: #842106; + --str-chat__yellow-800: #5f1a05; + --str-chat__yellow-900: #331302; + --str-chat__red-50: #fff5fa; + --str-chat__red-100: #ffe7f2; + --str-chat__red-150: #ffccdf; + --str-chat__red-200: #ffb1cd; + --str-chat__red-300: #fe87a1; + --str-chat__red-400: #fc526a; + --str-chat__red-500: #d90d10; + --str-chat__red-600: #b3093c; + --str-chat__red-700: #890d37; + --str-chat__red-800: #68052b; + --str-chat__red-900: #3e021a; + --str-chat__violet-50: #fef4ff; + --str-chat__violet-100: #fbe8fe; + --str-chat__violet-150: #f7cffc; + --str-chat__violet-200: #eeb5f4; + --str-chat__violet-300: #e68bec; + --str-chat__violet-400: #d75fe7; + --str-chat__violet-500: #b716ca; + --str-chat__violet-600: #9d00ae; + --str-chat__violet-700: #7c0089; + --str-chat__violet-800: #5c0066; + --str-chat__violet-900: #36003d; + --str-chat__lime-50: #f1fde8; + --str-chat__lime-100: #d4ffb0; + --str-chat__lime-150: #b1ee79; + --str-chat__lime-200: #9cda5d; + --str-chat__lime-300: #78c100; + --str-chat__lime-400: #639e11; + --str-chat__lime-500: #4b7a0a; + --str-chat__lime-600: #3e6213; + --str-chat__lime-700: #355315; + --str-chat__lime-800: #203a00; + --str-chat__lime-900: #112100; + --str-chat__size-2: 2px; + --str-chat__size-4: 4px; + --str-chat__size-6: 6px; + --str-chat__size-8: 8px; + --str-chat__size-12: 12px; + --str-chat__size-16: 16px; + --str-chat__size-20: 20px; + --str-chat__size-24: 24px; + --str-chat__size-32: 32px; + --str-chat__size-40: 40px; + --str-chat__size-48: 48px; + --str-chat__size-64: 64px; + --str-chat__size-28: 28px; + --str-chat__size-80: 80px; + --str-chat__size-128: 128px; + --str-chat__size-240: 240px; + --str-chat__size-320: 320px; + --str-chat__size-480: 480px; + --str-chat__size-560: 560px; + --str-chat__size-640: 640px; + --str-chat__size-760: 760px; + --str-chat__size-144: 144px; + --str-chat__size-208: 208px; + --str-chat__size-56: 56px; + --str-chat__radius-0: 0px; + --str-chat__radius-2: 2px; + --str-chat__radius-4: 4px; + --str-chat__radius-6: 6px; + --str-chat__radius-8: 8px; + --str-chat__radius-12: 12px; + --str-chat__radius-16: 16px; + --str-chat__radius-20: 20px; + --str-chat__radius-24: 24px; + --str-chat__radius-32: 32px; + --str-chat__radius-full: 9999px; + --str-chat__space-0: 0px; + --str-chat__space-2: 2px; + --str-chat__space-4: 4px; + --str-chat__space-8: 8px; + --str-chat__space-12: 12px; + --str-chat__space-16: 16px; + --str-chat__space-20: 20px; + --str-chat__space-24: 24px; + --str-chat__space-32: 32px; + --str-chat__space-40: 40px; + --str-chat__space-48: 48px; + --str-chat__space-64: 64px; + --str-chat__space-80: 80px; + --str-chat__w100: 1px; + --str-chat__w150: 1.5px; + --str-chat__w200: 2px; + --str-chat__w300: 3px; + --str-chat__w400: 4px; + --str-chat__w120: 1.2px; + --str-chat__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. */ + --str-chat__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. */ + --str-chat__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. */ + --str-chat__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. */ + --str-chat__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. */ + --str-chat__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. */ + --str-chat__font-weight-w400: 400; + --str-chat__font-weight-w500: 500; + --str-chat__font-weight-w600: 600; + --str-chat__font-weight-w700: 700; + --str-chat__font-size-size-8: 8px; + --str-chat__font-size-size-10: 10px; + --str-chat__font-size-size-11: 11px; + --str-chat__font-size-size-12: 12px; + --str-chat__font-size-size-13: 13px; + --str-chat__font-size-size-14: 14px; + --str-chat__font-size-size-16: 16px; + --str-chat__font-size-size-15: 15px; + --str-chat__font-size-size-17: 17px; + --str-chat__font-size-size-18: 18px; + --str-chat__font-size-size-20: 20px; + --str-chat__font-size-size-22: 22px; + --str-chat__font-size-size-24: 24px; + --str-chat__font-size-size-28: 28px; + --str-chat__font-size-size-32: 32px; + --str-chat__font-size-size-40: 40px; + --str-chat__font-size-size-48: 48px; + --str-chat__font-size-size-64: 64px; + --str-chat__line-height-line-height-8: 8px; + --str-chat__line-height-line-height-10: 10px; + --str-chat__line-height-line-height-12: 12px; + --str-chat__line-height-line-height-13: 13px; + --str-chat__line-height-line-height-14: 14px; + --str-chat__line-height-line-height-15: 15px; + --str-chat__line-height-line-height-16: 16px; + --str-chat__line-height-line-height-17: 17px; + --str-chat__line-height-line-height-18: 18px; + --str-chat__line-height-line-height-20: 20px; + --str-chat__line-height-line-height-24: 24px; + --str-chat__line-height-line-height-28: 28px; + --str-chat__line-height-line-height-32: 32px; + --str-chat__line-height-line-height-40: 40px; + --str-chat__line-height-line-height-48: 48px; + --str-chat__typography-font-weight-regular: 400; + --str-chat__typography-font-weight-medium: 500; + --str-chat__typography-font-weight-semi-bold: 600; + --str-chat__typography-font-weight-bold: 700; + --str-chat__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: + --str-chat__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: + --str-chat__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: + --str-chat__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: + --str-chat__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: + --str-chat__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: + --str-chat__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: + --str-chat__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( + --str-chat__button-padding-y-lg: 14px; + --str-chat__button-padding-y-md: 10px; + --str-chat__button-padding-y-sm: 6px; + --str-chat__button-padding-y-xs: 4px; + --str-chat__button-padding-x-icon-only-lg: 14px; + --str-chat__button-padding-x-icon-only-md: 10px; + --str-chat__button-padding-x-icon-only-sm: 6px; + --str-chat__button-padding-x-icon-only-xs: 4px; + --str-chat__button-padding-x-with-label-lg: 16px; + --str-chat__button-padding-x-with-label-md: 16px; + --str-chat__button-padding-x-with-label-sm: 16px; + --str-chat__button-padding-x-with-label-xs: 12px; + --str-chat__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( + --str-chat__background-core-overlay-dark: rgba( 26, 27, 37, 0.25 ); /** A dark semi-transparent layer. Used for image overlays. */ - --background-core-scrim: rgba( + --str-chat__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( + --str-chat__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( + --str-chat__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( + --str-chat__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( + --str-chat__border-utility-hover: rgba( 26, 27, 37, 0.1 ); /** Applied on pointer hover over bordered interactive elements. */ - --border-utility-pressed: rgba( + --str-chat__border-utility-pressed: rgba( 26, 27, 37, 0.2 ); /** Applied during an active press on bordered interactive elements. */ - --border-utility-selected: rgba( + --str-chat__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( + --str-chat__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( + --str-chat__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 + --str-chat__system-bg-blur: rgba(255, 255, 255, 0.01); + --str-chat__system-scrollbar: rgba(0, 0, 0, 0.5); + --str-chat__badge-bg-overlay: rgba(0, 0, 0, 0.75); + --str-chat__control-play-button-bg: rgba(0, 0, 0, 0.75); + --str-chat__typography-font-family-sans: var(--str-chat__font-family-geist); + --str-chat__typography-font-family-mono: var(--str-chat__font-family-geist-mono); + --str-chat__typography-font-size-xxs: var( + --str-chat__font-size-size-10 + ); /** Micro text such as timestamps or subtle metadata. */ + --str-chat__typography-font-size-xs: var( + --str-chat__font-size-size-12 + ); /** Compact secondary text, small UI labels. */ + --str-chat__typography-font-size-sm: var( + --str-chat__font-size-size-14 + ); /** Default mobile body size, small controls. */ + --str-chat__typography-font-size-md: var( + --str-chat__font-size-size-16 + ); /** Default desktop body size, main text. */ + --str-chat__typography-font-size-lg: var( + --str-chat__font-size-size-18 + ); /** Medium emphasis, section labels. */ + --str-chat__typography-font-size-xl: var( + --str-chat__font-size-size-20 + ); /** Small headings. */ + --str-chat__typography-font-size-2xl: var( + --str-chat__font-size-size-24 + ); /** Section titles, important headings. */ + --str-chat__typography-font-size-micro: var( + --str-chat__font-size-size-8 + ); /** Micro text such as timestamps or subtle metadata. */ + --str-chat__typography-line-height-tight: var( + --str-chat__line-height-line-height-16 + ); /** Compact text, headers, UI labels. */ + --str-chat__typography-line-height-normal: var( + --str-chat__line-height-line-height-20 + ); /** Default reading line-height for sizes 14–16px. */ + --str-chat__typography-line-height-relaxed: var( + --str-chat__line-height-line-height-24 + ); /** For larger text sizes or multiline descriptions. */ + --str-chat__radius-none: var(--str-chat__radius-0); + --str-chat__radius-xxs: var(--str-chat__radius-2); + --str-chat__radius-xs: var(--str-chat__radius-4); + --str-chat__radius-sm: var(--str-chat__radius-6); + --str-chat__radius-md: var(--str-chat__radius-8); + --str-chat__radius-lg: var(--str-chat__radius-12); + --str-chat__radius-xl: var(--str-chat__radius-16); + --str-chat__radius-2xl: var(--str-chat__radius-20); + --str-chat__radius-max: var(--str-chat__radius-full); + --str-chat__radius-3xl: var(--str-chat__radius-24); + --str-chat__radius-4xl: var(--str-chat__radius-32); + --str-chat__spacing-none: var( + --str-chat__space-0 + ); /** No spacing. Used for tight component joins. */ + --str-chat__spacing-xxs: var( + --str-chat__space-4 + ); /** Base unit. Minimal padding, tight gaps. */ + --str-chat__spacing-xs: var( + --str-chat__space-8 + ); /** Small padding and default vertical gaps. */ + --str-chat__spacing-sm: var( + --str-chat__space-12 + ); /** Common internal spacing in inputs and buttons. */ + --str-chat__spacing-md: var( + --str-chat__space-16 + ); /** Default large padding for sections and cards. */ + --str-chat__spacing-xl: var( + --str-chat__space-24 + ); /** Comfortable spacing for chat bubbles and list items. */ + --str-chat__spacing-2xl: var( + --str-chat__space-32 + ); /** Larger spacing for panels, modals, and gutters. */ + --str-chat__spacing-3xl: var( + --str-chat__space-40 + ); /** Used for wide layout spacing and breathing room. */ + --str-chat__spacing-lg: var( + --str-chat__space-20 + ); /** Medium spacing for grouping elements and section breaks. */ + --str-chat__spacing-xxxs: var(--str-chat__space-2); + --str-chat__device-safe-area-bottom: var(--str-chat__space-0); + --str-chat__device-safe-area-top: var(--str-chat__space-0); + --str-chat__button-radius-lg: var(--str-chat__radius-full); + --str-chat__button-radius-md: var(--str-chat__radius-full); + --str-chat__button-radius-sm: var(--str-chat__radius-full); + --str-chat__button-radius-full: var(--str-chat__radius-full); + --str-chat__button-visual-height-sm: var(--str-chat__size-32); + --str-chat__button-visual-height-md: var(--str-chat__size-40); + --str-chat__button-visual-height-lg: var(--str-chat__size-48); + --str-chat__button-visual-height-xs: var(--str-chat__size-24); + /** + * 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. + */ + --str-chat__button-hit-target-min-height: var(--str-chat__size-48); + /** + * 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. + */ + --str-chat__button-hit-target-min-width: var(--str-chat__size-48); + --str-chat__button-primary-bg-liquid-glass: var(--str-chat__base-transparent-0); + --str-chat__icon-size-xs: var(--str-chat__size-12); + --str-chat__icon-size-sm: var(--str-chat__size-16); + --str-chat__icon-size-md: var(--str-chat__size-20); + --str-chat__icon-size-lg: var(--str-chat__size-32); + --str-chat__icon-stroke-subtle: var(--str-chat__w120); + --str-chat__icon-stroke-default: var(--str-chat__w150); + --str-chat__icon-stroke-emphasis: var(--str-chat__w200); + --str-chat__emoji-md: var(--str-chat__font-size-size-24); + --str-chat__emoji-lg: var(--str-chat__font-size-size-32); + --str-chat__emoji-xl: var(--str-chat__font-size-size-48); + --str-chat__emoji-2xl: var(--str-chat__font-size-size-64); + --str-chat__background-core-highlight: var( + --str-chat__yellow-50 + ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --str-chat__chat-waveform-bar: var(--str-chat__border-core-opacity-strong); + --str-chat__control-checkbox-bg: var(--str-chat__base-transparent-0); + --str-chat__control-playback-thumb-border-default: var( + --str-chat__border-core-opacity-strong + ); + --str-chat__control-radio-button-bg: var(--str-chat__base-transparent-0); + --str-chat__control-radio-check-bg: var(--str-chat__base-transparent-0); + --str-chat__avatar-palette-bg-1: var(--str-chat__blue-150); + --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-150); + --str-chat__avatar-palette-bg-3: var(--str-chat__green-150); + --str-chat__avatar-palette-bg-4: var(--str-chat__purple-150); + --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-150); + --str-chat__avatar-palette-text-1: var(--str-chat__blue-900); + --str-chat__avatar-palette-text-2: var(--str-chat__cyan-900); + --str-chat__avatar-palette-text-3: var(--str-chat__green-900); + --str-chat__avatar-palette-text-4: var(--str-chat__purple-900); + --str-chat__avatar-palette-text-5: var(--str-chat__yellow-900); + --str-chat__accent-success: var( + --str-chat__green-400 + ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --str-chat__accent-warning: var( + --str-chat__yellow-400 + ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --str-chat__accent-error: var( + --str-chat__red-500 + ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --str-chat__brand-50: var(--str-chat__blue-50); + --str-chat__brand-100: var(--str-chat__blue-100); + --str-chat__brand-150: var(--str-chat__blue-150); + --str-chat__brand-200: var(--str-chat__blue-200); + --str-chat__brand-300: var(--str-chat__blue-300); + --str-chat__brand-400: var(--str-chat__blue-400); + --str-chat__brand-500: var(--str-chat__blue-500); + --str-chat__brand-600: var(--str-chat__blue-600); + --str-chat__brand-700: var(--str-chat__blue-700); + --str-chat__brand-800: var(--str-chat__blue-800); + --str-chat__brand-900: var(--str-chat__blue-900); + --str-chat__skeleton-loading-base: var( + --str-chat__base-transparent-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 + --str-chat__skeleton-loading-highlight: var( + --str-chat__background-core-overlay-light ); /** 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; + --str-chat__chrome-0: var(--str-chat__base-white); + --str-chat__chrome-50: var(--str-chat__slate-50); + --str-chat__chrome-100: var(--str-chat__slate-100); + --str-chat__chrome-150: var(--str-chat__slate-150); + --str-chat__chrome-200: var(--str-chat__slate-200); + --str-chat__chrome-300: var(--str-chat__slate-300); + --str-chat__chrome-400: var(--str-chat__slate-400); + --str-chat__chrome-500: var(--str-chat__slate-500); + --str-chat__chrome-600: var(--str-chat__slate-600); + --str-chat__chrome-700: var(--str-chat__slate-700); + --str-chat__chrome-800: var(--str-chat__slate-800); + --str-chat__chrome-900: var(--str-chat__slate-900); + --str-chat__chrome-1000: var(--str-chat__base-black); + --str-chat__device-radius: var(--str-chat__radius-md); + --str-chat__message-bubble-radius-group-top: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-group-middle: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-group-bottom: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-tail: var(--str-chat__radius-none); + --str-chat__message-bubble-radius-attachment: var(--str-chat__radius-lg); + --str-chat__message-bubble-radius-attachment-inline: var(--str-chat__radius-md); + --str-chat__composer-radius-fixed: var(--str-chat__radius-3xl); + --str-chat__composer-radius-floating: var(--str-chat__radius-3xl); + --str-chat__button-primary-border: var(--str-chat__brand-200); + --str-chat__button-destructive-bg: var(--str-chat__accent-error); + --str-chat__button-destructive-text: var(--str-chat__accent-error); + --str-chat__button-destructive-border: var(--str-chat__accent-error); + --str-chat__emoji-sm: var(--str-chat__typography-font-size-md); + --str-chat__background-core-app: var( + --str-chat__chrome-0 + ); /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ + --str-chat__background-core-elevation-0: var( + --str-chat__chrome-0 + ); /** 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. */ + --str-chat__background-core-elevation-1: var( + --str-chat__chrome-0 + ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --str-chat__background-core-elevation-2: var( + --str-chat__chrome-0 + ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --str-chat__background-core-elevation-3: var( + --str-chat__chrome-0 + ); /** Used for badge counts that float above other UI elements. */ + --str-chat__background-core-surface-default: var( + --str-chat__chrome-100 + ); /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ + --str-chat__background-core-surface-subtle: var( + --str-chat__chrome-50 + ); /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ + --str-chat__background-core-surface-card: var( + --str-chat__chrome-50 + ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --str-chat__background-core-surface-strong: var( + --str-chat__chrome-150 + ); /** A more prominent background. Used for elements that need to stand out from the main surface. */ + --str-chat__background-core-inverse: var( + --str-chat__chrome-1000 + ); /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ + --str-chat__background-core-on-accent: var( + --str-chat__chrome-0 + ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --str-chat__background-utility-disabled: var( + --str-chat__chrome-100 + ); /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ + --str-chat__border-utility-focused: var( + --str-chat__brand-150 + ); /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ + --str-chat__border-utility-success: var( + --str-chat__accent-success + ); /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ + --str-chat__border-utility-warning: var( + --str-chat__accent-warning + ); /** Border for cautionary states. Used on inputs or elements requiring attention. */ + --str-chat__border-utility-error: var( + --str-chat__accent-error + ); /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ + --str-chat__border-utility-disabled: var( + --str-chat__chrome-100 + ); /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ + --str-chat__border-utility-disabled-on-surface: var( + --str-chat__chrome-150 + ); /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ + --str-chat__border-core-default: var( + --str-chat__chrome-150 + ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --str-chat__border-core-subtle: var( + --str-chat__chrome-100 + ); /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ + --str-chat__border-core-strong: var( + --str-chat__chrome-300 + ); /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ + --str-chat__border-core-inverse: var( + --str-chat__chrome-0 + ); /** Used on dark backgrounds. */ + --str-chat__border-core-on-accent: var( + --str-chat__chrome-0 + ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --str-chat__border-core-on-surface: var( + --str-chat__chrome-300 + ); /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ + --str-chat__border-core-on-inverse: var( + --str-chat__chrome-0 + ); /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ + --str-chat__chat-bg-outgoing: var( + --str-chat__brand-100 + ); /** Outgoing bubble background. */ + --str-chat__chat-bg-attachment-outgoing: var( + --str-chat__brand-150 + ); /** Attachment card in outgoing bubble. */ + --str-chat__chat-text-outgoing: var(--str-chat__brand-900); /** Message body text. */ + --str-chat__chat-border-outgoing: var(--str-chat__brand-100); + --str-chat__chat-border-on-chat-outgoing: var(--str-chat__brand-300); + --str-chat__chat-reply-indicator-incoming: var( + --str-chat__chrome-400 + ); /** Reply indicator shading for incoming. */ + --str-chat__chat-reply-indicator-outgoing: var( + --str-chat__brand-400 + ); /** Reply indicator shading for outgoing. */ + --str-chat__chat-poll-progress-track-outgoing: var(--str-chat__brand-200); + --str-chat__chat-thread-connector-outgoing: var(--str-chat__brand-150); + --str-chat__presence-bg-online: var( + --str-chat__accent-success + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__system-text: var(--str-chat__chrome-1000); + --str-chat__badge-bg-error: var(--str-chat__accent-error); + --str-chat__badge-bg-inverse: var(--str-chat__chrome-1000); + --str-chat__text-primary: var( + --str-chat__chrome-900 + ); /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ + --str-chat__text-secondary: var( + --str-chat__chrome-700 + ); /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ + --str-chat__text-tertiary: var( + --str-chat__chrome-500 + ); /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ + --str-chat__text-on-inverse: var( + --str-chat__chrome-0 + ); /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ + --str-chat__text-on-accent: var( + --str-chat__chrome-0 + ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --str-chat__text-disabled: var( + --str-chat__chrome-300 + ); /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ + --str-chat__text-link: var( + --str-chat__brand-500 + ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --str-chat__avatar-bg-default: var(--str-chat__avatar-palette-bg-1); + --str-chat__avatar-bg-placeholder: var(--str-chat__chrome-150); + --str-chat__avatar-text-default: var(--str-chat__avatar-palette-text-1); + --str-chat__avatar-text-placeholder: var(--str-chat__chrome-500); + --str-chat__avatar-presence-bg-online: var( + --str-chat__accent-success + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__accent-primary: var( + --str-chat__brand-500 + ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ + --str-chat__accent-neutral: var( + --str-chat__chrome-500 + ); /** A mid-tone gray for de-emphasized UI elements. */ + --str-chat__button-primary-bg: var(--str-chat__accent-primary); + --str-chat__button-primary-text: var(--str-chat__accent-primary); + --str-chat__button-primary-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__button-primary-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-primary-border-on-dark: var(--str-chat__border-core-on-inverse); + --str-chat__button-secondary-bg: var(--str-chat__background-core-surface-default); + --str-chat__button-secondary-bg-liquid-glass: var( + --str-chat__background-core-elevation-0 + ); + --str-chat__button-secondary-text: var(--str-chat__text-primary); + --str-chat__button-secondary-text-on-accent: var(--str-chat__text-primary); + --str-chat__button-secondary-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-secondary-border: var(--str-chat__border-core-default); + --str-chat__button-secondary-border-on-dark: var(--str-chat__border-core-on-inverse); + --str-chat__button-destructive-bg-liquid-glass: var( + --str-chat__background-core-elevation-0 + ); + --str-chat__button-destructive-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__button-destructive-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-destructive-border-on-dark: var(--str-chat__text-on-inverse); + --str-chat__border-utility-active: var( + --str-chat__accent-primary + ); /** Active input border. Used for focused text fields and selected form elements. */ + --str-chat__chat-bg-incoming: var( + --str-chat__background-core-surface-default + ); /** Incoming bubble background. */ + --str-chat__chat-bg-attachment-incoming: var( + --str-chat__background-core-surface-strong + ); /** Attachment card in incoming bubble. */ + --str-chat__chat-text-incoming: var(--str-chat__text-primary); /** Message body text. */ + --str-chat__chat-text-username: var(--str-chat__text-secondary); /** Username label. */ + --str-chat__chat-text-timestamp: var(--str-chat__text-tertiary); /** Time labels. */ + --str-chat__chat-text-read: var(--str-chat__accent-primary); + --str-chat__chat-text-mention: var(--str-chat__text-link); /** Mention styling. */ + --str-chat__chat-text-link: var( + --str-chat__text-link + ); /** Links inside message bubbles. */ + --str-chat__chat-text-reaction: var( + --str-chat__text-secondary + ); /** Reaction count text. */ + --str-chat__chat-text-system: var( + --str-chat__text-secondary + ); /** System messages like date separators. */ + --str-chat__chat-border-incoming: var(--str-chat__border-core-subtle); + --str-chat__chat-border-on-chat-incoming: var(--str-chat__border-core-strong); + --str-chat__chat-waveform-bar-playing: var(--str-chat__accent-primary); + --str-chat__chat-poll-progress-fill-outgoing: var(--str-chat__accent-primary); + --str-chat__chat-thread-connector-incoming: var(--str-chat__border-core-default); + --str-chat__input-text-default: var( + --str-chat__text-primary + ); /** Main text inside the chat input. */ + --str-chat__input-text-placeholder: var( + --str-chat__text-tertiary + ); /** Placeholder text for the input. Lower emphasis than main text. */ + --str-chat__input-text-disabled: var( + --str-chat__text-disabled + ); /** Placeholder text for the input. Lower emphasis than main text. */ + --str-chat__input-text-icon: var( + --str-chat__text-tertiary + ); /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ + --str-chat__input-send-icon: var( + --str-chat__accent-primary + ); /** Default send icon color in the input. Uses the brand accent. */ + --str-chat__input-send-icon-disabled: var( + --str-chat__text-disabled + ); /** Send icon when disabled (e.g. empty input). */ + --str-chat__reaction-bg: var(--str-chat__background-core-elevation-3); + --str-chat__reaction-border: var(--str-chat__border-core-default); + --str-chat__reaction-text: var(--str-chat__text-primary); + --str-chat__reaction-emoji: var(--str-chat__text-primary); + --str-chat__presence-border: var( + --str-chat__border-core-inverse + ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --str-chat__presence-bg-offline: var( + --str-chat__accent-neutral + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__system-caret: var(--str-chat__accent-primary); + --str-chat__badge-bg-default: var(--str-chat__background-core-elevation-3); + --str-chat__badge-bg-primary: var(--str-chat__accent-primary); + --str-chat__badge-bg-neutral: var(--str-chat__accent-neutral); + --str-chat__badge-text: var(--str-chat__text-primary); + --str-chat__badge-text-on-inverse: var(--str-chat__text-on-inverse); + --str-chat__badge-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__badge-border: var(--str-chat__border-core-on-inverse); + --str-chat__control-remove-control-bg: var(--str-chat__background-core-inverse); + --str-chat__control-remove-control-icon: var(--str-chat__text-on-inverse); + --str-chat__control-remove-control-border: var(--str-chat__border-core-on-inverse); + --str-chat__control-progress-bar-fill: var(--str-chat__accent-neutral); + --str-chat__control-progress-bar-track: var(--str-chat__background-core-surface-strong); + --str-chat__control-toggle-switch-bg: var(--str-chat__accent-neutral); + --str-chat__control-toggle-switch-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-toggle-switch-bg-disabled: var( + --str-chat__background-utility-disabled + ); + --str-chat__control-toggle-switch-knob: var(--str-chat__background-core-on-accent); + --str-chat__control-playback-toggle-text: var(--str-chat__text-primary); + --str-chat__control-playback-toggle-border: var(--str-chat__border-core-default); + --str-chat__control-checkbox-border: var(--str-chat__border-core-default); + --str-chat__control-checkbox-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-checkbox-icon: var(--str-chat__text-on-accent); + --str-chat__control-play-button-icon: var(--str-chat__text-on-accent); + --str-chat__control-playback-thumb-bg-default: var( + --str-chat__background-core-on-accent + ); + --str-chat__control-playback-thumb-bg-active: var(--str-chat__accent-primary); + --str-chat__control-playback-thumb-border-active: var( + --str-chat__border-core-on-accent + ); + --str-chat__control-radio-button-border: var(--str-chat__border-core-default); + --str-chat__control-radio-button-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-radio-button-indicator: var(--str-chat__text-on-accent); + --str-chat__control-radio-check-border: var(--str-chat__border-core-default); + --str-chat__control-radio-check-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-radio-check-icon: var(--str-chat__text-on-accent); + --str-chat__control-chip-border: var(--str-chat__border-core-default); + --str-chat__control-chip-text: var(--str-chat__text-primary); + --str-chat__avatar-presence-bg-offline: var( + --str-chat__accent-neutral + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__avatar-presence-border: var( + --str-chat__border-core-on-inverse + ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --str-chat__chat-text-typing-indicator: var( + --str-chat__chat-text-incoming + ); /** Typing indicator chip. */ + --str-chat__chat-poll-progress-track-incoming: var( + --str-chat__control-progress-bar-track + ); + --str-chat__chat-poll-progress-fill-incoming: var( + --str-chat__control-progress-bar-fill + ); } diff --git a/src/styling/variables/font.scss b/src/styling/variables/font.scss index 508fb5a8c..4b3436dd7 100644 --- a/src/styling/variables/font.scss +++ b/src/styling/variables/font.scss @@ -2,88 +2,88 @@ // ================================================================================= // @mixin text-heading-xs { font: var(--str-chat__font-heading-xs); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-sm { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-md { font: var(--str-chat__font-heading-md); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-lg { font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } // BODY // ================================================================================= // @mixin text-body-default { font: var(--str-chat__font-body-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-body-emphasis { font: var(--str-chat__font-body-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-body-link { font: var(--str-chat__font-body-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-body-link-emphasis { font: var(--str-chat__font-body-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // CAPTION // ================================================================================= // @mixin text-caption-default { font: var(--str-chat__font-caption-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-caption-emphasis { font: var(--str-chat__font-caption-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-caption-link { font: var(--str-chat__font-caption-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-caption-link-emphasis { font: var(--str-chat__font-caption-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // METADATA // ================================================================================= // @mixin text-metadata-default { font: var(--str-chat__font-metadata-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-metadata-emphasis { font: var(--str-chat__font-metadata-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-metadata-link { font: var(--str-chat__font-metadata-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-metadata-link-emphasis { font: var(--str-chat__font-metadata-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // NUMERIC @@ -96,153 +96,160 @@ // ================================================================================= // @mixin text-numeric-sm { font: var(--str-chat__font-numeric-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-md { font: var(--str-chat__font-numeric-md); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-lg { font: var(--str-chat__font-numeric-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-xl { font: var(--str-chat__font-numeric-xl); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat { /* 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; + var(--str-chat__typography-font-family-sans), system-ui, -apple-system, + BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, + sans-serif; // HEADING // ================================================================================= // - --str-chat__font-heading-xs: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-heading-xs: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-sm: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-heading-sm: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-md: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-lg) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); + --str-chat__font-heading-md: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-lg) / + var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-lg: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xl) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); + --str-chat__font-heading-lg: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xl) / + var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family); // -------------------- // BODY // ================================================================================= // - --str-chat__font-body-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-default: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-emphasis: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-link: normal var(--typography-font-weight-regular) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-link-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- // CAPTION // ================================================================================= // - --str-chat__font-caption-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-caption-default: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__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-normal) - var(--str-chat__font-family); + --str-chat__font-caption-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__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-normal) - var(--str-chat__font-family); + --str-chat__font-caption-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__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-normal) - var(--str-chat__font-family); + --str-chat__font-caption-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- // METADATA // ================================================================================= // - --str-chat__font-metadata-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-default: normal + var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-link: normal var(--typography-font-weight-regular) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-link-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- // NUMERIC // ================================================================================= // - --str-chat__font-numeric-sm: normal var(--typography-font-weight-bold) - var(--typography-font-size-micro) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-sm: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-micro) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-md: normal var(--typography-font-weight-bold) - var(--typography-font-size-xxs) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-md: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-xxs) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-lg: normal var(--typography-font-weight-bold) - var(--typography-font-size-xs) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-lg: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-xs) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-xl: normal var(--typography-font-weight-bold) - var(--typography-font-size-sm) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-xl: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-sm) / 100% var(--str-chat__font-family); // -------------------- } diff --git a/src/styling/variables/shadows.scss b/src/styling/variables/shadows.scss index 2957d4d62..b58653d2f 100644 --- a/src/styling/variables/shadows.scss +++ b/src/styling/variables/shadows.scss @@ -13,18 +13,18 @@ to create clearer separation from the base surface. .str-chat, .str-chat__theme-light { - --str-chat__box-shadow-1: var(--light-elevation-1); - --str-chat__box-shadow-2: var(--light-elevation-2); - --str-chat__box-shadow-3: var(--light-elevation-3); - --str-chat__box-shadow-4: var(--light-elevation-4); + --str-chat__box-shadow-1: var(--str-chat__light-elevation-1); + --str-chat__box-shadow-2: var(--str-chat__light-elevation-2); + --str-chat__box-shadow-3: var(--str-chat__light-elevation-3); + --str-chat__box-shadow-4: var(--str-chat__light-elevation-4); } .str-chat__theme-dark, .str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse { - --str-chat__box-shadow-1: var(--dark-elevation-1); - --str-chat__box-shadow-2: var(--dark-elevation-2); - --str-chat__box-shadow-3: var(--dark-elevation-3); - --str-chat__box-shadow-4: var(--dark-elevation-4); + --str-chat__box-shadow-1: var(--str-chat__dark-elevation-1); + --str-chat__box-shadow-2: var(--str-chat__dark-elevation-2); + --str-chat__box-shadow-3: var(--str-chat__dark-elevation-3); + --str-chat__box-shadow-4: var(--str-chat__dark-elevation-4); }