Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Message theme v2 #114

Merged
merged 1 commit into from
Jun 9, 2022
Merged

Message theme v2 #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 169 additions & 23 deletions docs/theming/component-variables.mdx
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 20 additions & 18 deletions docs/theming/theme-variables.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,26 @@ You can read about each category in detail in the tables below.

## Colors

| Name | Description | Where is it used? |
| ---------------------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `--str-chat__primary-color` | Used for emphasis, brands can inject their main color using this variable | Links, buttons, avatar fallback background, etc. |
| `--str-chat__on-primary-color` | If the primary color is used as a background, text/icons are displayed in this color | Button color, text on avatar fallback, etc. |
| `--str-chat__active-primary-color` | Used to indicate that a UI element with primary color is in an active state | Pressed buttons |
| `--str-chat__background-color` | Used as a background color for the main chat UI components | Channel background, message list background, message input background |
| `--str-chat__secondary-background-color` | Used as a background color for the main chat UI components | Channel list background |
| `--str-chat__primary-surface-color` | Used as a background color to give emphasis, but less vibrant than the primary color | Background of messages sent by the current user |
| `--str-chat__surface-color` | A neutral color used to give emphasis to different surfaces | Selected channel preview background, borders |
| `--str-chat__secondary-surface-color` | A neutral color used to give emphasis to different surfaces | Background of received messages, reactions, etc. |
| `--str-chat__text-color` | The main color used for texts/icons | Messages, channel header, channel title in the channel preview, etc. |
| `--str-chat__text-low-emphasis-color` | Used for texts/icons that need less emphasis | The latest message in the channel preview, deleted message text, default icon state, etc. |
| `--str-chat__disabled-color` | Used for displaying disabled UI elements (typically buttons) | Disabled send button etc. |
| `--str-chat__on-disabled-color` | Used for text/icon colors if disabled color is used as a background color | Text on disabled send button etc. |
| `--str-chat__unread-badge-color` | Used for displaying the unread badge | Background of the unread badge |
| `--str-chat__on-unread-badge-color` | Used for text/icon colors if unread badge color is used as a background color | Text on the unread badge |
| `--str-chat__danger-color` | Used for error messages, and destructive actions | Delete action label etc. |
| `--str-chat__overlay-color` | The background color used for modal overlays | Modal overlay color |
| Name | Description | Where is it used? |
| ------------------------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `--str-chat__primary-color` | Used for emphasis, brands can inject their main color using this variable | Links, buttons, avatar fallback background, etc. |
| `--str-chat__on-primary-color` | If the primary color is used as a background, text/icons are displayed in this color | Button color, text on avatar fallback, etc. |
| `--str-chat__active-primary-color` | Used to indicate that a UI element with primary color is in an active state | Pressed buttons |
| `--str-chat__background-color` | Used as a background color for the main chat UI components | Channel background, message list background, message input background |
| `--str-chat__secondary-background-color` | Used as a background color for the main chat UI components | Channel list background |
| `--str-chat__primary-surface-color` | Used as a background color to give emphasis, but less vibrant than the primary color | Background of messages sent by the current user |
| `--str-chat__surface-color` | A neutral color used to give emphasis to different surfaces | Selected channel preview background, borders |
| `--str-chat__secondary-surface-color` | A neutral color used to give emphasis to different surfaces | Background of received messages, reactions, etc. |
| `--str-chat__text-color` | The main color used for texts/icons | Messages, channel header, channel title in the channel preview, etc. |
| `--str-chat__text-low-emphasis-color` | Used for texts/icons that need less emphasis | The latest message in the channel preview, deleted message text, default icon state, etc. |
| `--str-chat__disabled-color` | Used for displaying disabled UI elements (typically buttons) | Disabled send button etc. |
| `--str-chat__on-disabled-color` | Used for text/icon colors if disabled color is used as a background color | Text on disabled send button etc. |
| `--str-chat__unread-badge-color` | Used for displaying the unread badge | Background of the unread badge |
| `--str-chat__on-unread-badge-color` | Used for text/icon colors if unread badge color is used as a background color | Text on the unread badge |
| `--str-chat__danger-color` | Used for error messages, and destructive actions | Delete action label etc. |
| `--str-chat__overlay-color` | The background color used for overlays | Modal overlay color, attachment preview overlay |
| `--str-chat__secondary-overlay-color` | The background color used for subtle overlays | Image gallery |
| `--str-chat\_\_secondary-overlay-text-color | The text/icon color used on subtle overlays | Image gallery |

## Spacing and sizing

Expand Down
53 changes: 32 additions & 21 deletions src/v1/Attachment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,38 @@
background: var(--white);
}

.str-chat__message-attachment-file--item-text {
Copy link
Contributor Author

@szuperaz szuperaz Jun 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup changed in theme-v2, so we update theme-v1 as well

display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
row-gap: 2px;

.str-chat__message-attachment-file--item-first-row {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 8px;

.str-chat__message-attachment-file--item-name {
font-weight: var(--font-weight-bold);
color: var(--black);

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

.str-chat__message-attachment-download-icon {
svg {
width: 24px;
height: 16px;
}
}
}
}

img,
svg {
margin-right: var(--xs-m);
Expand All @@ -99,27 +131,6 @@
text-overflow: ellipsis;
}

a {
font-weight: var(--font-weight-bold);
color: var(--black);
opacity: 0.8;

text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;

&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}

span {
line-height: 14px;
font-size: var(--sm-font);
Expand Down
Loading