diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
index fa1602fa0..046d29cc1 100644
--- a/docusaurus/docs/React/basics/getting-started.mdx
+++ b/docusaurus/docs/React/basics/getting-started.mdx
@@ -76,22 +76,37 @@ body,
   display: flex;
   height: 100%;
 
-  .str-chat-channel-list {
+  .str-chat__channel-list {
     position: fixed;
     z-index: 1;
+    height: 100%;
     width: 0;
+    flex-shrink: 0;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
 
     &--open {
-      width: 100%;
+      width: 30%;
+      position: fixed;
     }
+    transition: width 0.3s ease-out;
+  }
+
+  .str-chat__channel {
+    flex: 1;
+    min-width: 0;
   }
 
-  .str-chat-channel {
-    width: 100%;
+  .str-chat__main-panel {
+    min-width: 0;
+    flex: 1;
+
+    &--thread-open {
+      display: none;
+    }
   }
 
   .str-chat__thread {
-    width: 100%;
+    flex: 1;
     height: 100%;
     position: fixed;
     z-index: 1;
@@ -117,9 +132,8 @@ body,
   }
 
   @media screen and (min-width: 768px) {
-    .str-chat-channel-list {
+    .str-chat__channel-list {
       width: 30%;
-      max-width: 420px;
       position: initial;
       z-index: 0;
     }
@@ -128,11 +142,24 @@ body,
       position: initial;
       z-index: 0;
     }
+
+    .str-chat__channel-header .str-chat__header-hamburger {
+      display: none;
+    }
   }
 
   @media screen and (min-width: 1024px) {
+    .str-chat__main-panel {
+      min-width: 0;
+
+      &--thread-open {
+        max-width: 55%;
+        display: flex;
+      }
+    }
+
     .str-chat__thread {
-      width: 45%;
+      max-width: 45%;
     }
 
     .str-chat__channel-header .str-chat__header-hamburger {
diff --git a/docusaurus/docs/React/components/core-components/thread.mdx b/docusaurus/docs/React/components/core-components/thread.mdx
index 7b419f463..0f14cd15a 100644
--- a/docusaurus/docs/React/components/core-components/thread.mdx
+++ b/docusaurus/docs/React/components/core-components/thread.mdx
@@ -169,14 +169,6 @@ Controls injection of <GHComponentLink text='DateSeparator' path='/DateSeparator
 | ------- | ------- |
 | boolean | false   |
 
-### fullWidth
-
-If true, displays the thread at 100% width of its parent container, useful for mobile styling.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### Input
 
 Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.
diff --git a/docusaurus/docs/React/components/utility-components/window.mdx b/docusaurus/docs/React/components/utility-components/window.mdx
index 9535735a1..80f6f849e 100644
--- a/docusaurus/docs/React/components/utility-components/window.mdx
+++ b/docusaurus/docs/React/components/utility-components/window.mdx
@@ -24,14 +24,6 @@ This ensures correct width changes in the main channel when opening and closing
 
 ## Props
 
-### hideOnThread
-
-The boolean to show or hide the `Window` when a `Thread` is active.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### thread
 
 An optional prop to manually trigger the opening of a thread.
diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx
index 233c46013..9dbae0086 100644
--- a/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx
+++ b/docusaurus/docs/React/release-guides/upgrade-to-v12.mdx
@@ -151,6 +151,37 @@ The `Avatar` styles are applied through CSS from the version 12 upwards. Therefo
 3\. If needed, apply custom styles to newly added classes based on the component that renders the `Avatar`.
 :::
 
+## Removal of styling props
+
+### Removal of Window's hideOnThread prop
+
+The prop boolean `hideOnThread` enabled us to control, whether class `str-chat__main-panel--hideOnThread` was attached to `Window` component's root `<div/>`. By assigning this class a CSS rule `display: none` in the default SDK's stylesheet we hid the contents of `Window`. We decided to simplify the logic in this case:
+
+1. class `str-chat__main-panel--hideOnThread` was replaced by class `str-chat__main-panel--thread-open`
+2. the class `str-chat__main-panel--thread-open` is attached to the root `<div/>` always, when thread is open
+3. the default value of `hideOnThread` prop was `false` (`Window` contents was not hidden upon opening a thread) and so integrators still have to opt in to hiding the contents upon opening a thread by adding rule `display: none` to `str-chat__main-panel--thread-open` class
+
+:::important
+**Action required**
+If your application renders `Window` with `hideOnThread` enabled, and you want to keep this behavior add the following rule to your CSS:
+
+```css
+.str-chat__main-panel--thread-open {
+  display: none;
+}
+
+.str-chat__main-panel--thread-open + .str-chat__thread {
+  // occupy the whole space previously occupied by the main message list container
+  flex: 1;
+}
+```
+
+:::
+
+### Removal of Thread's fullWidth prop
+
+Setting the `fullWidth` value to `true` let to assignment of class `str-chat__thread--full` to the `Thread` component's root `<div/>`. This class had support in the SDK's legacy stylesheet only. With the approach of avoiding styling React components via props, the prop has been removed along with the legacy stylesheet. Read more about the the stylesheet removal in the [section **Removal of deprecated components**](#removal-of-deprecated-components).
+
 ## Removal of deprecated components
 
 ### Attachment rendering utility functions
@@ -330,12 +361,13 @@ Replace the removed classes with their alternatives in the custom CSS.
 | `QuotedMessagePreview` root `<div/>`                                                      | `quoted-message-preview`                                                            | no alternative                                                                          |
 | `QuotedMessagePreview`                                                                    | `quoted-message-preview-content`                                                    | `str-chat__quoted-message-preview`                                                      |
 | `QuotedMessagePreview`                                                                    | `quoted-message-preview-content-inner`                                              | `str-chat__quoted-message-bubble`                                                       |
-| `MessageList`                                                                             | `str-chat__list--thread`                                                            | `str-chat__thread-list`                                                                 |
+| `MessageList`                                                                             | `str-chat__thread--full`                                                            | no alternative                                                                          |
 | `InfiniteScroll` rendered by `MessageList`                                                | `str-chat__reverse-infinite-scroll`                                                 | `str-chat__message-list-scroll`                                                         |
 | `ScrollToBottomButton`                                                                    | `str-chat__message-notification-right`                                              | `str-chat__message-notification-scroll-to-latest`                                       |
 | `ScrollToBottomButton`                                                                    | `str-chat__message-notification-scroll-to-latest-unread-count`                      | `str-chat__jump-to-latest-unread-count`                                                 |
 | `ReactionsListModal`                                                                      | `emoji`                                                                             | `str-chat__message-reaction-emoji` or `str-chat__message-reaction-emoji--with-fallback` |
 | `SimpleReactionList`                                                                      | `str-chat__simple-reactions-list-tooltip`                                           | no alternative - markup removal                                                         |
+| `Thread`                                                                                  | `str-chat__list--thread`                                                            | `str-chat__thread-list`                                                                 |
 | `ThreadHeader`                                                                            | `str-chat__square-button`                                                           | `str-chat__close-thread-button`                                                         |
 | `TypingIndicator`                                                                         | `str-chat__typing-indicator__avatars`                                               | no alternative - markup removal                                                         |
 
diff --git a/docusaurus/docs/React/theming/component-variables.mdx b/docusaurus/docs/React/theming/component-variables.mdx
index 838a8ce3e..b43e552af 100644
--- a/docusaurus/docs/React/theming/component-variables.mdx
+++ b/docusaurus/docs/React/theming/component-variables.mdx
@@ -107,7 +107,7 @@ This page contains information about the component variables.
 | `--str-chat__attachment-action-box-shadow`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to an attachment action                                                                                 |
 | `--str-chat__attachment-action-active-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                                                             | The text/icon color of an attachment action while in pressed state                                                         |
 
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)
+Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss)
 
 ### Layout variables
 
@@ -122,7 +122,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v
 | `--str-chat__scraped-image-height`                    | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))`</td></tr></table>                              | The height of scraped images, the default value is optimized for 1.91:1 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `--str-chat__scraped-video-height`                    | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(9 / 16))`</td></tr></table>                                | The height of scraped videos, the default value is optimized for 16:9 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss)
+Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-layout.scss)
 
 ## AttachmentPreviewList
 
@@ -160,7 +160,7 @@ Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v
 | `--str-chat__attachment-preview-file-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Right (left in RTL layout) border of the file preview                                            |
 | `--str-chat__attachment-preview-file-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the file preview                                                           |
 
-Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)
+Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)
 
 ## Autocomplete
 
@@ -213,7 +213,7 @@ Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css
 | `--str-chat__mention-list-emoji-item-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list      |
 | `--str-chat__mention-list-emoji-item-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the emoji suggestion item in the autocomplete list                             |
 
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)
+Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss)
 
 ### Layout variables
 
@@ -221,7 +221,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.
 | ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | `--str-chat__mention-list-emoji-item-font-family` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__font-family)`</td></tr></table> | The font used in the emoji suggestion item in the autocomplete list |
 
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-layout.scss)
+Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-layout.scss)
 
 ## Avatar
 
@@ -240,7 +240,7 @@ Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.
 | `--str-chat__avatar-online-indicator-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__info-color)`</td></tr></table>           | The color of the online indicator (only available in Angular SDK)         |
 | `--str-chat__avatar-online-indicator-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table> | The border radius of the online indicator (only available in Angular SDK) |
 
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-theme.scss)
+Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-theme.scss)
 
 ### Layout variables
 
@@ -248,7 +248,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc
 | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `--str-chat__avatar-size` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 32)`</td></tr><tr><th>`.str-chat .str-chat__avatar--autocomplete-item,.str-chat .stream-chat__avatar--autocomplete-item`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr><tr><th>`.str-chat .str-chat__avatar--channel-header,.str-chat .stream-chat__avatar--channel-header`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 40)`</td></tr><tr><th>`.str-chat .str-chat__avatar--channel-preview,.str-chat .stream-chat__avatar--channel-preview`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 49)`</td></tr><tr><th>`.str-chat .str-chat__avatar--quoted-message-sender,.str-chat .stream-chat__avatar--quoted-message-sender`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 20)`</td></tr><tr><th>`.str-chat .str-chat__avatar--reaction,.str-chat .stream-chat__avatar--reaction`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr><tr><th>`.str-chat .str-chat__avatar--message-status,.str-chat .stream-chat__avatar--message-status`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr></table> |             |
 
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-layout.scss)
+Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-layout.scss)
 
 ## Channel
 
@@ -268,7 +268,7 @@ Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc
 | `--str-chat__channel-empty-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text color used when no channel is selected         |
 | `--str-chat__channel-loading-state-color`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>          | The color of the loading indicator                      |
 
-Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss)
+Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss)
 
 ## ChannelHeader
 
@@ -286,7 +286,7 @@ Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-r
 | `--str-chat__channel-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                      |
 | `--str-chat__channel-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display member information about the channel |
 
-Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)
+Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)
 
 ## ChannelList
 
@@ -315,7 +315,7 @@ Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5
 | `--str-chat__channel-list-load-more-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-disabled-color)`</td></tr></table>              | The text/icon color of the load more button in disabled state  |
 | `--str-chat__channel-list-empty-indicator-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                | The text/icon color for the empty list state                   |
 
-Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss)
+Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss)
 
 ## ChannelPreview
 
@@ -344,7 +344,7 @@ Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0
 | `--str-chat__channel-preview-message-status-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>             | The color of the message status indicator icon (only available in Angular)       |
 | `--str-chat__channel-preview-message-time-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__message-secondary-color)`</td></tr></table>   | The color of the text that displays the message time (only available in Angular) |
 
-Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)
+Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)
 
 ## ChannelSearch - Only available in React SDK
 
@@ -404,7 +404,7 @@ Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v
 | `--str-chat__channel-search-results-empty-border-inline-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
 | `--str-chat__channel-search-results-empty-border-inline-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
 
-Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)
+Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)
 
 ## CircleFAButton
 
@@ -422,7 +422,7 @@ Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5
 | `--str-chat__circle-fab-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component      |
 | `--str-chat__circle-fab-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |
 
-Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)
+Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)
 
 ## CTAButton
 
@@ -442,7 +442,7 @@ Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v
 | `--str-chat__cta-button-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>       | The background color of the component in disabled state |
 | `--str-chat__cta-button-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>    | The text/icon color of the component in disabled state  |
 
-Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss)
+Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss)
 
 ## EditMessageForm
 
@@ -460,7 +460,7 @@ Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0
 | `--str-chat__edit-message-modal-button-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5      |
 | `--str-chat__edit-message-modal-button-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5                     |
 
-Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)
+Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)
 
 ## Icon - Only available in Angular SDK
 
@@ -470,7 +470,7 @@ Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/
 | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
 | `--str-chat-icon-color` | <table><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download`</th></tr><tr><td>`var(--str-chat__attachment-preview-download-icon-color)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`</th></tr><tr><td>`var(--str-chat__attachment-preview-close-icon-color)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`</th></tr><tr><td>`var(--str-chat__attachment-preview-retry-icon-color)`</td></tr><tr><th>`.str-chat__empty-channel`</th></tr><tr><td>`var(--str-chat__channel-empty-color)`</td></tr><tr><th>`.str-chat__channel-list .str-chat__channel-list-empty`</th></tr><tr><td>`var(--str-chat__channel-list-empty-indicator-color)`</td></tr><tr><th>`.str-chat__channel-preview .str-chat__channel-preview-messenger--status`</th></tr><tr><td>`var(--str-chat__channel-preview-message-status-color)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr><tr><th>`.str-chat__icon--error`</th></tr><tr><td>`var(--str-chat__danger-color)`</td></tr><tr><th>`.str-chat__image-carousel .str-chat__image-carousel-stepper`</th></tr><tr><td>`var(--str-chat__image-carousel-stepper-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-options`</th></tr><tr><td>`var(--str-chat__message-options-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-status`</th></tr><tr><td>`var(--str-chat__message-status-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-error-icon`</th></tr><tr><td>`var(--str-chat__message-error-message-color)`</td></tr><tr><th>`.str-chat__unread-messages-notification`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__file-input-container`</th></tr><tr><td>`var(--str-chat__message-input-tools-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button`</th></tr><tr><td>`var(--str-chat__message-send-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button:disabled`</th></tr><tr><td>`var(--str-chat__message-send-disabled-color)`</td></tr><tr><th>`.str-chat__jump-to-latest-message`</th></tr><tr><td>`var(--str-chat__jump-to-latest-message-unread-count-background-color)`</td></tr><tr><th>`.str-chat__modal .str-chat__modal__close-button`</th></tr><tr><td>`var(--str-chat__modal-close-icon-color)`</td></tr></table> | The color of the icon, only available in Angular v5+ |
 
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Icon/Icon-theme.scss)
+Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Icon/Icon-theme.scss)
 
 ### Layout variables
 
@@ -479,7 +479,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1
 | `--str-chat-icon-height` | <table><tr><th>`.str-chat__attachment-list .str-chat__message-attachment-download-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__attachment-list .str-chat__attachment-type-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 37)`</td></tr><tr><th>`.str-chat__message-attachment-audio-widget--play-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 37)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__empty-channel`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 136)`</td></tr><tr><th>`.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 136)`</td></tr><tr><th>`.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__image-carousel .str-chat__image-carousel-stepper`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr><tr><th>`.str-chat__message .str-chat__message-options`</th></tr><tr><td>`calc(var(--str-chat__message-options-button-size) * 0.7)`</td></tr><tr><th>`.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr><tr><th>`.str-chat__unread-messages-notification`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 32)`</td></tr><tr><th>`.str-chat__modal--open .str-chat__modal__close-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 28)`</td></tr></table> | The height of the icon, only available in Angular v5+ |
 | `--str-chat-icon-width`  | <table><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`</th></tr><tr><td>`auto`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`auto`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | The width of the icon, only available in Angular v5+  |
 
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Icon/Icon-layout.scss)
+Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Icon/Icon-layout.scss)
 
 ## ImageCarousel - Only available in Angular SDK
 
@@ -489,7 +489,7 @@ Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1
 | ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ |
 | `--str-chat__image-carousel-stepper-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The color of the stepper icon. |
 
-Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss)
+Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss)
 
 ## LoadingIndicator
 
@@ -499,7 +499,7 @@ Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v5
 | ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- |
 | `--str-chat__loading-indicator-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The color of the loading indicator |
 
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss)
+Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss)
 
 ### Layout variables
 
@@ -507,7 +507,7 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree
 | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
 | `--str-chat__loading-indicator-size` | <table><tr><th>`.str-chat__attachment-preview-list`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 18)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr></table> | The size of the loading indicator, only available in Angular v5+ |
 
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss)
+Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss)
 
 ## Message
 
@@ -574,7 +574,7 @@ Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree
 | `--str-chat__translation-notice-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text color of the translation notice that is displayed if a message is translated with auto-translation  |
 | `--str-chat__translation-notice-active-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>     | The hover color of the translation notice that is displayed if a message is translated with auto-translation |
 
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)
+Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)
 
 ### Layout variables
 
@@ -589,7 +589,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-r
 | `--str-chat-message-options-size`                            | <table><tr><th>`.str-chat__message`</th></tr><tr><td>`calc(3 * var(--str-chat__message-options-button-size))`</td></tr><tr><th>`.str-chat__message.str-chat__message-without-touch-support`</th></tr><tr><td>`calc(1 * var(--str-chat__message-options-button-size))`</td></tr></table>                                                                                                                                                                                                                                                 |                                                                                                                              |
 | `--str-chat__message-edited-timestamp-height`                | <table><tr><th>`.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp`</th></tr><tr><td>`1rem`</td></tr></table>                                                                                                                                                                                                                                                                                         |                                                                                                                              |
 
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-layout.scss)
+Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-layout.scss)
 
 ## MessageActionsBox
 
@@ -615,7 +615,7 @@ Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-r
 | `--str-chat__message-actions-box-item-border-inline-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of an item in the message actions box      |
 | `--str-chat__message-actions-box-item-box-shadow`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to an item in the message actions box                     |
 
-Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)
+Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)
 
 ## MessageBouncePrompt
 
@@ -633,7 +633,7 @@ Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tre
 | `--str-chat__message-bounce-button-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Right (left in RTL layout) button of the component |
 | `--str-chat__message-bounce-button-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Box shadow applied to the button                   |
 
-Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)
+Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)
 
 ## MessageInput
 
@@ -697,7 +697,7 @@ Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/t
 | `--str-chat__cooldown-border-inline-end`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the cooldown timer                                                            |
 | `--str-chat__cooldown-box-shadow`                                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the cooldown timer                                                                           |
 
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss)
+Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss)
 
 ### Layout variables
 
@@ -705,7 +705,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.
 | ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- |
 | `--str-chat__dropzone-container-backdrop-filter` | <table><tr><th>`.str-chat`</th></tr><tr><td>`blur(3px)`</td></tr></table> | The backdrop filter applied to the dropzone container |
 
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-layout.scss)
+Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-layout.scss)
 
 ## MessageList
 
@@ -735,7 +735,7 @@ Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.
 | `--str-chat__thread-head-start-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                   | The color used for displaying thread replies and thread separator at the start of a thread |
 | `--str-chat__thread-head-start-border-block-end-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                             | The color used for the separator below the first message in a thread                       |
 
-Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss)
+Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss)
 
 ## MessageNotification - Only available in React SDK
 
@@ -752,7 +752,7 @@ Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0
 | `--str-chat__message-notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Box shadow applied to the component                     |
 | `--str-chat__message-notification-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table> | The text/icon color of the component                    |
 
-Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)
+Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageNotification/MessageNotification-theme.scss)
 
 ## MessageReactions
 
