stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

package/dist/scss/v2/Autocomplete/Autocomplete-layout.scss

@@ -0,0 +1,62 @@
+@use '../utils';
+
+// Class defined by Angular mentions
+// !important necessary to override library defined styles
+.mention-menu {
+  padding: var(--str-chat__spacing-2) 0 !important;
+  margin: 0 !important;
+  min-width: 50%;
+
+  .mention-item {
+    padding: 0 !important;
+  }
+}
+
+// React SDK's version of Angular SDK's .dropup (mention-list)
+.str-chat__suggestion-list-container {
+  position: absolute;
+  bottom: var(--str-chat__spacing-7);
+  width: 100%;
+  padding: var(--str-chat__spacing-2) 0;
+
+  .str-chat__suggestion-list {
+    max-height: calc(var(--str-chat__spacing-px) * 320);
+
+    display: flex;
+    flex-direction: column;
+
+    list-style: none;
+    padding: unset;
+    margin: unset;
+  }
+}
+
+.str-chat__slash-command {
+  padding: var(--str-chat__spacing-2_5);
+
+  .str-chat__slash-command-header {
+    .str-chat__slash-command-args {
+      margin-inline-start: var(--str-chat__spacing-2);
+    }
+  }
+}
+
+.str-chat__user-item {
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-2_5);
+  column-gap: var(--str-chat__spacing-2);
+
+  .str-chat__user-item--name {
+    width: 100%;
+  }
+}
+
+.str-chat__emoji-item {
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-2_5);
+  column-gap: var(--str-chat__spacing-2);
+
+  .str-chat__emoji-item--name {
+    width: 100%;
+  }
+}

package/dist/scss/v2/Autocomplete/Autocomplete-theme.scss

@@ -0,0 +1,207 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__autocomplete-menu-border-radius: var(--str-chat__border-radius-xs);
+
+  /* The text/icon color of the component */
+  --str-chat__autocomplete-menu-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__autocomplete-menu-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__autocomplete-menu-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__autocomplete-menu-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__autocomplete-menu-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__autocomplete-menu-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__autocomplete-menu-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+
+  /* The background color of a selected autocomplete item */
+  --str-chat__autocomplete-active-background-color: var(--str-chat__surface-color);
+
+  /* The border radius used for the borders of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-border-radius: var(--str-chat__border-radius-xs);
+
+  /* The text/icon color of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-color: var(--str-chat__text-color);
+
+  /* The background color of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-background-color: var(
+    --str-chat__secondary-background-color
+  );
+
+  /* Top border of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-border-block-start: none;
+
+  /* Bottom border of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component (ReactSDK) */
+  --str-chat__suggestion-list-container-border-inline-end: none;
+
+  /* Box shadow applied to the component (ReactSDK) */
+  --str-chat__suggestion-list-container-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+
+  /* The background color of a selected autocomplete item (ReactSDK) */
+  --str-chat__suggestion-list-item--selected-background-color: var(--str-chat__surface-color);
+
+  /* The border radius used for the borders of the slash command item in the autocomplete list */
+  --str-chat__slash-command-border-radius: 0;
+
+  /* The text/icon color of the slash command item in the autocomplete list */
+  --str-chat__slash-command-color: var(--str-chat__text-color);
+
+  /* The background color of the slash command item in the autocomplete list */
+  --str-chat__slash-command-background-color: transparent;
+
+  /* Top border of the slash command item in the autocomplete list */
+  --str-chat__slash-command-border-block-start: none;
+
+  /* Bottom border of the slash command item in the autocomplete list */
+  --str-chat__slash-command-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the slash command item in the autocomplete list */
+  --str-chat__slash-command-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the slash command item in the autocomplete list */
+  --str-chat__slash-command-border-inline-end: none;
+
+  /* Box shadow of the slash command item in the autocomplete list */
+  --str-chat__slash-command-box-shadow: none;
+
+  /* Text color of the arguments of a slash command item in the autocomplete list */
+  --str-chat__slash-command-args-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The border radius used for the borders of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-border-radius: 0;
+
+  /* The text/icon color of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-color: var(--str-chat__text-color);
+
+  /* The background color of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-background-color: transparent;
+
+  /* Top border of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-border-block-start: none;
+
+  /* Bottom border of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-border-inline-end: none;
+
+  /* Box shadow of the user mention item in the autocomplete list */
+  --str-chat__mention-list-user-item-box-shadow: none;
+
+  /* The text color of the at sign inside a user mention itome in the autocomplete list */
+  --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
+
+  /* The font used in the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
+
+  /* The border radius used for the borders of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-radius: 0;
+
+  /* The text/icon color of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
+
+  /* The background color of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-background-color: transparent;
+
+  /* Top border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-block-start: none;
+
+  /* Bottom border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-inline-end: none;
+
+  /* Box shadow of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-box-shadow: none;
+}
+
+// Class defined by Angular mentions
+// !important necessary to override library defined styles
+.mention-menu {
+  @include utils.component-layer-overrides('autocomplete-menu', '!important');
+
+  .active.mention-active > a {
+    background-color: var(--str-chat__autocomplete-active-background-color) !important;
+  }
+
+  .mention-item {
+    color: var(--str-chat__autocomplete-menu-color) !important;
+    background-color: transparent !important;
+  }
+}
+
+.str-chat__slash-command {
+  @include utils.component-layer-overrides('slash-command');
+
+  .str-chat__slash-command-header {
+    .str-chat__slash-command-name {
+      text-transform: capitalize;
+      font: var(--str-chat__subtitle2-text);
+    }
+
+    .str-chat__slash-command-args {
+      color: var(--str-chat__slash-command-args-color);
+      font: var(--str-chat__subtitle-text);
+    }
+  }
+}
+
+.str-chat__user-item {
+  @include utils.component-layer-overrides('mention-list-user-item');
+
+  .str-chat__user-item--name {
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__user-item-at {
+    font: var(--str-chat__subtitle2-text);
+    color: var(--str-chat__mention-list-user-item-at-sign-color);
+  }
+}
+
+.str-chat__emoji-item {
+  @include utils.component-layer-overrides('mention-list-emoji-item');
+
+  .str-chat__emoji-item--name {
+    font: var(--str-chat__subtitle-text);
+  }
+}
+
+// TODO?: rename to autocomplete? or create new file
+.str-chat__suggestion-list-container {
+  @include utils.component-layer-overrides('suggestion-list-container');
+
+  .str-chat__suggestion-list {
+    .str-chat__suggestion-list-item > a {
+      text-decoration: none;
+    }
+
+    .str-chat__suggestion-item--selected {
+      background-color: var(--str-chat__suggestion-list-item--selected-background-color);
+    }
+  }
+}

package/dist/scss/v2/Avatar/Avatar-layout.scss

@@ -0,0 +1,13 @@
+.str-chat__avatar {
+  .str-chat__avatar-fallback {
+    text-align: center;
+    height: inherit;
+    width: inherit;
+  }
+}
+
+.str-chat__loading-channels-avatar {
+  flex-shrink: 0;
+  width: calc(var(--str-chat__spacing-px) * 49);
+  height: calc(var(--str-chat__spacing-px) * 49);
+}

package/dist/scss/v2/Avatar/Avatar-theme.scss

@@ -0,0 +1,42 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the component */
+  --str-chat__avatar-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the component */
+  --str-chat__avatar-background-color: var(--str-chat__primary-color);
+
+  /* Top border of the component */
+  --str-chat__avatar-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__avatar-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__avatar-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__avatar-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__avatar-box-shadow: none;
+}
+
+.str-chat__avatar {
+  .str-chat__avatar-image {
+    @include utils.component-layer-overrides('avatar');
+  }
+
+  .str-chat__avatar-fallback {
+    @include utils.component-layer-overrides('avatar');
+    text-transform: uppercase;
+  }
+}
+
+.str-chat__loading-channels-avatar {
+  border-radius: var(--str-chat__avatar-border-radius);
+}

