Skip to content

Commit

Permalink
Separate layout from theme
Browse files Browse the repository at this point in the history
  • Loading branch information
arnautov-anton committed Aug 28, 2024
1 parent b0cc495 commit 7a4617a
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 75 deletions.
22 changes: 0 additions & 22 deletions src/v2/styles/ChatView/ChatView-layout.scss
Original file line number Diff line number Diff line change
@@ -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%;
Expand All @@ -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;
Expand All @@ -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);
}
}
}

Expand Down
30 changes: 30 additions & 0 deletions src/v2/styles/ChatView/ChatView-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
47 changes: 0 additions & 47 deletions src/v2/styles/ThreadList/ThreadList-layout.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,15 @@
.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 {
font-size: 16px;
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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down
73 changes: 73 additions & 0 deletions src/v2/styles/ThreadList/ThreadList-theme.scss
Original file line number Diff line number Diff line change
@@ -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);
}
6 changes: 0 additions & 6 deletions src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
Expand All @@ -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;
Expand Down
10 changes: 10 additions & 0 deletions src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 3 additions & 0 deletions src/v2/styles/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit 7a4617a

Please sign in to comment.