@@ -780,7 +780,7 @@ Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/t
 | `--str-chat__own-message-reaction-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-surface-color-low-emphasis )`</td></tr></table> | The background color of a message reaction, if the user reacted with that reaction |
 | `--str-chat__messsage-reactions-details--selected-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`solid var(--str-chat__primary-color)`</td></tr></table>                  |                                                                                    |
 
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)
+Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss)
 
 ### Layout variables
 
@@ -788,7 +788,7 @@ Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree
 | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
 | `--str-chat__stream-emoji-size` | <table><tr><th>`.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big`</th></tr><tr><td>`1em`</td></tr></table> |             |
 
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-layout.scss)
+Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-layout.scss)
 
 ## MessageReactionsSelector
 
@@ -815,7 +815,7 @@ Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree
 | `--str-chat__message-reactions-option-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                                                                   | Right (left in RTL layout) border of the component      |
 | `--str-chat__message-reactions-option-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                                                                   | Box shadow applied to the component                     |
 
-Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)
+Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)
 
 ## Modal
 
@@ -836,7 +836,7 @@ Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-
 | `--str-chat__modal-close-icon-background`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The background color of the close button                                                                         |
 | `--str-chat__modal-close-icon-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>          | The icon color of the close button                                                                               |
 
-Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss)
+Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss)
 
 ## Notification
 
@@ -853,7 +853,7 @@ Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.
 | `--str-chat__notification-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Right (left in RTL layout) border of the component      |
 | `--str-chat__notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>        | Box shadow applied to the component                     |
 
-Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss)
+Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss)
 
 ## NotificationList
 
@@ -870,7 +870,7 @@ Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.
 | `--str-chat__notification-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
 | `--str-chat__notification-list-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                     |
 
-Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/NotificationList/NotificationList-theme.scss)
+Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/NotificationList/NotificationList-theme.scss)
 
 ## Thread
 
@@ -896,7 +896,7 @@ Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree
 | `--str-chat__thread-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the thread header                                        |
 | `--str-chat__thread-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display less emphasized text in the channel header |
 
-Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss)
+Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss)
 
 ## Tooltip
 
@@ -913,7 +913,7 @@ Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc
 | `--str-chat__tooltip-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |
 | `--str-chat__tooltip-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 20px var(--str-chat__box-shadow-color)`</td></tr></table>  | Box shadow applied to the component                     |
 
-Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss)
+Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss)
 
 ## TypingIndicator
 
@@ -931,7 +931,7 @@ Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-r
 | `--str-chat__typing-indicator-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                           |
 | `--str-chat__typing-indicator-dot-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>              | Background color of the animated dots in the typing indicator |
 
-Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)
+Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)
 
 ## VirtualizedMessageList - Only available in React SDK
 
@@ -948,5 +948,5 @@ Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/
 | `--str-chat__virtual-list-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Left (right in RTL layout) border of the component      |
 | `--str-chat__virtual-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Right (left in RTL layout) border of the component      |
 
-Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)
+Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)
 
diff --git a/docusaurus/docs/React/theming/global-variables.mdx b/docusaurus/docs/React/theming/global-variables.mdx
index edebf1c34..13bebae64 100644
--- a/docusaurus/docs/React/theming/global-variables.mdx
+++ b/docusaurus/docs/React/theming/global-variables.mdx
@@ -26,64 +26,64 @@ You can read about each category in detail in the tables below.
 
 | Name                                             | Value(s)                                                                                                                                                                                                 | Description                                                                                                        | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__primary-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue400)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable                                          | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__primary-overlay-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 95, 255, 0.6)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(51, 126, 255, 0.6)`</td></tr></table>         | Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel                             | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__primary-color-low-emphasis`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue700)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `--str-chat__active-primary-color`               | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr></table>     | Used to indicate that a UI element with primary color is in an active state                                        | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `--str-chat__on-primary-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | If the primary color is used as a background, text/icons are displayed in this color                               | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `--str-chat__background-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__secondary-background-color`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `--str-chat__primary-surface-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue900)`</td></tr></table>     | Used as a background color to give emphasis, but less vibrant than the primary color                               | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `--str-chat__primary-surface-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue950)`</td></tr></table>      | Used as a background color to give emphasis, but less vibrant than the primary surface color                       | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__surface-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey700)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `--str-chat__secondary-surface-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey200)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey800)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__tertiary-surface-color`             | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__text-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>      | The main color used for texts/icons                                                                                | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