package/dist/scss/v2/Channel/Channel-layout.scss

@@ -0,0 +1,139 @@
+@use '../utils';
+
+.str-chat__channel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .str-chat__container {
+    height: 100%;
+    display: flex;
+
+    .str-chat__main-panel {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
+.str-chat__empty-channel {
+  @include utils.empty-layout;
+  position: relative;
+
+  .str-chat__empty-channel-notifications {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-2);
+  }
+}
+
+.str-chat__loading-channel {
+  $text-height: calc(var(--str-chat__spacing-px) * 16);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .str-chat__loading-channel-header {
+    @include utils.header-layout;
+
+    .str-chat__loading-channel-header-avatar {
+      flex-shrink: 0;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-header-end {
+      @include utils.header-text-layout;
+
+      .str-chat__loading-channel-header-name {
+        border-radius: var(--str-chat__border-radius-xs);
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 170);
+      }
+
+      .str-chat__loading-channel-header-info {
+        border-radius: var(--str-chat__border-radius-xs);
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 66);
+      }
+    }
+  }
+
+  .str-chat__loading-channel-message-list {
+    @include utils.message-list-spacing;
+    height: 100%;
+
+    .str-chat__loading-channel-message {
+      display: flex;
+      width: 100%;
+      column-gap: var(--str-chat__spacing-2);
+      padding: var(--str-chat__spacing-4) 0;
+
+      .str-chat__loading-channel-message-avatar {
+        flex-shrink: 0;
+        width: calc(var(--str-chat__spacing-px) * 49);
+        height: calc(var(--str-chat__spacing-px) * 49);
+      }
+
+      .str-chat__loading-channel-message-end {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: var(--str-chat__spacing-2);
+
+        .str-chat__loading-channel-message-last-row {
+          display: flex;
+          width: 100%;
+          column-gap: var(--str-chat__spacing-2);
+        }
+      }
+
+      .str-chat__loading-channel-message-sender {
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 66);
+      }
+
+      .str-chat__loading-channel-message-text {
+        height: $text-height;
+        width: 100%;
+      }
+
+      .str-chat__loading-channel-message-date {
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 50);
+      }
+
+      &:nth-of-type(2) {
+        flex-direction: row-reverse;
+
+        .str-chat__loading-channel-message-sender {
+          align-self: end;
+        }
+
+        .str-chat__loading-channel-message-last-row {
+          flex-direction: row-reverse;
+        }
+      }
+    }
+  }
+
+  .str-chat__loading-channel-message-input-row {
+    display: flex;
+    column-gap: var(--str-chat__spacing-2);
+    padding: var(--str-chat__spacing-2);
+
+    .str-chat__loading-channel-message-input {
+      width: 100%;
+      height: calc(var(--str-chat__spacing-px) * 36);
+    }
+
+    .str-chat__loading-channel-message-send {
+      height: calc(var(--str-chat__spacing-px) * 36);
+      width: calc(var(--str-chat__spacing-px) * 36);
+    }
+  }
+}

