@stream-io/stream-chat-css
Version:
Bundled CSS for Stream Chat web SDKs
193 lines (171 loc) • 178 kB
text/mdx
---
id: component-variables
sidebar_position: 3
title: Component variables
keywords: [v2, theme-v2, theming-v2, theming, component variables]
---
import SDKSpecific from './SDKSpecific';
import V2Warning from './V2Warning';
:::info
<SDKSpecific name='angular'>
<V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>
<SDKSpecific name='react'>
<V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>
:::
CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
- Global
- Component
This page contains information about the component variables.
## AttachmentList
### Theme variables
| Name | Value(s) | Description |
| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `--str-chat__attachment-list-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table> | The border radius used for the borders of the component |
| `--str-chat__attachment-list-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the component |
| `--str-chat__attachment-list-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of the component |
| `--str-chat__attachment-list-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of the component |
| `--str-chat__attachment-list-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of the component |
| `--str-chat__attachment-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__attachment-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__attachment-list-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to the component |
| `--str-chat__image-attachment-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-attachment-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
| `--str-chat__image-gallery-attachment-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image gallery attachments |
| `--str-chat__image-gallery-attachment-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of image gallery attachments |
| `--str-chat__image-gallery-attachment-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of image gallery attachments |
| `--str-chat__image-gallery-attachment-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of image gallery attachments |
| `--str-chat__image-gallery-attachment-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of image gallery attachments |
| `--str-chat__image-gallery-attachment-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of image gallery attachments |
| `--str-chat__image-gallery-attachment-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of image gallery attachments |
| `--str-chat__image-gallery-attachment-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to image gallery attachments |
| `--str-chat__image-gallery-attachment-overlay` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table> | Overlay color applied to image gallery attachments |
| `--str-chat__image-gallery-attachment-overlay-text-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-overlay-text-color )`</td></tr></table> | Text colors used on overlay applied to image gallery attachments |
| `--str-chat__card-attachment-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table> | The border radius used for the borders of card attachments |
| `--str-chat__card-attachment-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of card attachments |
| `--str-chat__card-attachment-link-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The text color of links inside card attachments |
| `--str-chat__card-attachment-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of card attachments |
| `--str-chat__card-attachment-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of card attachments |
| `--str-chat__card-attachment-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of card attachments |
| `--str-chat__card-attachment-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of card attachments |
| `--str-chat__card-attachment-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of card attachments |
| `--str-chat__card-attachment-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to card attachments |
| `--str-chat__file-attachment-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of file attachments |
| `--str-chat__file-attachment-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of file attachments |
| `--str-chat__file-attachment-secondary-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text/icon color of file attachments for low emphasis texts (for example file size) |
| `--str-chat__file-attachment-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of file attachments |
| `--str-chat__file-attachment-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of file attachments |
| `--str-chat__file-attachment-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of file attachments |
| `--str-chat__file-attachment-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of file attachments |
| `--str-chat__file-attachment-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of file attachments |
| `--str-chat__file-attachment-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to file attachments |
| `--str-chat__audio-attachment-widget-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | Border radius applied audio widget |
| `--str-chat__audio-attachment-widget-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | Text color used in audio widget |
| `--str-chat__audio-attachment-widget-secondary-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | Border radius applied audio widget |
| `--str-chat__audio-attachment-widget-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The text/icon color for low emphasis texts (for example file size) in audio widget |
| `--str-chat__audio-attachment-widget-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of audio widget |
| `--str-chat__audio-attachment-widget-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of audio widget |
| `--str-chat__audio-attachment-widget-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of audio widget |
| `--str-chat__audio-attachment-widget-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of audio widget |
| `--str-chat__audio-attachment-widget-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to audio widget |
| `--str-chat__audio-attachment-controls-button-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table> | Border radius applied to the play / pause button of audio widget |
| `--str-chat__audio-attachment-controls-button-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | Text color applied to audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | Background color applied to audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-pressed-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__surface-color )`</td></tr></table> | Background color applied to audio widget's play / pause button when in pressed (active) state |
| `--str-chat__audio-attachment-controls-button-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of audio widget's play / pause button |
| `--str-chat__audio-attachment-controls-button-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-box-shadow)`</td></tr></table> | Box shadow applied to audio widget's play / pause button |
| `--str-chat__attachment-actions-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table> | The border radius used for attachment actions |
| `--str-chat__attachment-actions-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of attachment actions |
| `--str-chat__attachment-actions-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of attachment actions |
| `--str-chat__attachment-actions-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of attachment actions |
| `--str-chat__attachment-actions-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of attachment actions |
| `--str-chat__attachment-actions-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of attachment actions |
| `--str-chat__attachment-actions-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of attachment actions |
| `--str-chat__attachment-actions-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to attachment actions |
| `--str-chat__attachment-action-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table> | The border radius used for an attachment action |
| `--str-chat__attachment-action-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text/icon color of an attachment action |
| `--str-chat__attachment-action-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of an attachment action |
| `--str-chat__attachment-action-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table> | Top border of an attachment action |
| `--str-chat__attachment-action-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table> | Bottom border of an attachment action |
| `--str-chat__attachment-action-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table> | Left (right in RTL layout) border of an attachment action |
| `--str-chat__attachment-action-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table> | Right (left in RTL layout) border of an attachment action |
| `--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/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)
### Layout variables
| Name | Value(s) | Description |
| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--str-chat__attachment-margin` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__spacing-0_5)`</td></tr><tr><th>`.str-chat__quoted-message-preview`</th></tr><tr><td>`0px`</td></tr></table> | The margin applied to every attachment in the attachment list |
| `--str-chat__gif-height` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 200)`</td></tr></table> | The height of GIFs |
| `--str-chat__attachment-max-width` | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )`</td></tr></table> | The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). |
| `--str-chat__video-height` | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`var(--str-chat__attachment-max-width)`</td></tr></table> | The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio |
| `--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/v3.5.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss)
## AttachmentPreviewList
### Theme variables
| Name | Value(s) | Description |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `--str-chat__attachment-preview-list-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table> | The border radius used for the borders of the component |
| `--str-chat__attachment-preview-list-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the component |
| `--str-chat__attachment-preview-list-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of the component |
| `--str-chat__attachment-preview-list-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of the component |
| `--str-chat__attachment-preview-list-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of the component |
| `--str-chat__attachment-preview-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__attachment-preview-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__attachment-preview-list-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to the component |
| `--str-chat__attachment-preview-close-icon-background` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table> | Background color of the preview delete icon |
| `--str-chat__attachment-preview-close-icon-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-text-color)`</td></tr></table> | Foreground color of the preview delete icon |
| `--str-chat__attachment-preview-retry-icon-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | Color of the upload retry icon |
| `--str-chat__attachment-preview-download-icon-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | Color of the preview download icon |
| `--str-chat__attachment-preview-overlay-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__overlay-color)`</td></tr></table> | Overlay color applied to attachment previews during upload and if an error occured during upload |
| `--str-chat__attachment-preview-image-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table> | The border radius used for the borders of the image preview |
| `--str-chat__attachment-preview-image-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the image preview |
| `--str-chat__attachment-preview-image-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of the image preview |
| `--str-chat__attachment-preview-image-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of the image preview |
| `--str-chat__attachment-preview-image-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of the image preview |
| `--str-chat__attachment-preview-image-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Left (right in RTL layout) border of the image preview |
| `--str-chat__attachment-preview-image-border-inline-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Right (left in RTL layout) border of the image preview |
| `--str-chat__attachment-preview-image-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Box shadow applied to the image preview |
| `--str-chat__attachment-preview-file-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table> | The border radius used for the borders of the file preview |
| `--str-chat__attachment-preview-file-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the file preview |
| `--str-chat__attachment-preview-file-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table> | The background color of the file preview |
| `--str-chat__attachment-preview-file-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table> | Top border of the file preview |
| `--str-chat__attachment-preview-file-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table> | Bottom border of the file preview |
| `--str-chat__attachment-preview-file-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table> | Left (right in RTL layout) border of the file preview |
| `--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/v3.5.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)
## Autocomplete
### Theme variables
| Name | Value(s) | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `--str-chat__autocomplete-menu-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table> | The border radius used for the borders of the component |
| `--str-chat__autocomplete-menu-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the component |
| `--str-chat__autocomplete-menu-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component |
| `--str-chat__autocomplete-menu-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of the component |
| `--str-chat__autocomplete-menu-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of the component |
| `--str-chat__autocomplete-menu-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__autocomplete-menu-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__autocomplete-menu-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table> | Box shadow applied to the component |
| `--str-chat__autocomplete-active-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table> | The background color of a selected autocomplete item |
| `--str-chat__suggestion-list-container-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table> | The border radius used for the borders of the component (ReactSDK) |
| `--str-chat__suggestion-list-container-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The text/icon color of the component (ReactSDK) |
| `--str-chat__suggestion-list-container-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component (ReactSDK) |
| `--str-chat__suggestion-list-container-border-block-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Top border of the component (ReactSDK) |
| `--str-chat__suggestion-list-container-border-block-end` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table> | Bottom border of the component (ReactSDK) |
| `--str-chat__suggestion-list-container-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 (ReactSDK) |
| `--str-chat__suggestion-list-container-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 (ReactSDK) |
| `--str-chat__suggestion-list-container-box-shadow` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table> | Box shadow applied to the component (ReactSDK) |
| `--str-chat__suggestion-list-item--selected-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table> | The background color of a selected autocomplete item (ReactSDK) |
| `--str-chat__slash-command-border-radius` | <table><tr><th>`.str