-| `--str-chat__text-low-emphasis-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr></table>     | Used for texts/icons that need less emphasis                                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `--str-chat__disabled-color`                     | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey600)`</td></tr></table>     | Used for displaying disabled UI elements (typically buttons)                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `--str-chat__on-disabled-color`                  | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if disabled color is used as a background color                                          | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__danger-color`                       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red600)`</td></tr></table>       | Used for error messages, and destructive actions                                                                   | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__message-highlight-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__yellow100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__yellow900)`</td></tr></table> | The background color used to highlight a message when jumping to a message. Only available in React SDK.           | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__unread-badge-color`                 | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr></table>       | Used for displaying the unread badge                                                                               | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__on-unread-badge-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if unread badge color is used as a background color                                      | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__overlay-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(252, 252, 252, 0.9)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.7)`</td></tr></table>           | The background color used for overlays                                                                             | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__secondary-overlay-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.2)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.4)`</td></tr></table>                 | The background color used for subtle overlays                                                                      | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__secondary-overlay-text-color`       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | The text/icon color used on subtle overlays                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `--str-chat__opaque-surface-background-color`    | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(250, 250, 250, 0.85)`</td></tr></table>          | The background color used for opaque surfaces                                                                      | [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__opaque-surface-text-color`          | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | The text color used on opaque surfaces                                                                             | [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__box-shadow-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.18)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr></table>                | If a component has a box shadow applied to it, this will be the color used for the shadow                          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__info-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr></table>   | Used for online indicator and success messages                                                                     | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `--str-chat__primary-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue400)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable                                          | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `--str-chat__primary-overlay-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 95, 255, 0.6)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(51, 126, 255, 0.6)`</td></tr></table>         | Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel                             | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__primary-color-low-emphasis`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue700)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `--str-chat__active-primary-color`               | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr></table>     | Used to indicate that a UI element with primary color is in an active state                                        | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `--str-chat__on-primary-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | If the primary color is used as a background, text/icons are displayed in this color                               | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `--str-chat__background-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `--str-chat__secondary-background-color`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `--str-chat__primary-surface-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue900)`</td></tr></table>     | Used as a background color to give emphasis, but less vibrant than the primary color                               | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `--str-chat__primary-surface-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue950)`</td></tr></table>      | Used as a background color to give emphasis, but less vibrant than the primary surface color                       | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `--str-chat__surface-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey700)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `--str-chat__secondary-surface-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey200)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey800)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__tertiary-surface-color`             | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `--str-chat__text-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>      | The main color used for texts/icons                                                                                | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
+| `--str-chat__text-low-emphasis-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr></table>     | Used for texts/icons that need less emphasis                                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `--str-chat__disabled-color`                     | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey600)`</td></tr></table>     | Used for displaying disabled UI elements (typically buttons)                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `--str-chat__on-disabled-color`                  | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if disabled color is used as a background color                                          | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__danger-color`                       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red600)`</td></tr></table>       | Used for error messages, and destructive actions                                                                   | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__message-highlight-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__yellow100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__yellow900)`</td></tr></table> | The background color used to highlight a message when jumping to a message. Only available in React SDK.           | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `--str-chat__unread-badge-color`                 | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr></table>       | Used for displaying the unread badge                                                                               | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__on-unread-badge-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if unread badge color is used as a background color                                      | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__overlay-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(252, 252, 252, 0.9)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.7)`</td></tr></table>           | The background color used for overlays                                                                             | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__secondary-overlay-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.2)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.4)`</td></tr></table>                 | The background color used for subtle overlays                                                                      | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__secondary-overlay-text-color`       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | The text/icon color used on subtle overlays                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--str-chat__opaque-surface-background-color`    | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(250, 250, 250, 0.85)`</td></tr></table>          | The background color used for opaque surfaces                                                                      | [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__opaque-surface-text-color`          | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | The text color used on opaque surfaces                                                                             | [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__box-shadow-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.18)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr></table>                | If a component has a box shadow applied to it, this will be the color used for the shadow                          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `--str-chat__info-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr></table>   | Used for online indicator and success messages                                                                     | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
 ### Typography
 
 | Name                                | Value(s)                                                                                                                                                                                | Description                                                                                         | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__font-family`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif`</td></tr></table> | The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__caption-text`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for caption texts                                                                     | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__caption-medium-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `--str-chat__caption-strong-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`700 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__body-text`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                              | The font used for body texts                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__body-medium-text`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for body texts with emphasize                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `--str-chat__body2-text`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for body texts                                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__body2-medium-text`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                         | The font used for body texts with emphasize                                                         | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__subtitle-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1 rem/1.1.25 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__subtitle-medium-text`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1 rem/1.25 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for subtitle texts with emphasize                                                     | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                          |