package/dist/scss/v2/Channel/Channel-theme.scss

@@ -0,0 +1,99 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__channel-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__channel-background-color: var(--str-chat__background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__channel-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-border-inline-end: none;
+
+  /* The icon color used when no channel is selected */
+  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
+
+  /* The text color used when no channel is selected */
+  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The color of the loading indicator */
+  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
+}
+
+.str-chat__channel {
+  @include utils.component-layer-overrides('channel');
+}
+
+.str-chat__empty-channel {
+  @include utils.component-layer-overrides('channel');
+  @include utils.empty-theme('channel');
+
+  .str-chat__empty-channel-text {
+    color: var(--str-chat__channel-empty-color);
+  }
+}
+
+.str-chat__loading-channel {
+  @include utils.loading-animation;
+
+  .str-chat__loading-channel-header {
+    background-color: var(--str-chat__channel-header-background-color);
+
+    .str-chat__loading-channel-header-avatar {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-header-name,
+    .str-chat__loading-channel-header-info {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__border-radius-xs);
+    }
+  }
+
+  .str-chat__loading-channel-message-list {
+    background-color: var(--str-chat__message-list-background-color);
+
+    .str-chat__loading-channel-message-avatar {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-message-sender,
+    .str-chat__loading-channel-message-text,
+    .str-chat__loading-channel-message-date {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__message-bubble-border-radius);
+    }
+  }
+
+  .str-chat__loading-channel-message-input-row {
+    .str-chat__loading-channel-message-input,
+    .str-chat__loading-channel-message-send {
+      @include utils.loading-item-background('channel');
+    }
+
+    .str-chat__loading-channel-message-input {
+      border-radius: var(--str-chat__message-textarea-border-radius);
+    }
+
+    .str-chat__loading-channel-message-send {
+      border-radius: var(--str-chat__message-send-border-radius);
+    }
+  }
+}

package/dist/scss/v2/ChannelHeader/ChannelHeader-layout.scss

@@ -0,0 +1,23 @@
+@use '../utils';
+
+.str-chat__channel-header {
+  @include utils.header-layout;
+
+  // Only visible in theme-v1
+  .str-chat__header-hamburger {
+    display: none;
+  }
+
+  .str-chat__channel-header-end {
+    @include utils.header-text-layout;
+
+    p {
+      margin: 0;
+    }
+
+    .str-chat__channel-header-title,
+    .str-chat__channel-header-info {
+      @include utils.ellipsis-text;
+    }
+  }
+}

package/dist/scss/v2/ChannelHeader/ChannelHeader-theme.scss

@@ -0,0 +1,43 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-header-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__channel-header-color: 0;
+
+  /* The background color of the component */
+  --str-chat__channel-header-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__channel-header-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-header-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-header-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-header-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-header-box-shadow: none;
+
+  /* The text/icon color used to display member information about the channel */
+  --str-chat__channel-header-info-color: var(--str-chat__text-low-emphasis-color);
+}
+
+.str-chat__channel-header {
+  @include utils.component-layer-overrides('channel-header');
+
+  .str-chat__channel-header-title {
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__channel-header-info {
+    font: var(--str-chat__body-text);
+    color: var(--str-chat__channel-header-info-color);
+  }
+}

package/dist/scss/v2/ChannelList/ChannelList-layout.scss

@@ -0,0 +1,41 @@
+@use '../utils';
+
+.str-chat__channel-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .str-chat__channel-list-messenger {
+    height: 100%;
+
+    .str-chat__channel-list-messenger__main {
+      height: 100%;
+
+      .str-chat__channel-list-empty {
+        @include utils.empty-layout;
+      }
+
+      // Empty channel list for theme-v1
+      .str-chat__channel-list-empty-v1 {
+        display: none;
+      }
+    }
+  }
+
+  .str-chat__load-more-button {
+    display: flex;
+    justify-content: center;
+    margin: var(--str-chat__spacing-2) 0;
+
+    .str-chat__load-more-button__button {
+      @include utils.flex-row-center;
+    }
+  }
+
+  // This is displayed only in theme-v1
+  .str-chat__down-main {
+    display: none;
+  }
+}