diff --git a/src/v2/styles/ChatView/ChatView-layout.scss b/src/v2/styles/ChatView/ChatView-layout.scss index f44b50e..f243a91 100644 --- a/src/v2/styles/ChatView/ChatView-layout.scss +++ b/src/v2/styles/ChatView/ChatView-layout.scss @@ -1,13 +1,3 @@ -.str-chat { - --str-chat-selector-background-color: var(--str-chat__secondary-background-color); - --str-chat-selector-border-color: var(--str-chat__surface-color); - - --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); - --str-chat-selector-button-color-selected: var(--str-chat__text-color); - --str-chat-selector-button-background-color-default: transparent; - --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); -} - .str-chat__chat-view { display: flex; width: 100%; @@ -19,16 +9,11 @@ padding-inline: 8px; padding-block: 16px; gap: 20px; - border-right: 1px solid var(--str-chat-selector-border-color); - background-color: var(--str-chat-selector-background-color); &-button { - border: none; display: flex; flex-direction: column; align-items: center; - background: var(--str-chat-selector-button-background-color-default); - color: var(--str-chat-selector-button-color-default); padding-inline: 10px; padding-block: 10px; border-radius: 8px; @@ -40,17 +25,10 @@ cursor: pointer; position: relative; - --str-chat-icon-color: var(--str-chat-selector-button-color-default); --str-chat-icon-height: 20px; --str-chat-icon-width: 20px; --str-chat-unread-count-badge-absolute-offset-vertical: 25%; - - &[aria-selected='true'] { - --str-chat-icon-color: var(--str-chat-selector-button-color-selected); - color: var(--str-chat-selector-button-color-selected); - background: var(--str-chat-selector-button-background-color-selected); - } } } diff --git a/src/v2/styles/ChatView/ChatView-theme.scss b/src/v2/styles/ChatView/ChatView-theme.scss index e69de29..0997d68 100644 --- a/src/v2/styles/ChatView/ChatView-theme.scss +++ b/src/v2/styles/ChatView/ChatView-theme.scss @@ -0,0 +1,30 @@ +.str-chat { + --str-chat-selector-background-color: var(--str-chat__secondary-background-color); + --str-chat-selector-border-color: var(--str-chat__surface-color); + + --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); + --str-chat-selector-button-color-selected: var(--str-chat__text-color); + --str-chat-selector-button-background-color-default: transparent; + --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); +} + +.str-chat__chat-view { + &__selector { + border-right: 1px solid var(--str-chat-selector-border-color); + background-color: var(--str-chat-selector-background-color); + + &-button { + border: none; + background: var(--str-chat-selector-button-background-color-default); + color: var(--str-chat-selector-button-color-default); + + --str-chat-icon-color: var(--str-chat-selector-button-color-default); + + &[aria-selected='true'] { + --str-chat-icon-color: var(--str-chat-selector-button-color-selected); + color: var(--str-chat-selector-button-color-selected); + background: var(--str-chat-selector-button-background-color-selected); + } + } + } +} diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss index 78fe211..07dd40e 100644 --- a/src/v2/styles/ThreadList/ThreadList-layout.scss +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -1,27 +1,7 @@ -.str-chat { - --str-chat-thread-list-border-color: var(--str-chat__surface-color); - --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); - - --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color); - --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color); - - --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); - --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); - - --str-chat-thread-list-item-text-color: var(--str-chat__text-color); - --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); - - --str-chat-thread-list-empty-placeholder-background-color: var( - --str-chat__secondary-background-color - ); - --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); -} - .str-chat__thread-list-container { display: flex; flex-direction: column; flex-grow: 1; - background-color: var(--str-chat-thread-list-container-background-color); } .str-chat__unseen-threads-banner { @@ -29,10 +9,7 @@ font-weight: 400; margin: 8px; - border-radius: 16px; padding: 16px; - background: var(--str-chat-unseen-threads-banner-background-color); - color: var(--str-chat-unseen-threads-banner-color); display: flex; align-items: center; justify-content: space-between; @@ -46,20 +23,13 @@ width: 24px; height: 24px; - --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color); --str-chat-icon-width: 16px; --str-chat-icon-heigh: 22px; } } .str-chat__thread-list { - --str-chat-icon-color: var(--str-chat-thread-list-item-text-color); - - border-right: 1px solid var(--str-chat-thread-list-border-color); - color: var(--str-chat-thread-list-item-text-color); - .str-chat__thread-list-item { - border: none; align-items: stretch; box-sizing: border-box; padding-block: 14px; @@ -69,16 +39,6 @@ display: flex; flex-direction: column; cursor: pointer; - background-color: var(--str-chat-thread-list-item-background-color-default); - - &[aria-selected='true'] { - background-color: var(--str-chat-thread-list-item-background-color-selected); - - .str-chat__thread-list-item__parent-message-text, - .str-chat__thread-list-item__latest-reply-text-and-timestamp { - color: inherit; - } - } .str-chat__thread-list-item__channel { --str-chat-icon-height: 14px; @@ -121,7 +81,6 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: var(--str-chat-thread-list-item-text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply { @@ -130,8 +89,6 @@ gap: 5px; --str-chat__avatar-size: 49px; - --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color); - --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply-details { @@ -155,7 +112,6 @@ justify-content: space-between; align-items: baseline; line-height: 16px; - color: var(--str-chat-thread-list-item-text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply-text { @@ -181,10 +137,7 @@ .str-chat__thread-list-empty-placeholder { --str-chat-icon-height: 95px; --str-chat-icon-width: 95px; - --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color); - background-color: var(--str-chat-thread-list-empty-placeholder-background-color); - color: var(--str-chat-thread-list-empty-placeholder-color); font-size: 20px; font-weight: 500; display: flex; diff --git a/src/v2/styles/ThreadList/ThreadList-theme.scss b/src/v2/styles/ThreadList/ThreadList-theme.scss index e69de29..51dcaf8 100644 --- a/src/v2/styles/ThreadList/ThreadList-theme.scss +++ b/src/v2/styles/ThreadList/ThreadList-theme.scss @@ -0,0 +1,73 @@ +.str-chat { + --str-chat-thread-list-border-color: var(--str-chat__surface-color); + --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); + + --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color); + --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color); + + --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); + --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); + + --str-chat-thread-list-item-text-color: var(--str-chat__text-color); + --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); + + --str-chat-thread-list-empty-placeholder-background-color: var( + --str-chat__secondary-background-color + ); + --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); +} + +.str-chat__thread-list-container { + background-color: var(--str-chat-thread-list-container-background-color); +} + +.str-chat__unseen-threads-banner { + border-radius: 16px; + background: var(--str-chat-unseen-threads-banner-background-color); + color: var(--str-chat-unseen-threads-banner-color); + + &__button { + --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color); + } +} + +.str-chat__thread-list { + --str-chat-icon-color: var(--str-chat-thread-list-item-text-color); + + border-right: 1px solid var(--str-chat-thread-list-border-color); + color: var(--str-chat-thread-list-item-text-color); + + .str-chat__thread-list-item { + border: none; + background-color: var(--str-chat-thread-list-item-background-color-default); + + &[aria-selected='true'] { + background-color: var(--str-chat-thread-list-item-background-color-selected); + + .str-chat__thread-list-item__parent-message-text, + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + color: inherit; + } + } + + .str-chat__thread-list-item__parent-message-text { + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + + .str-chat__thread-list-item__latest-reply { + --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color); + --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color); + } + + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + } +} + +.str-chat__thread-list-empty-placeholder { + --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color); + + background-color: var(--str-chat-thread-list-empty-placeholder-background-color); + color: var(--str-chat-thread-list-empty-placeholder-color); +} diff --git a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss index 37393c9..c535277 100644 --- a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss +++ b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss @@ -1,7 +1,4 @@ .str-chat { - --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); - --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); - --str-chat-unread-count-badge-absolute-offset-vertical: 50%; --str-chat-unread-count-badge-absolute-offset-horizontal: 50%; } @@ -19,9 +16,6 @@ min-height: 22px; line-height: 8px; font-weight: 700; - background-color: var(--str-chat-unread-count-badge-background-color); - color: var(--str-chat-unread-count-badge-color); - border-radius: 9999px; padding: 7px; flex-shrink: 0; display: flex; diff --git a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss new file mode 100644 index 0000000..a507050 --- /dev/null +++ b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss @@ -0,0 +1,10 @@ +.str-chat { + --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); + --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); +} + +.str-chat__unread-count-badge { + background-color: var(--str-chat-unread-count-badge-background-color); + color: var(--str-chat-unread-count-badge-color); + border-radius: 9999px; +} diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index a05ec7a..dff6879 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -37,3 +37,6 @@ @use 'Thread/Thread-theme'; @use 'Tooltip/Tooltip-theme'; @use 'TypingIndicator/TypingIndicator-theme'; +@use 'ThreadList/ThreadList-theme'; +@use 'ChatView/ChatView-theme'; +@use 'UnreadCountBadge/UnreadCountBadge-theme';