-| `--str-chat__subtitle2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__subtitle2-medium-text` | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for subtitle texts with emphasize                                                     | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `--str-chat__headline-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelList/ChannelList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__headline2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.8 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__font-family`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif`</td></tr></table> | The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__caption-text`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for caption texts                                                                     | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                  |
+| `--str-chat__caption-medium-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `--str-chat__caption-strong-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`700 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `--str-chat__body-text`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                              | The font used for body texts                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__body-medium-text`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for body texts with emphasize                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `--str-chat__body2-text`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for body texts                                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `--str-chat__body2-medium-text`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                         | The font used for body texts with emphasize                                                         | [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `--str-chat__subtitle-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1 rem/1.1.25 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss) |
+| `--str-chat__subtitle-medium-text`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1 rem/1.25 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for subtitle texts with emphasize                                                     | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                          |
+| `--str-chat__subtitle2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__subtitle2-medium-text` | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for subtitle texts with emphasize                                                     | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `--str-chat__headline-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelList/ChannelList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--str-chat__headline2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.8 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
 ### Radius
 
 | Name                               | Value(s)                                                              | Description                                      | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__border-radius-xs`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`8px`</td></tr></table>   | Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `--str-chat__border-radius-sm`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`14px`</td></tr></table>  | Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `--str-chat__border-radius-md`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`18px`</td></tr></table>  | Border radius used for rounded elements          | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__border-radius-lg`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`20px`</td></tr></table>  | Border radius used for rounded elements          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `--str-chat__border-radius-circle` | <table><tr><th>`.str-chat`</th></tr><tr><td>`999px`</td></tr></table> | Border radius used for circular elements         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/Modal/Modal-theme.scss) |
+| `--str-chat__border-radius-xs`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`8px`</td></tr></table>   | Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `--str-chat__border-radius-sm`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`14px`</td></tr></table>  | Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `--str-chat__border-radius-md`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`18px`</td></tr></table>  | Border radius used for rounded elements          | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--str-chat__border-radius-lg`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`20px`</td></tr></table>  | Border radius used for rounded elements          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--str-chat__border-radius-circle` | <table><tr><th>`.str-chat`</th></tr><tr><td>`999px`</td></tr></table> | Border radius used for circular elements         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/Modal/Modal-theme.scss) |
 
-All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/_global-theme-variables.scss)
+All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/_global-theme-variables.scss)
 
 
 ## Layout variables
@@ -118,7 +118,7 @@ All global theme variables are defined in: [https://github.com/GetStream/stream-
 | --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
 | `--str-chat__theme-version` | <table><tr><th>`:root`</th></tr><tr><td>`2`</td></tr></table> | The theme version being used, 1 or 2. Used internally by SDKs |
 
-All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.1/src/v2/styles/_global-layout-variables.scss)
+All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v5.0.0-rc.2/src/v2/styles/_global-layout-variables.scss)
 
 
 If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx).