diff --git a/src/components/AIStateIndicator/styling/AIStateIndicator.scss b/src/components/AIStateIndicator/styling/AIStateIndicator.scss index d22188dae0..37683c253a 100644 --- a/src/components/AIStateIndicator/styling/AIStateIndicator.scss +++ b/src/components/AIStateIndicator/styling/AIStateIndicator.scss @@ -1,8 +1,8 @@ .str-chat__ai-state-indicator-container { padding: 0 8px; - background-color: var(--background-core-surface); + background-color: var(--str-chat__background-core-surface-default); } .str-chat__ai-state-indicator-text { - color: var(--text-primary); + color: var(--str-chat__text-primary); } diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index ddbbcd12d4..7634f1dea4 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -2,108 +2,7 @@ .str-chat { /* The margin applied to every attachment in the attachment list */ - --str-chat__attachment-margin: var(--spacing-xs); - /* The border radius used for the borders of the component */ - --str-chat__attachment-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__attachment-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__attachment-list-background-color: transparent; - - /* Top border of the component */ - --str-chat__attachment-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__attachment-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__attachment-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__attachment-list-border-inline-end: none; - - /* Box shadow applied to the component */ - --str-chat__attachment-list-box-shadow: none; - - /* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-color: var(--text-primary); - - /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-background-color: transparent; - - /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-block-start: none; - - /* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-border-inline-end: none; - - /* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */ - --str-chat__image-attachment-box-shadow: none; - - /* The border radius used for the borders of image gallery attachments */ - --str-chat__image-gallery-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of image gallery attachments */ - --str-chat__image-gallery-attachment-color: var(--text-primary); - - /* The background color of image gallery attachments */ - --str-chat__image-gallery-attachment-background-color: transparent; - - /* Top border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-block-start: none; - - /* Bottom border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of image gallery attachments */ - --str-chat__image-gallery-attachment-border-inline-end: none; - - /* Box shadow applied to image gallery attachments */ - --str-chat__image-gallery-attachment-box-shadow: none; - - /* The border radius used for the borders of file attachments */ - --str-chat__file-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of file attachments */ - --str-chat__file-attachment-color: var(--text-primary); - - /* The background color of file attachments */ - --str-chat__file-attachment-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__file-attachment-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__file-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__file-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__file-attachment-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__file-attachment-box-shadow: none; + --str-chat__attachment-margin: var(--str-chat__spacing-xs); } .str-chat__attachment-list { @@ -118,20 +17,27 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 0; - @include utils.component-layer-overrides('attachment-list'); + background: transparent; + color: var(--str-chat__text-primary); .str-chat__message-attachment--image, .str-chat__message-attachment--video { - @include utils.component-layer-overrides('image-attachment'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); } .str-chat__message-attachment { overflow: hidden; background-color: var(--chat-bg-attachment); - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); // Many classes to increase selector specificity .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline { @@ -232,7 +138,7 @@ .str-chat__gallery .str-chat__message-attachment--svg-image, .str-chat__message-attachment--image.str-chat__message-attachment--svg-image { - $padding: var(--space-24); + $padding: var(--str-chat__space-24); padding: $padding; img { @@ -246,8 +152,8 @@ .str-chat__message-attachment-file--item, .str-chat__message-attachment-audio-widget { @include utils.flex-row-center; - padding: var(--spacing-sm); - column-gap: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); + column-gap: var(--str-chat__spacing-sm); .str-chat__message-attachment-file--item__info, .str-chat__message-attachment-audio-widget--text { @@ -256,9 +162,9 @@ flex-direction: column; align-items: flex-start; justify-content: center; - row-gap: var(--space-2); + row-gap: var(--str-chat__space-2); min-width: 0; - line-height: var(--typography-line-height-tight); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__message-attachment-file--item__first-row, .str-chat__message-attachment-audio-widget--text-first-row { @@ -266,9 +172,9 @@ display: flex; align-items: center; justify-content: space-between; - column-gap: var(--space-8); - font-weight: var(--typography-font-weight-semi-bold); - font-size: var(--typography-font-size-sm); + column-gap: var(--str-chat__space-8); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); .str-chat__message-attachment-file--item__name, .str-chat__message-attachment-audio-widget--title { @@ -278,20 +184,26 @@ } .str-chat__message-attachment-file--item__data { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); } } } .str-chat__message-attachment-file--item { - @include utils.component-layer-overrides('file-attachment'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); } .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy { } .str-chat__message-attachment-download-icon { - --str-chat-icon-height: var(--size-16); + --str-chat-icon-height: var(--str-chat__size-16); } } @@ -310,7 +222,7 @@ .str-chat__message-bubble { border: 1px solid var(--chat-border); - box-shadow: var(--background-core-elevation-0); + box-shadow: var(--str-chat__background-core-elevation-0); } .str-chat__message-attachment { @@ -329,14 +241,14 @@ .str-chat__message--other { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-end-start-radius: var(--message-bubble-radius-tail); + border-end-start-radius: var(--str-chat__message-bubble-radius-tail); } } .str-chat__message--me { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-end-end-radius: var(--message-bubble-radius-tail); + border-end-end-radius: var(--str-chat__message-bubble-radius-tail); } } } @@ -345,7 +257,7 @@ .str-chat__li--middle { &.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment { - border-radius: var(--message-bubble-radius-group-middle); + border-radius: var(--str-chat__message-bubble-radius-group-middle); } } diff --git a/src/components/Attachment/styling/AttachmentActions.scss b/src/components/Attachment/styling/AttachmentActions.scss index ca7f086d75..638ff4e4a3 100644 --- a/src/components/Attachment/styling/AttachmentActions.scss +++ b/src/components/Attachment/styling/AttachmentActions.scss @@ -1,63 +1,6 @@ -@use '../../../styling/utils'; - -.str-chat { - /* The border radius used for attachment actions */ - --str-chat__attachment-actions-border-radius: 0; - - /* The text/icon color of attachment actions */ - --str-chat__attachment-actions-color: var(--button-secondary-text); - - /* The background color of attachment actions */ - --str-chat__attachment-actions-background-color: transparent; - - /* Top border of attachment actions */ - --str-chat__attachment-actions-border-block-start: none; - - /* Bottom border of attachment actions */ - --str-chat__attachment-actions-border-block-end: none; - - /* Left (right in RTL layout) border of attachment actions */ - --str-chat__attachment-actions-border-inline-start: none; - - /* Right (left in RTL layout) border of attachment actions */ - --str-chat__attachment-actions-border-inline-end: none; - - /* Box shadow applied to attachment actions */ - --str-chat__attachment-actions-box-shadow: none; - - /* The border radius used for an attachment action */ - --str-chat__attachment-action-border-radius: 0; - - /* The text/icon color of an attachment action */ - --str-chat__attachment-action-color: var(--button-secondary-text); - - /* The background color of an attachment action */ - --str-chat__attachment-action-background-color: transparent; - - /* Top border of an attachment action */ - --str-chat__attachment-action-border-block-start: none; - - /* Bottom border of an attachment action */ - --str-chat__attachment-action-border-block-end: none; - - /* Left (right in RTL layout) border of an attachment action */ - --str-chat__attachment-action-border-inline-start: none; - - /* Right (left in RTL layout) border of an attachment action */ - --str-chat__attachment-action-border-inline-end: none; - - /* Box shadow applied to an attachment action */ - --str-chat__attachment-action-box-shadow: none; - - /* The text/icon color of an attachment action while in pressed state */ - --str-chat__attachment-action-active-color: var(--accent-primary); - - /* The text/icon color of an attachment action while in pressed state */ - --str-chat__attachment-action-focus-color: var(--accent-primary); -} - .str-chat__message-attachment-actions { - @include utils.component-layer-overrides('attachment-actions'); + background: transparent; + color: var(--str-chat__button-secondary-text); .str-chat__message-attachment-actions-form { display: flex; @@ -65,23 +8,25 @@ height: 48px; .str-chat__message-attachment-actions-button { - @include utils.component-layer-overrides('attachment-action'); + background: transparent; + color: var(--str-chat__button-secondary-text); width: 100%; - padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); + padding: var(--str-chat__button-padding-y-sm) + var(--str-chat__button-padding-x-with-label-sm); white-space: nowrap; border-collapse: collapse; - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); + font-size: var(--str-chat__typography-font-size-md); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); &.str-chat__button { &:active { - color: var(--str-chat__attachment-action-active-color); + color: var(--str-chat__accent-primary); } &:focus-visible { - color: var(--str-chat__attachment-action-focus-color); + color: var(--str-chat__accent-primary); outline: none; } } diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index dd721a72d2..f3d75584a6 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -1,35 +1,13 @@ @use '../../../styling/utils'; -.str-chat { - /* Border radius applied audio widget */ - --str-chat__audio-attachment-widget-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* Text color used in audio widget */ - --str-chat__audio-attachment-widget-color: var(--text-primary); - - /* The text/icon color for low emphasis texts (for example file size) in audio widget */ - --str-chat__audio-attachment-widget-background-color: transparent; - - /* Top border of audio widget */ - --str-chat__audio-attachment-widget-border-block-start: none; - - /* Bottom border of audio widget */ - --str-chat__audio-attachment-widget-border-block-end: none; - - /* Left (right in RTL layout) border of audio widget */ - --str-chat__audio-attachment-widget-border-inline-start: none; - - /* Right (left in RTL layout) border of audio widget */ - --str-chat__audio-attachment-widget-border-inline-end: none; - - /* Box shadow applied to audio widget */ - --str-chat__audio-attachment-widget-box-shadow: none; -} - .str-chat__message-attachment-audio-widget { - @include utils.component-layer-overrides('audio-attachment-widget'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); flex: 1 1 auto; width: 100%; min-width: 0; @@ -43,14 +21,14 @@ min-width: 0; display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__message-attachment-audio-widget--text-first-row { display: flex; justify-content: space-between; align-items: start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); svg { flex-shrink: 0; @@ -71,14 +49,14 @@ .str-chat__duration-display { width: 40px; font: var(--str-chat__font-metadata-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__message-attachment-audio-widget--text-second-row { display: flex; align-items: center; width: 100%; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); .str-chat__message-attachment-file--item-size { font: var(--str-chat__font-metadata-default); diff --git a/src/components/Attachment/styling/CardAudio.scss b/src/components/Attachment/styling/CardAudio.scss index 4ddfd8593e..d5a059b506 100644 --- a/src/components/Attachment/styling/CardAudio.scss +++ b/src/components/Attachment/styling/CardAudio.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: column; width: 100%; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); } } } diff --git a/src/components/Attachment/styling/DownloadButton.scss b/src/components/Attachment/styling/DownloadButton.scss index 51369748e8..75e958dc89 100644 --- a/src/components/Attachment/styling/DownloadButton.scss +++ b/src/components/Attachment/styling/DownloadButton.scss @@ -1,5 +1,5 @@ .str-chat__button.str-chat__button--secondary.str-chat__button--outline.str-chat__audio-attachment-download-button { - border-color: var(--chat-border-on-chat-incoming); + border-color: var(--str-chat__chat-border-on-chat-incoming); flex-shrink: 0; .str-chat__attachment-download-button__icon { @@ -10,5 +10,5 @@ .str-chat__message--me .str-chat__button.str-chat__button--outline.str-chat__audio-attachment-download-button { - border-color: var(--chat-border-on-chat-outgoing); + border-color: var(--str-chat__chat-border-on-chat-outgoing); } diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss index 48d4b94da0..9033ef1509 100644 --- a/src/components/Attachment/styling/Geolocation.scss +++ b/src/components/Attachment/styling/Geolocation.scss @@ -1,35 +1,13 @@ @use '../../../styling/utils'; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__geolocation-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of geolocation attachments */ - --str-chat__geolocation-attachment-color: var(--chat-text); - - /* The background color of geolocation attachments */ - --str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment); - - /* Top border of geolocation attachments */ - --str-chat__geolocation-attachment-border-block-start: none; - - /* Bottom border of geolocation attachments */ - --str-chat__geolocation-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of geolocation attachments */ - --str-chat__geolocation-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of geolocation attachments */ - --str-chat__geolocation-attachment-border-inline-end: none; - - /* Box shadow applied to geolocation attachments */ - --str-chat__geolocation-attachment-box-shadow: none; -} - .str-chat__message-attachment-geolocation { - @include utils.component-layer-overrides('geolocation-attachment'); + background: var(--chat-bg-attachment); + color: var(--chat-text); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); display: flex; flex-direction: column; height: 200px; @@ -50,10 +28,10 @@ min-width: 0; min-height: 0; @include utils.flex-col-center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); .str-chat__icon { - fill: var(--accent-neutral); + fill: var(--str-chat__accent-neutral); height: 40px; width: 40px; } @@ -64,7 +42,7 @@ inset-block: 0.5rem; height: 12px; width: 12px; - color: var(--accent-neutral); + color: var(--str-chat__accent-neutral); } } @@ -72,7 +50,7 @@ display: flex; justify-content: center; padding: 0.5rem; - background-color: var(--background-core-surface-subtle); + background-color: var(--str-chat__background-core-surface-subtle); font: var(--str-chat__font-caption-default); .str-chat__message-attachment-geolocation__status--active { @@ -82,7 +60,7 @@ gap: 0.375rem; .str-chat__message-attachment-geolocation__status--active-status { - color: var(--accent-success); + color: var(--str-chat__accent-success); } .str-chat__message-attachment-geolocation__status--active-until { diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss index 51ffd18297..15bbc3a193 100644 --- a/src/components/Attachment/styling/Giphy.scss +++ b/src/components/Attachment/styling/Giphy.scss @@ -1,9 +1,6 @@ @use '../../../styling/utils' as utils; -.str-chat { - /* The height of GIFs */ - --str-chat__gif-height: 200px; -} +$gif-height: 200px; .str-chat__message-attachment-giphy { position: relative; @@ -26,7 +23,7 @@ } .str-chat__image-placeholder { - height: var(--str-chat__gif-height); + height: $gif-height; width: var(--str-chat__attachment-max-width); } } @@ -34,43 +31,43 @@ .str-chat__giphy-badge { display: inline-flex; height: 24px; - padding: var(--spacing-xxxs, 2px) var(--spacing-xs, 8px); + padding: var(--str-chat__spacing-xxxs, 2px) var(--str-chat__spacing-xs, 8px); justify-content: center; align-items: center; - gap: var(--spacing-xxs, 4px); + gap: var(--str-chat__spacing-xxs, 4px); position: absolute; inset-inline-start: 8px; bottom: 8px; - border-radius: var(--radius-lg, 12px); - background-color: var(--badge-bg-overlay, rgba(0, 0, 0, 0.75)); - color: var(--badge-text-on-accent, #fff); + border-radius: var(--str-chat__radius-lg, 12px); + background-color: var(--str-chat__badge-bg-overlay, rgba(0, 0, 0, 0.75)); + color: var(--str-chat__badge-text-on-accent, #fff); - font-size: var(--typography-font-size-xs, 12px); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight, 16px); + font-size: var(--str-chat__typography-font-size-xs, 12px); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight, 16px); text-transform: uppercase; } .str-chat__message-attachment--giphy--actions { .str-chat__message-attachment-giphy { - height: var(--str-chat__gif-height); + height: $gif-height; img.str-chat__base-image { - height: var(--str-chat__gif-height); + height: $gif-height; } } .str-chat__visibility-disclaimer { display: flex; - padding: var(--spacing-sm, 12px); + padding: var(--str-chat__spacing-sm, 12px); align-items: center; - gap: var(--spacing-xs, 8px); + gap: var(--str-chat__spacing-xs, 8px); align-self: stretch; color: var(--chat-text); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); } } diff --git a/src/components/Attachment/styling/LinkPreview.scss b/src/components/Attachment/styling/LinkPreview.scss index 25862e5b29..c05214058b 100644 --- a/src/components/Attachment/styling/LinkPreview.scss +++ b/src/components/Attachment/styling/LinkPreview.scss @@ -6,18 +6,14 @@ var(--str-chat__attachment-max-width) * calc(1 / 1.91) ); - /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */ - --str-chat__scraped-video-height: calc( - var(--str-chat__attachment-max-width) * calc(9 / 16) - ); - width: 100%; display: flex; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm) + var(--str-chat__spacing-xs) var(--str-chat__spacing-xs); overflow: hidden; - border-radius: var(--message-bubble-radius-attachment); - line-height: var(--typography-line-height-tight); + border-radius: var(--str-chat__message-bubble-radius-attachment); + line-height: var(--str-chat__typography-line-height-tight); * { color: var(--chat-text); @@ -34,7 +30,7 @@ img, .str-chat__image-placeholder { - border-radius: var(--message-bubble-radius-attachment-inline, 8px); + border-radius: var(--str-chat__message-bubble-radius-attachment-inline, 8px); } img { @@ -45,25 +41,25 @@ } &.str-chat__message-attachment-card--video .str-chat__message-attachment-card--header { - height: var(--str-chat__scraped-video-height); + height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16)); } .str-chat__message-attachment-card--content { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); min-width: 0; } .str-chat__message-attachment-card--title { @include utils.ellipsis-text; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__message-attachment-card--source-link, .str-chat__message-attachment-card--text { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); } .str-chat__message-attachment-card--title, @@ -80,7 +76,7 @@ align-items: center; min-width: 0; max-width: 100%; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__message-attachment-card--url { flex: 1; @@ -109,7 +105,7 @@ } .str-chat__message-attachment-card--content { - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); .str-chat__message-attachment-card--text { @include utils.ellipsis-text-clamp-lines(2); diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss index 7e3d22c198..fa37a432d4 100644 --- a/src/components/Attachment/styling/ModalGallery.scss +++ b/src/components/Attachment/styling/ModalGallery.scss @@ -1,25 +1,23 @@ @use '../../../styling/utils'; -.str-chat__message { - --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error); - --str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse); - --str-chat__modal-gallery-loading-background: var(--chat-bg); - --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base); - --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight); -} - .str-chat__attachment-list { .str-chat__message-attachment--gallery { $max-width: var(--str-chat__attachment-max-width); .str-chat__modal-gallery { - @include utils.component-layer-overrides('image-gallery-attachment'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; overflow: hidden; - border-radius: var(--radius-lg); - gap: var(--space-2); + border-radius: var(--str-chat__radius-lg); + gap: var(--str-chat__space-2); width: $max-width; max-width: $max-width; // CDN resize requires height/max-height to be present on the img element, this rule ensures that @@ -64,15 +62,15 @@ cursor: zoom-in; // CDN resize requires max-width to be present on this element max-width: $max-width; - color: var(--text-on-inverse); + color: var(--str-chat__text-on-inverse); border: none; - font-size: var(--typography-font-size-2xl); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-relaxed); + font-size: var(--str-chat__typography-font-size-2xl); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-relaxed); inset: 0; position: absolute; - background-color: var(--background-core-scrim); + background-color: var(--str-chat__background-core-scrim); } } } @@ -141,12 +139,12 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--str-chat__modal-gallery-loading-background); + background-color: var(--chat-bg); background-image: linear-gradient( 90deg, - var(--str-chat__modal-gallery-loading-base) 0%, - var(--str-chat__modal-gallery-loading-highlight) 50%, - var(--str-chat__modal-gallery-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -156,8 +154,8 @@ .str-chat__loading-indicator { position: relative; z-index: 1; - width: var(--icon-size-lg); - height: var(--icon-size-lg); + width: var(--str-chat__icon-size-lg); + height: var(--str-chat__icon-size-lg); } } @@ -167,9 +165,9 @@ z-index: 1; width: 2.75rem; height: 2.75rem; - border-radius: var(--radius-max); - background-color: var(--str-chat__modal-gallery-load-failed-indicator-background); - color: var(--str-chat__modal-gallery-load-failed-indicator-color); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__accent-error); + color: var(--str-chat__text-on-inverse); svg { width: 1.125rem; diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss index c9c2265bb5..a862dc37a4 100644 --- a/src/components/Attachment/styling/UnsupportedAttachment.scss +++ b/src/components/Attachment/styling/UnsupportedAttachment.scss @@ -1,45 +1,23 @@ @use '../../../styling/utils'; @use '../../../styling/variables/font' as font; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__unsupported-attachment-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of file attachments */ - --str-chat__unsupported-attachment-color: var(--text-primary); - - /* The background color of file attachments */ - --str-chat__unsupported-attachment-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__unsupported-attachment-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__unsupported-attachment-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__unsupported-attachment-box-shadow: none; -} - .str-chat__message-attachment-unsupported { - @include utils.component-layer-overrides('unsupported-attachment'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); - column-gap: var(--spacing-xs); + padding: var(--str-chat__spacing-md); + column-gap: var(--str-chat__spacing-xs); .str-chat__icon { - height: var(--size-20); - width: var(--size-20); + height: var(--str-chat__size-20); + width: var(--str-chat__size-20); } .str-chat__message-attachment-unsupported__metadata { diff --git a/src/components/Attachment/styling/VoiceRecording.scss b/src/components/Attachment/styling/VoiceRecording.scss index 48f5314f75..76c37b0d8a 100644 --- a/src/components/Attachment/styling/VoiceRecording.scss +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -1,45 +1,21 @@ -@use '../../../styling/utils'; - -.str-chat { - /* Border radius applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* Text color used in audio recording widget */ - --str-chat__voice-recording-attachment-widget-color: var(--text-primary); - - /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */ - --str-chat__voice-recording-attachment-widget-background-color: transparent; - - /* Top border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-start: none; - - /* Bottom border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-end: none; - - /* Left (right in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-start: none; - - /* Right (left in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-end: none; - - /* Box shadow applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-box-shadow: none; -} - .str-chat__message-attachment__voice-recording-widget { - @include utils.component-layer-overrides('voice-recording-attachment-widget'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 60px; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); .str-chat__message-attachment__voice-recording-widget__play-button-container { - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__message-attachment__voice-recording-widget__metadata { @@ -49,20 +25,20 @@ a { cursor: pointer; text-decoration: none; - color: var(--str-chat__voice-recording-attachment-widget-color); + color: var(--str-chat__text-primary); } .str-chat__message-attachment-download-icon { svg { - width: var(--size-24); - height: var(--size-16); + width: var(--str-chat__size-24); + height: var(--str-chat__size-16); } } } .str-chat__message-attachment__voice-recording-widget__timer { - min-width: var(--size-40); - width: var(--size-40); + min-width: var(--str-chat__size-40); + width: var(--str-chat__size-40); font: var(--str-chat__font-metadata-emphasis); } } diff --git a/src/components/AudioPlayback/styling/DurationDisplay.scss b/src/components/AudioPlayback/styling/DurationDisplay.scss index 42bc3de36a..82c9cd523a 100644 --- a/src/components/AudioPlayback/styling/DurationDisplay.scss +++ b/src/components/AudioPlayback/styling/DurationDisplay.scss @@ -3,7 +3,7 @@ letter-spacing: 0; min-width: 35px; width: 35px; - color: var(--text-primary); + color: var(--str-chat__text-primary); white-space: nowrap; text-align: center; } diff --git a/src/components/AudioPlayback/styling/PlaybackRateButton.scss b/src/components/AudioPlayback/styling/PlaybackRateButton.scss index 230822d25d..1f1836ccf1 100644 --- a/src/components/AudioPlayback/styling/PlaybackRateButton.scss +++ b/src/components/AudioPlayback/styling/PlaybackRateButton.scss @@ -5,19 +5,19 @@ display: flex; justify-content: center; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 48px; min-height: 24px; max-height: 24px; - padding: var(--button-padding-y-sm) var(--spacing-xs); + padding: var(--str-chat__button-padding-y-sm) var(--str-chat__spacing-xs); background-color: inherit; - border-radius: var(--button-radius-lg); + border-radius: var(--str-chat__button-radius-lg); border: 1px solid var(--chat-border-on-chat); - color: var(--control-playback-toggle-text, var(--text-primary)); + color: var(--str-chat__control-playback-toggle-text, var(--str-chat__text-primary)); font: var(--str-chat__font-metadata-emphasis); &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } &:not(:disabled):focus-visible { @@ -28,12 +28,12 @@ &:not(:disabled):active { // pressed - @include utils.overlay-after(var(--background-utility-pressed)); + @include utils.overlay-after(var(--str-chat__background-utility-pressed)); } &:disabled { - border-color: var(--border-utility-disabled); - color: var(--text-disabled); + border-color: var(--str-chat__border-utility-disabled); + color: var(--str-chat__text-disabled); cursor: default; } } diff --git a/src/components/AudioPlayback/styling/ProgressBar.scss b/src/components/AudioPlayback/styling/ProgressBar.scss index 22ff4e094d..bac8d54af9 100644 --- a/src/components/AudioPlayback/styling/ProgressBar.scss +++ b/src/components/AudioPlayback/styling/ProgressBar.scss @@ -1,32 +1,33 @@ .str-chat { .str-chat__message-attachment-audio-widget--progress-track { position: relative; - height: var(--size-4); + height: var(--str-chat__size-4); flex: 1; min-width: 0; cursor: pointer; background: linear-gradient( to var(--str-chat__progress-direction, right), - var(--chat-waveform-bar-playing) + var(--str-chat__chat-waveform-bar-playing) var(--str-chat__message-attachment-audio-widget-progress), - var(--chat-waveform-bar) var(--str-chat__message-attachment-audio-widget-progress) + var(--str-chat__chat-waveform-bar) + var(--str-chat__message-attachment-audio-widget-progress) ); [dir='rtl'] & { --str-chat__progress-direction: left; } - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); .str-chat__message-attachment-audio-widget--progress-indicator { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); - height: var(--size-12); - width: var(--size-12); - border-radius: var(--radius-max); - border: 1px solid var(--control-playback-thumb-border-default); - background: var(--control-playback-thumb-bg-default); + height: var(--str-chat__size-12); + width: var(--str-chat__size-12); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__control-playback-thumb-border-default); + background: var(--str-chat__control-playback-thumb-bg-default); box-shadow: var(--str-chat__box-shadow-2); cursor: grab; } diff --git a/src/components/AudioPlayback/styling/WaveProgressBar.scss b/src/components/AudioPlayback/styling/WaveProgressBar.scss index 3855aad9d2..c21a1262ea 100644 --- a/src/components/AudioPlayback/styling/WaveProgressBar.scss +++ b/src/components/AudioPlayback/styling/WaveProgressBar.scss @@ -8,8 +8,8 @@ .str-chat__message-attachment__voice-recording-widget__audio-state { display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs); height: 100%; } @@ -34,26 +34,26 @@ .str-chat__wave-progress-bar__progress-indicator { position: absolute; inset-inline-start: 0; - // todo: CSS use semantic variable instead of --base-white - border: 2px solid var(--base-white); + // todo: CSS use semantic variable instead of --str-chat__base-white + border: 2px solid var(--str-chat__base-white); box-shadow: var(--str-chat__box-shadow-3); - background: var(--accent-neutral); + background: var(--str-chat__accent-neutral); height: 14px; width: 14px; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); cursor: grab; transition: inset-inline-start 250ms linear; } } .str-chat__wave-progress-bar__amplitude-bar { - background: var(--chat-waveform-bar); - border-radius: var(--radius-max); + background: var(--str-chat__chat-waveform-bar); + border-radius: var(--str-chat__radius-max); transition: background 250ms linear; } .str-chat__wave-progress-bar__amplitude-bar--active { - background: var(--chat-waveform-bar-playing); + background: var(--str-chat__chat-waveform-bar-playing); } .str-chat__wave-progress-bar__track--dragging { @@ -68,7 +68,7 @@ .str-chat__wave-progress-bar__track--playback-initiated { .str-chat__wave-progress-bar__progress-indicator { - background: var(--accent-primary); + background: var(--str-chat__accent-primary); } } } diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss index cb90799894..83db515e43 100644 --- a/src/components/Avatar/styling/Avatar.scss +++ b/src/components/Avatar/styling/Avatar.scss @@ -4,12 +4,12 @@ display: flex; justify-content: center; align-items: center; - border-radius: var(--radius-max); - background: var(--avatar-bg-default); - color: var(--avatar-text-default); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__avatar-bg-default); + color: var(--str-chat__avatar-text-default); text-align: center; - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); font-style: normal; line-height: 1; text-transform: uppercase; @@ -49,7 +49,7 @@ position: absolute; width: calc(100% + 4px); height: calc(100% + 4px); - border: 2px solid var(--border-core-inverse); + border: 2px solid var(--str-chat__border-core-inverse); border-radius: inherit; } @@ -69,63 +69,63 @@ sin(var(--avatar-status-badge-angle)) - var(--avatar-status-badge-size) / 2 ); - border-radius: var(--radius-max, 9999px); + border-radius: var(--str-chat__radius-max, 9999px); border-style: solid; - border-color: var(--presence-border); + border-color: var(--str-chat__presence-border); border-width: 2px; &.str-chat__avatar-status-badge--online { - background: var(--presence-bg-online); + background: var(--str-chat__presence-bg-online); } &.str-chat__avatar-status-badge--offline { - background: var(--presence-bg-offline); + background: var(--str-chat__presence-bg-offline); } } &.str-chat__avatar--size-2xl { --avatar-size: 64px; --avatar-status-badge-size: 16px; - --avatar-icon-size: var(--icon-size-lg); + --avatar-icon-size: var(--str-chat__icon-size-lg); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-xl); + font-size: var(--str-chat__typography-font-size-xl); } &.str-chat__avatar--size-xl { --avatar-size: 48px; --avatar-status-badge-size: 16px; - --avatar-icon-size: var(--size-24); // TODO: missing icon size + --avatar-icon-size: var(--str-chat__size-24); // TODO: missing icon size --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-xl); + font-size: var(--str-chat__typography-font-size-xl); } &.str-chat__avatar--size-lg { --avatar-size: 40px; --avatar-status-badge-size: 14px; - --avatar-icon-size: var(--icon-size-md); + --avatar-icon-size: var(--str-chat__icon-size-md); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-md); + font-size: var(--str-chat__typography-font-size-md); } &.str-chat__avatar--size-md { --avatar-size: 32px; --avatar-status-badge-size: 12px; - --avatar-icon-size: var(--icon-size-md); + --avatar-icon-size: var(--str-chat__icon-size-md); --avatar-icon-stroke-width: 1.5px; - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); } &.str-chat__avatar--size-sm { --avatar-size: 24px; --avatar-status-badge-size: 8px; - --avatar-icon-size: var(--icon-size-sm); + --avatar-icon-size: var(--str-chat__icon-size-sm); --avatar-icon-stroke-width: 1.2px; - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); .str-chat__avatar-status-badge { border-width: 1px; @@ -138,7 +138,7 @@ --avatar-icon-size: 10px; --avatar-icon-stroke-width: 1.2px; - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); .str-chat__avatar-status-badge { border-width: 1px; diff --git a/src/components/Avatar/styling/AvatarStack.scss b/src/components/Avatar/styling/AvatarStack.scss index a81747f2b5..efd9e7eb76 100644 --- a/src/components/Avatar/styling/AvatarStack.scss +++ b/src/components/Avatar/styling/AvatarStack.scss @@ -8,21 +8,21 @@ &.str-chat__avatar-stack--size-xs { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-xs) * -1); + margin-inline-start: calc(var(--str-chat__spacing-xs) * -1); } } &.str-chat__avatar-stack--size-sm { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-sm) * -1); + margin-inline-start: calc(var(--str-chat__spacing-sm) * -1); } } &.str-chat__avatar-stack--size-md { & > .str-chat__avatar:not(:first-child), .str-chat__avatar-stack__count-badge { - margin-inline-start: calc(var(--spacing-sm) * -1); + margin-inline-start: calc(var(--str-chat__spacing-sm) * -1); } } } diff --git a/src/components/Avatar/styling/GroupAvatar.scss b/src/components/Avatar/styling/GroupAvatar.scss index dbd0e428e3..08d8de455a 100644 --- a/src/components/Avatar/styling/GroupAvatar.scss +++ b/src/components/Avatar/styling/GroupAvatar.scss @@ -16,8 +16,8 @@ --avatar-group-count-badge-size: 32px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-sm); - padding-inline: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + padding-inline: var(--str-chat__spacing-xs); } } @@ -27,8 +27,8 @@ --avatar-group-count-badge-size: 24px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-sm); - padding-inline: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + padding-inline: var(--str-chat__spacing-xs); } } @@ -38,8 +38,8 @@ --avatar-group-count-badge-size: 20px; & > .str-chat__avatar-group__count-badge { - font-size: var(--typography-font-size-xxs); - padding-inline: var(--spacing-xxs); + font-size: var(--str-chat__typography-font-size-xxs); + padding-inline: var(--str-chat__spacing-xxs); } } @@ -53,28 +53,28 @@ inset-inline-end: -2px; top: -2px; - border-radius: var(--radius-max, 9999px); + border-radius: var(--str-chat__radius-max, 9999px); border-style: solid; - border-color: var(--presence-border, #fff); + border-color: var(--str-chat__presence-border, #fff); border-width: 2px; } &.str-chat__avatar-group--online::after { - background: var(--presence-bg-online, #00c384); + background: var(--str-chat__presence-bg-online, #00c384); } &.str-chat__avatar-group--offline::after { - background: var(--presence-bg-offline, #687385); + background: var(--str-chat__presence-bg-offline, #687385); } // TODO: discuss // & > .str-chat__avatar::before { // content: ''; - // border-radius: var(--radius-max); + // border-radius: var(--str-chat__radius-max); // width: 100%; // height: 100%; - // border: 2px solid var(--border-core-on-accent); + // border: 2px solid var(--str-chat__border-core-on-accent); // background: transparent; // position: absolute; // box-sizing: content-box; @@ -90,12 +90,12 @@ height: var(--avatar-group-count-badge-size); min-width: var(--avatar-group-count-badge-size); min-height: var(--avatar-group-count-badge-size); - font-weight: var(--typography-font-weight-bold); - font-family: var(--typography-font-family-sans); + font-weight: var(--str-chat__typography-font-weight-bold); + font-family: var(--str-chat__typography-font-family-sans); justify-content: center; align-items: center; - border-radius: var(--radius-max); - background: var(--badge-bg-default); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-default); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } diff --git a/src/components/Badge/styling/Badge.scss b/src/components/Badge/styling/Badge.scss index fc9f95d9f5..a2eb9dc45e 100644 --- a/src/components/Badge/styling/Badge.scss +++ b/src/components/Badge/styling/Badge.scss @@ -5,83 +5,83 @@ display: flex; align-items: center; justify-content: center; - font-weight: var(--typography-font-weight-bold); - border-radius: var(--radius-max); + font-weight: var(--str-chat__typography-font-weight-bold); + border-radius: var(--str-chat__radius-max); line-height: 1; border-style: solid; } // Variants: map to design tokens .str-chat__badge--variant-default { - background: var(--badge-bg-default); - color: var(--badge-text); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-default); + color: var(--str-chat__badge-text); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-primary { - background: var(--badge-bg-primary); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-primary); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-error { - background: var(--badge-bg-error); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-error); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-neutral { - background: var(--badge-bg-neutral); - color: var(--badge-text-on-accent); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-neutral); + color: var(--str-chat__badge-text-on-accent); + border-color: var(--str-chat__badge-border); } .str-chat__badge--variant-inverse { - background: var(--badge-bg-inverse); - color: var(--badge-text-on-inverse); - border-color: var(--badge-border); + background: var(--str-chat__badge-bg-inverse); + color: var(--str-chat__badge-text-on-inverse); + border-color: var(--str-chat__badge-border); } // Sizes: caption-numeric equivalents (sm/12px, md/14px, lg/16px) .str-chat__badge--size-sm { - font-size: var(--typography-font-size-xxs); + font-size: var(--str-chat__typography-font-size-xxs); min-width: 16px; min-height: 16px; - padding-inline: var(--spacing-xxxs); + padding-inline: var(--str-chat__spacing-xxxs); border-width: 1px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--size-md { - font-size: var(--typography-font-size-xs); + font-size: var(--str-chat__typography-font-size-xs); min-width: 20px; min-height: 20px; - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); border-width: 2px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--size-lg { - font-size: var(--typography-font-size-sm); + font-size: var(--str-chat__typography-font-size-sm); min-width: 24px; min-height: 24px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); border-width: 2px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); } .str-chat__badge--variant-counter { - border-radius: var(--radius-max); - border: 1px solid var(--border-core-subtle); - background: var(--badge-bg-default); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__border-core-subtle); + background: var(--str-chat__badge-bg-default); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); font: var(--str-chat__font-numeric-xl); - color: var(--badge-text); + color: var(--str-chat__badge-text); &.str-chat__badge--size-xs { min-width: 20px; min-height: 20px; - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14); font: var(--str-chat__font-numeric-md); } @@ -89,19 +89,19 @@ &.str-chat__badge--size-sm { min-width: 24px; min-height: 24px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); } &.str-chat__badge--size-md { min-width: 32px; min-height: 32px; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); } &.str-chat__badge--size-lg { min-width: 40px; min-height: 40px; - padding-inline: var(--spacing-sm); + padding-inline: var(--str-chat__spacing-sm); } } diff --git a/src/components/Badge/styling/MediaBadge.scss b/src/components/Badge/styling/MediaBadge.scss index 14ee1ba5b3..f4100c3f29 100644 --- a/src/components/Badge/styling/MediaBadge.scss +++ b/src/components/Badge/styling/MediaBadge.scss @@ -1,21 +1,21 @@ .str-chat__media-badge { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); position: absolute; - bottom: var(--spacing-xs); - inset-inline-start: var(--spacing-xs); - padding: var(--spacing-xxs) var(--spacing-xs); - border-radius: var(--radius-max); - background: var(--badge-bg-inverse); - color: var(--badge-text-on-inverse); + bottom: var(--str-chat__spacing-xs); + inset-inline-start: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-inverse); + color: var(--str-chat__badge-text-on-inverse); font: var(--str-chat__font-numeric-md); overflow: hidden; text-overflow: ellipsis; .str-chat__icon { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); fill: currentColor; } } diff --git a/src/components/BaseImage/styling/ImagePlaceholder.scss b/src/components/BaseImage/styling/ImagePlaceholder.scss index 1c4813ad00..1d13973642 100644 --- a/src/components/BaseImage/styling/ImagePlaceholder.scss +++ b/src/components/BaseImage/styling/ImagePlaceholder.scss @@ -7,12 +7,12 @@ min-width: 0; min-height: 0; @include utils.flex-col-center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); svg { - fill: var(--accent-neutral); - width: min(var(--icon-size-lg, 32px), 50%); - height: min(var(--icon-size-lg, 32px), 50%); + fill: var(--str-chat__accent-neutral); + width: min(var(--str-chat__icon-size-lg, 32px), 50%); + height: min(var(--str-chat__icon-size-lg, 32px), 50%); } } } diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss index 1d31b44d59..93ba6dd1bf 100644 --- a/src/components/Button/styling/Button.scss +++ b/src/components/Button/styling/Button.scss @@ -17,54 +17,54 @@ &.str-chat__button--solid { &.str-chat__button--primary { - background-color: var(--button-primary-bg); - color: var(--button-primary-text-on-accent); + background-color: var(--str-chat__button-primary-bg); + color: var(--str-chat__button-primary-text-on-accent); } &.str-chat__button--secondary { - background-color: var(--button-secondary-bg); - color: var(--button-secondary-text-on-accent); + background-color: var(--str-chat__button-secondary-bg); + color: var(--str-chat__button-secondary-text-on-accent); } &.str-chat__button--destructive { - background-color: var(--button-destructive-bg); - color: var(--button-destructive-text-on-accent); + background-color: var(--str-chat__button-destructive-bg); + color: var(--str-chat__button-destructive-text-on-accent); } &:disabled { - background-color: var(--background-utility-disabled); + background-color: var(--str-chat__background-utility-disabled); } } &.str-chat__button--ghost { &.str-chat__button--primary { - color: var(--button-primary-text); + color: var(--str-chat__button-primary-text); } &.str-chat__button--secondary { - color: var(--button-secondary-text); + color: var(--str-chat__button-secondary-text); } &.str-chat__button--destructive { - color: var(--button-destructive-text); + color: var(--str-chat__button-destructive-text); } } // todo: shouldn't we specify also background color? &.str-chat__button--outline { &.str-chat__button--primary { - color: var(--button-primary-text); - border-color: var(--button-primary-border); + color: var(--str-chat__button-primary-text); + border-color: var(--str-chat__button-primary-border); } &.str-chat__button--secondary { - color: var(--button-secondary-text); - border-color: var(--button-secondary-border); + color: var(--str-chat__button-secondary-text); + border-color: var(--str-chat__button-secondary-border); } &.str-chat__button--destructive { - color: var(--button-destructive-text); - border-color: var(--button-destructive-border); + color: var(--str-chat__button-destructive-text); + border-color: var(--str-chat__button-destructive-border); } } @@ -77,13 +77,13 @@ &.str-chat__button--outline, &.str-chat__button--ghost { &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } &[aria-expanded='true'], &:not(:disabled):active { // pressed - @include utils.overlay-after(var(--background-utility-pressed)); + @include utils.overlay-after(var(--str-chat__background-utility-pressed)); } &:not(:disabled):focus-visible { @@ -93,17 +93,17 @@ &:not(:disabled)[aria-pressed='true'] { // toggled - @include utils.overlay-after(var(--background-utility-selected)); + @include utils.overlay-after(var(--str-chat__background-utility-selected)); } &:disabled { - color: var(--text-disabled); + color: var(--str-chat__text-disabled); cursor: default; } } &.str-chat__button--outline:disabled { - border-color: var(--border-utility-disabled); + border-color: var(--str-chat__border-utility-disabled); } &.str-chat__button--floating { @@ -115,42 +115,42 @@ } &.str-chat__button--size-lg { - padding-block: var(--button-padding-y-lg); - padding-inline: var(--button-padding-x-with-label-lg); - border-radius: var(--button-radius-lg); + padding-block: var(--str-chat__button-padding-y-lg); + padding-inline: var(--str-chat__button-padding-x-with-label-lg); + border-radius: var(--str-chat__button-radius-lg); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-lg); + padding-inline: var(--str-chat__button-padding-x-icon-only-lg); } } &.str-chat__button--size-md { - padding-block: var(--button-padding-y-md); - padding-inline: var(--button-padding-x-with-label-md); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-md); + padding-inline: var(--str-chat__button-padding-x-with-label-md); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-md); + padding-inline: var(--str-chat__button-padding-x-icon-only-md); } } &.str-chat__button--size-sm { - padding-block: var(--button-padding-y-sm); - padding-inline: var(--button-padding-x-with-label-sm); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-sm); + padding-inline: var(--str-chat__button-padding-x-with-label-sm); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-sm); + padding-inline: var(--str-chat__button-padding-x-icon-only-sm); } } &.str-chat__button--size-xs { - padding-block: var(--button-padding-y-xs); - padding-inline: var(--button-padding-x-with-label-xs); - border-radius: var(--button-radius-md); + padding-block: var(--str-chat__button-padding-y-xs); + padding-inline: var(--str-chat__button-padding-x-with-label-xs); + border-radius: var(--str-chat__button-radius-md); &.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-xs); + padding-inline: var(--str-chat__button-padding-x-icon-only-xs); } } @@ -159,11 +159,11 @@ display: flex; align-items: center; justify-content: center; - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); .str-chat__icon { - height: var(--icon-size-sm); - width: var(--icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); } } @@ -171,7 +171,7 @@ display: flex; align-items: center; justify-content: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss index bbf264e255..c615ca7121 100644 --- a/src/components/Channel/styling/Channel.scss +++ b/src/components/Channel/styling/Channel.scss @@ -1,5 +1,3 @@ -@use '../../../styling/utils'; - .str-chat__channel { height: 100%; display: flex; @@ -44,13 +42,9 @@ } .str-chat__loading-channel { - $header-bar-height: var(--size-16); - $metadata-bar-height: var(--size-16); - $composer-control-height: var(--size-48); - --str-chat__loading-channel-content-max-width: calc( - var(--str-chat__message-composer-max-width) + - var(--str-chat__message-composer-padding) - ); + $header-bar-height: var(--str-chat__size-16); + $metadata-bar-height: var(--str-chat__size-16); + $composer-control-height: var(--str-chat__size-48); height: 100%; display: flex; flex-direction: column; @@ -69,8 +63,8 @@ .str-chat__loading-channel-header-avatar { flex-shrink: 0; - width: var(--size-40); - height: var(--size-40); + width: var(--str-chat__size-40); + height: var(--str-chat__size-40); border-radius: 50%; } } @@ -81,7 +75,10 @@ .str-chat__message-list-scroll { width: 100%; height: 100%; - max-width: var(--str-chat__loading-channel-content-max-width); + max-width: calc( + var(--str-chat__message-composer-max-width) + + var(--str-chat__message-composer-padding) + ); margin-inline: auto; } } @@ -91,13 +88,13 @@ width: 100%; display: flex; flex-direction: column; - gap: var(--size-28); - padding-block: var(--size-32) var(--size-24); + gap: var(--str-chat__size-28); + padding-block: var(--str-chat__size-32) var(--str-chat__size-24); .str-chat__loading-channel-message { display: flex; width: 100%; - column-gap: var(--spacing-sm); + column-gap: var(--str-chat__spacing-sm); .str-chat__loading-channel-message-avatar { flex-shrink: 0; @@ -112,17 +109,17 @@ flex-direction: column; width: min(100%, var(--str-chat__message-max-width)); max-width: var(--str-chat__message-max-width); - row-gap: var(--size-12); + row-gap: var(--str-chat__size-12); min-width: 0; } .str-chat__loading-channel-message-bubble { width: min(100%, var(--str-chat__message-max-width)); - border-radius: var(--radius-3xl); + border-radius: var(--str-chat__radius-3xl); } .str-chat__loading-channel-message-bubble--md { - height: var(--size-64); + height: var(--str-chat__size-64); width: min(58%, 272px); } @@ -166,7 +163,7 @@ flex-shrink: 0; width: $composer-control-height; height: $composer-control-height; - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); } .str-chat__loading-channel-message-input-pill { @@ -178,46 +175,18 @@ } } -.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(--text-primary); - - /* The background color of the component */ - --str-chat__channel-background-color: var(--background-core-app); - - /* 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 base surface color behind the loading shimmer */ - --str-chat__channel-loading-state-color: var(--background-core-surface); -} - .str-chat__channel { - @include utils.component-layer-overrides('channel'); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); } @mixin channel-loading-shimmer { - background-color: var(--str-chat__channel-loading-state-color); + background-color: var(--str-chat__background-core-surface-default); background-image: linear-gradient( 90deg, - var(--skeleton-loading-base) 0%, - var(--skeleton-loading-highlight) 50%, - var(--skeleton-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; @@ -277,11 +246,11 @@ } .str-chat__loading-channel-message-input-button { - border-radius: var(--button-radius-full); + border-radius: var(--str-chat__button-radius-full); } .str-chat__loading-channel-message-input-pill { - border-radius: var(--str-chat__message-input-border-radius); + border-radius: var(--str-chat__radius-3xl); } } } diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss index 9c11285ebf..1572a30103 100644 --- a/src/components/ChannelHeader/styling/ChannelHeader.scss +++ b/src/components/ChannelHeader/styling/ChannelHeader.scss @@ -2,53 +2,27 @@ .str-chat { --str-chat__channel-header-height: 72px; - - /* 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(--background-core-elevation-1); - - /* 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: 1px solid var(--border-core-default); - - /* 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__data__subtitle-color: var(--text-secondary); } .str-chat__channel-header { - @include utils.component-layer-overrides('channel-header'); + background: var(--str-chat__background-core-elevation-1); + border-block-end: 1px solid var(--str-chat__border-core-default); @include utils.header-layout; .str-chat__channel-header__start { - flex: 1; - display: flex; + justify-self: start; + min-width: 0; } .str-chat__channel-header__data { @include utils.header-text-layout; - width: unset; + justify-self: center; + min-width: 0; } .str-chat__channel-header__end { - flex: 1; - display: flex; - justify-content: flex-end; + justify-self: end; + min-width: 0; } .str-chat__channel-header__data__title, @@ -62,6 +36,6 @@ .str-chat__channel-header__data__subtitle { font: var(--str-chat__font-caption-default); - color: var(--str-chat__channel-header__data__subtitle-color); + color: var(--str-chat__text-secondary); } } diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index 4a8e6cc8b8..1d391e03c0 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -1,18 +1,6 @@ @use '../../../styling/utils'; .str-chat { - /* The border radius used for the borders of the component */ - --str-chat__channel-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__channel-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__channel-list-background-color: var(--background-core-elevation-1); - - /* Box shadow applied to the component */ - --str-chat__channel-list-box-shadow: none; - /* Animation duration used when the component enters or exits */ --str-chat__channel-list-transition-duration: 180ms; @@ -27,72 +15,6 @@ /* Default mobile overlay width of the channel list. Override to match custom layouts. */ --str-chat__channel-list-mobile-width: 100%; - - /* Top border of the component */ - --str-chat__channel-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__channel-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__channel-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__channel-list-border-inline-end: 1px solid var(--border-core-default); - - /* The border radius used for the borders of the load more button */ - --str-chat__channel-list-load-more-border-radius: var( - --str-chat__cta-button-border-radius - ); - - /* The text/icon color of the load more button */ - --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color); - - /* The background color of the load more button */ - --str-chat__channel-list-load-more-background-color: var( - --str-chat__cta-button-background-color - ); - - /* Box shadow applied to the load more button */ - --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow); - - /* Top border of the load more button */ - --str-chat__channel-list-load-more-border-block-start: var( - --str-chat__cta-button-border-block-start - ); - - /* Bottom border of the load more button */ - --str-chat__channel-list-load-more-border-block-end: var( - --str-chat__cta-button-border-block-end - ); - - /* Left (right in RTL layout) border of the load more button */ - --str-chat__channel-list-load-more-border-inline-start: var( - --str-chat__cta-button-border-inline-start - ); - - /* Right (left in RTL layout) border of the load more button */ - --str-chat__channel-list-load-more-border-inline-end: var( - --str-chat__cta-button-border-inline-end - ); - - /* The background color of the load more button in pressed state */ - --str-chat__channel-list-load-more-pressed-background-color: var( - --str-chat__cta-button-pressed-background-color - ); - - /* The background color of the load more button in disabled state */ - --str-chat__channel-list-load-more-disabled-background-color: var( - --str-chat__cta-button-disabled-background-color - ); - - /* The text/icon color of the load more button in disabled state */ - --str-chat__channel-list-load-more-disabled-color: var( - --str-chat__cta-button-disabled-color - ); - - /* The text/icon color for the empty list state */ - --str-chat__channel-list-empty-indicator-color: var(--text-secondary); } .str-chat__channel-list { @@ -119,17 +41,20 @@ transform var(--str-chat__channel-list-transition-duration) var(--str-chat__channel-list-transition-easing); width: var(--str-chat__channel-list-width); - @include utils.scrollable-y; - @include utils.component-layer-overrides('channel-list'); + background: var(--str-chat__background-core-elevation-1); + color: var(--str-chat__text-primary); + border-inline-end: 1px solid var(--str-chat__border-core-default); .str-chat__channel-list-inner { height: 100%; overflow: hidden; - padding-bottom: calc(var(--space-8) + var(--space-2)); + padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2)); .str-chat__channel-list-inner__main { height: 100%; overflow-y: auto; + scrollbar-gutter: stable both-edges; + scrollbar-width: thin; .str-chat__channel-list-empty { height: 100%; @@ -137,10 +62,10 @@ flex-direction: column; align-items: center; justify-content: center; - padding: calc(var(--space-8) + var(--space-4)); + padding: calc(var(--str-chat__space-8) + var(--str-chat__space-4)); p { - color: var(--text-secondary); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); } } @@ -150,27 +75,17 @@ .str-chat__load-more-button { display: flex; justify-content: center; - margin: var(--space-8) 0; - - .str-chat__load-more-button__button { - @include utils.flex-row-center; - } - } - - .str-chat__load-more-button__button { - @include utils.component-layer-overrides('channel-list-load-more'); - width: 80%; + margin: var(--str-chat__space-8) 0; } .str-chat__channel-list-empty { - --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color); @include utils.empty-theme('channel-list'); - color: var(--str-chat__channel-list-empty-indicator-color); + color: var(--str-chat__text-secondary); } /* Mobile: hide when nav closed; when open show as overlay. */ @media (max-width: 767px) { - box-shadow: var(--str-chat__channel-list-box-shadow); + box-shadow: none; flex-basis: auto; inset-inline-start: 0; max-width: 100%; diff --git a/src/components/ChannelList/styling/ChannelListHeader.scss b/src/components/ChannelList/styling/ChannelListHeader.scss index bf22d494c3..9af4b46e0a 100644 --- a/src/components/ChannelList/styling/ChannelListHeader.scss +++ b/src/components/ChannelList/styling/ChannelListHeader.scss @@ -1,12 +1,12 @@ .str-chat__channel-list__header { display: flex; align-items: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); width: 100%; .str-chat__channel-list__header__title { flex: 1; font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/ChannelListItem/styling/ChannelListItem.scss b/src/components/ChannelListItem/styling/ChannelListItem.scss index 59bf1ce757..89df6cd9c8 100644 --- a/src/components/ChannelListItem/styling/ChannelListItem.scss +++ b/src/components/ChannelListItem/styling/ChannelListItem.scss @@ -1,6 +1,6 @@ .str-chat__channel-list-item-container { // display: flex; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); position: relative; &:has(.str-chat__channel-list-item__action-buttons--active), @@ -13,10 +13,10 @@ .str-chat__channel-list-item__action-buttons { display: none; position: absolute; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); - border-radius: var(--radius-md, 8px); - background: var(--background-core-elevation-3, #fff); + border-radius: var(--str-chat__radius-md, 8px); + background: var(--str-chat__background-core-elevation-3, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -25,15 +25,15 @@ inset-inline-end: 10px; top: 10px; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); & > .str-chat__button.str-chat__button--size-sm.str-chat__button--circular { - padding-inline: var(--button-padding-x-icon-only-xs); - padding-block: var(--button-padding-x-icon-only-xs); + padding-inline: var(--str-chat__button-padding-x-icon-only-xs); + padding-block: var(--str-chat__button-padding-x-icon-only-xs); } } - border-bottom: 1px solid var(--border-core-subtle); + border-bottom: 1px solid var(--str-chat__border-core-subtle); } .str-chat__channel-list-item__action-buttons-context-menu { @@ -42,26 +42,26 @@ .str-chat__channel-list-item { display: flex; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); align-items: center; - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); border: none; background: none; cursor: pointer; text-align: start; - font-family: var(--typography-font-family-sans); - border-radius: var(--radius-lg); + font-family: var(--str-chat__typography-font-family-sans); + border-radius: var(--str-chat__radius-lg); width: 100%; - background: var(--background-core-elevation-1); + background: var(--str-chat__background-core-elevation-1); &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } .str-chat__avatar { @@ -71,7 +71,7 @@ .str-chat__channel-list-item-data { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex-shrink: 1; flex-grow: 1; min-width: 0; @@ -80,7 +80,7 @@ display: flex; justify-content: space-between; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); .str-chat__channel-list-item-data__title { flex-shrink: 1; @@ -89,11 +89,11 @@ display: flex; align-items: inherit; - gap: var(--spacing-xxs); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-primary); + gap: var(--str-chat__spacing-xxs); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-primary); & > span { overflow-x: hidden; @@ -102,9 +102,9 @@ } & > .str-chat__icon--mute { - color: var(--text-tertiary); - width: var(--icon-size-sm); - height: var(--icon-size-sm); + color: var(--str-chat__text-tertiary); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } @@ -112,13 +112,13 @@ flex-shrink: 0; display: flex; align-items: inherit; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); .str-chat__channel-list-item-timestamp { - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + line-height: var(--str-chat__typography-line-height-normal); } } } diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss index 52cdacf4b1..df6bbaad0a 100644 --- a/src/components/ChatView/styling/ChatView.scss +++ b/src/components/ChatView/styling/ChatView.scss @@ -1,17 +1,11 @@ .str-chat { - --str-chat-selector-background-color: var(--background-core-elevation-1); - --str-chat-selector-border-color: var(--border-core-subtle); --str-chat__chat-view-selector-transition-duration: 180ms; --str-chat__chat-view-selector-transition-easing: ease; --str-chat__chat-view-selector-transition-offset: 8px; --str-chat__chat-view-selector-mobile-width: calc( - var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px + var(--str-chat__spacing-md) + var(--str-chat__spacing-md) + + var(--str-chat__spacing-xs) + var(--str-chat__spacing-xs) + 20px ); - - --str-chat-selector-button-color-default: var(--text-tertiary); - --str-chat-selector-button-color-selected: var(--text-primary); - --str-chat-selector-button-background-color-default: transparent; - --str-chat-selector-button-background-color-selected: var(--background-core-surface); } .str-chat__chat-view { @@ -20,15 +14,15 @@ height: 100%; min-height: 0; position: relative; - background-color: var(--background-core-app); + background-color: var(--str-chat__background-core-app); .str-chat__chat-view__selector { display: flex; flex-direction: column; - padding: var(--spacing-md); - gap: var(--spacing-xs); - border-inline-end: 1px solid var(--str-chat-selector-border-color); - background-color: var(--str-chat-selector-background-color); + padding: var(--str-chat__spacing-md); + gap: var(--str-chat__spacing-xs); + border-inline-end: 1px solid var(--str-chat__border-core-subtle); + background-color: var(--str-chat__background-core-elevation-1); .str-chat__chat-view__selector-button-container { display: flex; @@ -43,30 +37,26 @@ } .str-chat__chat-view__selector-button { - --str-chat-icon-height: 20px; - --str-chat-icon-width: 20px; --str-chat-unread-count-badge-absolute-offset-vertical: 25%; - --str-chat-icon-color: var(--str-chat-selector-button-color-default); gap: 4px; - padding: var(--spacing-xs); - border-radius: var(--radius-md); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-md); font: var(--str-chat__font-caption-emphasis); line-height: 1; position: relative; - background: var(--str-chat-selector-button-background-color-default); - color: var(--str-chat-selector-button-color-default); + background: transparent; + color: var(--str-chat__text-tertiary); &[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); + color: var(--str-chat__text-primary); + background: var(--str-chat__background-core-surface-default); } - svg { - height: var(--str-chat-icon-height); - width: var(--str-chat-icon-height); + .str-chat__icon { + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } .str-chat__button__content { diff --git a/src/components/DateSeparator/styling/DateSeparator.scss b/src/components/DateSeparator/styling/DateSeparator.scss index 06ada95329..678fe7a25c 100644 --- a/src/components/DateSeparator/styling/DateSeparator.scss +++ b/src/components/DateSeparator/styling/DateSeparator.scss @@ -1,16 +1,3 @@ -@use '../../../styling/utils'; - -.str-chat { - --str-chat__date-separator-color: var(--chat-text-system); - --str-chat__date-separator-border-radius: 0; - --str-chat__date-separator-background-color: transparent; - --str-chat__date-separator-border-block-start: none; - --str-chat__date-separator-border-block-end: none; - --str-chat__date-separator-border-inline-start: none; - --str-chat__date-separator-border-inline-end: none; - --str-chat__date-separator-box-shadow: none; -} - .str-chat__date-separator--floating { position: absolute; top: 0; @@ -23,21 +10,22 @@ } .str-chat__date-separator { - @include utils.component-layer-overrides('date-separator'); + background: transparent; + color: var(--str-chat__chat-text-system); display: flex; justify-content: center; align-items: center; width: 100%; - padding: var(--spacing-xs) 0; + padding: var(--str-chat__spacing-xs) 0; .str-chat__date-separator-date { display: flex; - padding: var(--spacing-xxs) var(--spacing-sm); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); justify-content: center; align-items: center; - color: var(--chat-text-system); - background-color: var(--background-core-surface-subtle); - border-radius: var(--radius-max); + color: var(--str-chat__chat-text-system); + background-color: var(--str-chat__background-core-surface-subtle); + border-radius: var(--str-chat__radius-max); font: var(--str-chat__font-metadata-emphasis); } diff --git a/src/components/Dialog/styling/Alert.scss b/src/components/Dialog/styling/Alert.scss index 3a9f9ba0fa..008abaa4cf 100644 --- a/src/components/Dialog/styling/Alert.scss +++ b/src/components/Dialog/styling/Alert.scss @@ -9,23 +9,23 @@ .str-chat__alert-root { @include utils.modal; @include flex-column; - gap: var(--spacing-2xl); - padding: var(--spacing-xl); + gap: var(--str-chat__spacing-2xl); + padding: var(--str-chat__spacing-xl); text-align: center; .str-chat__alert-header { @include flex-column; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; svg { - height: var(--button-visual-height-sm); - width: var(--button-visual-height-sm); + height: var(--str-chat__button-visual-height-sm); + width: var(--str-chat__button-visual-height-sm); } .str-chat__alert-header__copy { @include flex-column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; .str-chat__alert-header__title { @@ -40,7 +40,7 @@ .str-chat__alert-actions { @include flex-column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; button { diff --git a/src/components/Dialog/styling/Callout.scss b/src/components/Dialog/styling/Callout.scss index cdc0aaa853..1db8b35189 100644 --- a/src/components/Dialog/styling/Callout.scss +++ b/src/components/Dialog/styling/Callout.scss @@ -1,13 +1,13 @@ .str-chat__callout { position: relative; max-width: 320px; - border-radius: var(--radius-lg); - background-color: var(--background-core-elevation-2); + border-radius: var(--str-chat__radius-lg); + background-color: var(--str-chat__background-core-elevation-2); box-shadow: var(--str-chat__box-shadow-3); .str-chat__callout__close-button { position: absolute; - inset-inline-end: var(--spacing-xs); - top: var(--spacing-xs); + inset-inline-end: var(--str-chat__spacing-xs); + top: var(--str-chat__spacing-xs); } } diff --git a/src/components/Dialog/styling/ContextMenu.scss b/src/components/Dialog/styling/ContextMenu.scss index bc274706ff..6306bf1c31 100644 --- a/src/components/Dialog/styling/ContextMenu.scss +++ b/src/components/Dialog/styling/ContextMenu.scss @@ -73,102 +73,61 @@ } .str-chat { - /* - * Dialog theme variables (ported from @stream-chat-css v2 Dialog theme), - * set to match the current React SDK styling values in this file. - * - * Note: React uses `str-chat__context-menu` naming; v2 theme calls this "dialog-menu". - */ - --str-chat__dialog-menu-border-radius: var(--radius-lg); - --str-chat__dialog-menu-color: var(--text-primary); - --str-chat__dialog-menu-background-color: var(--background-core-elevation-2); - --str-chat__dialog-menu-border-block-start: none; - --str-chat__dialog-menu-border-block-end: none; - --str-chat__dialog-menu-border-inline-start: none; - --str-chat__dialog-menu-border-inline-end: none; - --str-chat__dialog-menu-box-shadow: var(--str-chat__box-shadow-3); - - --str-chat__dialog-menu-button-border-radius: var(--radius-md); - --str-chat__dialog-menu-button-color: var(--text-primary); - --str-chat__dialog-menu-button-background-color: transparent; - --str-chat__dialog-menu-button-hover-background-color: var(--background-utility-hover); - --str-chat__dialog-menu-button-active-background-color: var( - --background-utility-pressed + --str-chat__dialog-menu-button-hover-background-color: var( + --str-chat__background-utility-hover ); - --str-chat__dialog-menu-button-focused-background-color: transparent; - --str-chat__dialog-menu-button-disabled-background-color: transparent; - --str-chat__dialog-menu-back-button-hover-background-color: var( - --background-utility-hover - ); - --str-chat__dialog-menu-back-button-active-background-color: var( - --background-utility-pressed - ); - --str-chat__dialog-menu-back-button-focused-background-color: transparent; - --str-chat__dialog-menu-back-button-disabled-background-color: transparent; - --str-chat__dialog-menu-button-border-block-start: none; - --str-chat__dialog-menu-button-border-block-end: none; - --str-chat__dialog-menu-button-border-inline-start: none; - --str-chat__dialog-menu-button-border-inline-end: none; - --str-chat__dialog-menu-button-box-shadow: none; --str-chat__menu-roll-duration: 170ms; --str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1); - --str-chat__menu-submenu-forward-duration: 280ms; - --str-chat__menu-submenu-backward-duration: 400ms; - --str-chat__menu-submenu-forward-ease: cubic-bezier(0.2, 0.95, 0.25, 1); - --str-chat__menu-submenu-backward-ease: cubic-bezier(0.16, 0.92, 0.2, 1); .str-chat__context-menu { - @include utils.component-layer-overrides('dialog-menu'); + background: var(--str-chat__background-core-elevation-2); + color: var(--str-chat__text-primary); + box-shadow: var(--str-chat__box-shadow-3); + border-radius: var(--str-chat__radius-lg); display: flex; flex-direction: column; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); .str-chat__context-menu__header { width: 100%; - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight); + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__context-menu__back-button { @include utils.button-reset; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); height: 32px; width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); text-align: center; cursor: pointer; - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold, 600); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold, 600); + line-height: var(--str-chat__typography-line-height-tight); &:hover:not(:disabled) { - background-color: var(--str-chat__dialog-menu-back-button-hover-background-color); + background-color: var(--str-chat__background-utility-hover); } &:active:not(:disabled) { - background-color: var( - --str-chat__dialog-menu-back-button-active-background-color - ); + background-color: var(--str-chat__background-utility-pressed); } &:focus-visible:not(:disabled) { - background-color: var( - --str-chat__dialog-menu-back-button-focused-background-color - ); + background-color: transparent; } &:disabled { - background-color: var( - --str-chat__dialog-menu-back-button-disabled-background-color - ); + background-color: transparent; } .str-chat__icon--chevron-right { @@ -180,20 +139,17 @@ width: 100%; display: flex; flex-direction: column; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); overflow-x: hidden; } .str-chat__context-menu__body.str-chat__context-menu__body--submenu-forward { - animation-duration: var(--str-chat__menu-submenu-forward-duration, 220ms); + animation-duration: 280ms; animation-name: var( --str-chat__context-menu-submenu-forward-animation, str-chat-context-menu-submenu-forward ); - animation-timing-function: var( - --str-chat__menu-submenu-forward-ease, - cubic-bezier(0.25, 0.9, 0.35, 1) - ); + animation-timing-function: cubic-bezier(0.2, 0.95, 0.25, 1); transform-origin: var( --str-chat__context-menu-submenu-forward-transform-origin, left center @@ -201,15 +157,12 @@ } .str-chat__context-menu__body.str-chat__context-menu__body--submenu-backward { - animation-duration: var(--str-chat__menu-submenu-backward-duration, 320ms); + animation-duration: 400ms; animation-name: var( --str-chat__context-menu-submenu-backward-animation, str-chat-context-menu-submenu-backward ); - animation-timing-function: var( - --str-chat__menu-submenu-backward-ease, - cubic-bezier(0.2, 0.75, 0.2, 1) - ); + animation-timing-function: cubic-bezier(0.16, 0.92, 0.2, 1); transform-origin: var( --str-chat__context-menu-submenu-backward-transform-origin, right center @@ -217,23 +170,25 @@ } .str-chat__context-menu__button { - @include utils.component-layer-overrides('dialog-menu-button'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__radius-md); @include utils.button-reset; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); cursor: pointer; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); &.str-chat__context-menu__button--destructive { .str-chat__context-menu__button__label, .str-chat__icon { - color: var(--accent-error); + color: var(--str-chat__accent-error); } } @@ -242,43 +197,43 @@ } &:active:not(:disabled) { - background-color: var(--str-chat__dialog-menu-button-active-background-color); + background-color: var(--str-chat__background-utility-pressed); } &:focus-visible:not(:disabled) { - background-color: var(--str-chat__dialog-menu-button-focused-background-color); + background-color: transparent; } &:disabled { - background-color: var(--str-chat__dialog-menu-button-disabled-background-color); + background-color: transparent; } .str-chat__icon { - height: var(--icon-size-sm); - width: var(--icon-size-sm); - color: var(--text-secondary); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); + color: var(--str-chat__text-secondary); } .str-chat__context-menu__button__label { @include utils.ellipsis-text; flex: auto; text-align: start; - color: var(--text-primary); + color: var(--str-chat__text-primary); white-space: nowrap; min-width: 0; } .str-chat__context-menu__button__details { flex: 1; - color: var(--text-tertiary); - font-weight: var(--typography-font-weight-regular); + color: var(--str-chat__text-tertiary); + font-weight: var(--str-chat__typography-font-weight-regular); white-space: nowrap; } } .str-chat__emoji-context-menu__button, .str-chat__user-context-menu__button { - font-weight: var(--typography-font-weight-regular, 400); + font-weight: var(--str-chat__typography-font-weight-regular, 400); } } diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss index 1fa837d507..82fd7007b8 100644 --- a/src/components/Dialog/styling/Prompt.scss +++ b/src/components/Dialog/styling/Prompt.scss @@ -7,41 +7,41 @@ .str-chat__prompt__header { display: flex; align-items: center; - gap: var(--spacing-xs) var(--spacing-md); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__prompt__header__title-group { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1; min-width: 0; } .str-chat__prompt__header__title { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__prompt__header__description { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__prompt__header__close-button { flex-shrink: 0; - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__icon { - width: var(--icon-size-md); - height: var(--icon-size-md); + width: var(--str-chat__icon-size-md); + height: var(--str-chat__icon-size-md); } } } .str-chat__prompt__body { /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */ - padding: var(--spacing-xxs) var(--spacing-xl); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xl); @include utils.scrollable-y; } @@ -50,12 +50,12 @@ align-items: center; justify-content: flex-end; width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__prompt__footer__controls { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } } diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss index d05b9cb46b..265ba256b6 100644 --- a/src/components/Dialog/styling/Viewer.scss +++ b/src/components/Dialog/styling/Viewer.scss @@ -12,26 +12,26 @@ .str-chat__viewer__header { display: flex; align-items: center; - gap: var(--spacing-xs) var(--spacing-md); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__viewer__header__title-group { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1; min-width: 0; } .str-chat__viewer__header__title { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__viewer__header__description { font: var(--str-chat__font-caption-default); - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__viewer__header__go-back-button { @@ -44,12 +44,12 @@ .str-chat__viewer__header__close-button { flex-shrink: 0; - color: var(--text-primary); + color: var(--str-chat__text-primary); } } .str-chat__viewer__body { - padding: 0 var(--spacing-xl); + padding: 0 var(--str-chat__spacing-xl); flex: 1; min-height: 0; } @@ -59,12 +59,12 @@ align-items: center; justify-content: flex-end; width: 100%; - padding: var(--spacing-xl); + padding: var(--str-chat__spacing-xl); .str-chat__viewer__footer__controls { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } } } diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss index c6696199ac..1a758910b4 100644 --- a/src/components/DragAndDrop/styling/DragAndDropContainer.scss +++ b/src/components/DragAndDrop/styling/DragAndDropContainer.scss @@ -1,26 +1,6 @@ // Ported from stream-chat-css DragAndDropContainer (layout + theme) -.str-chat { - /* Top border of the component */ - --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent; - - /* Bottom border of the component */ - --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent; - - /* Top border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid - var(--accent-primary); - - /* Bottom border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid - var(--accent-primary); - - /* Left (right in RTL layout) border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none; - - /* Right (left in RTL layout) border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none; -} +$drag-and-drop-container-border-block-start: 2px solid transparent; .str-chat__drag-and-drop-container--dragging { cursor: grabbing; @@ -38,14 +18,14 @@ display: flex; width: 100%; padding-block: 0.25rem; - border-bottom: var(--str-chat__drag-and-drop-container-border-block-start); - border-top: var(--str-chat__drag-and-drop-container-border-block-start); + border-block-start: $drag-and-drop-container-border-block-start; + border-block-end: $drag-and-drop-container-border-block-start; &.str-chat__drag-and-drop-container__item--dragged-over-from-top { - border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end); + border-block-end: 2px solid var(--str-chat__accent-primary); } &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { - border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start); + border-block-start: 2px solid var(--str-chat__accent-primary); } } diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss index 0f2fb27138..2d10ddf99e 100644 --- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss +++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss @@ -1,18 +1,16 @@ -@use '../../../styling/utils'; - .str-chat__empty-channel { - --str-chat-icon-color: var(--text-tertiary); + --str-chat-icon-color: var(--str-chat__text-tertiary); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); position: relative; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); text-align: center; - @include utils.component-layer-overrides('channel'); - color: var(--text-secondary); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); svg { diff --git a/src/components/Form/styling/FieldError.scss b/src/components/Form/styling/FieldError.scss index 49b072d803..b9736c4b69 100644 --- a/src/components/Form/styling/FieldError.scss +++ b/src/components/Form/styling/FieldError.scss @@ -1,5 +1,5 @@ .str-chat__form-field-error { - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); - color: var(--accent-error); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__accent-error); } diff --git a/src/components/Form/styling/NumericInput.scss b/src/components/Form/styling/NumericInput.scss index 434e5d1273..65031416c3 100644 --- a/src/components/Form/styling/NumericInput.scss +++ b/src/components/Form/styling/NumericInput.scss @@ -4,7 +4,7 @@ .str-chat__form-numeric-input { display: flex; flex-direction: column; - gap: var(--spacing-xs, 0.5rem); + gap: var(--str-chat__spacing-xs, 0.5rem); &__label { font: var(--str-chat__caption-default-text); @@ -13,10 +13,10 @@ &__wrapper { display: flex; align-items: center; - gap: var(--spacing-xs, 0.5rem); + gap: var(--str-chat__spacing-xs, 0.5rem); padding: 0; background: transparent; - border-radius: var(--radius-md, 0.5rem); + border-radius: var(--str-chat__radius-md, 0.5rem); outline: none; transition: border-color 0.15s ease, @@ -28,11 +28,11 @@ flex: 0 1 auto; min-width: 2ch; width: 2.5rem; - padding: var(--spacing-xs, 0.5rem) 0; - font-size: var(--typography-font-size-sm, 0.875rem); - font-weight: var(--typography-font-weight-medium, 500); - line-height: var(--typography-line-height-tight, 1.25); - color: var(--input-text-default, #1a1b25); + padding: var(--str-chat__spacing-xs, 0.5rem) 0; + font-size: var(--str-chat__typography-font-size-sm, 0.875rem); + font-weight: var(--str-chat__typography-font-weight-medium, 500); + line-height: var(--str-chat__typography-line-height-tight, 1.25); + color: var(--str-chat__input-text-default, #1a1b25); text-align: center; background: transparent; border: none; @@ -40,11 +40,11 @@ box-shadow: none; &::placeholder { - color: var(--input-text-placeholder, var(--text-tertiary)); + color: var(--str-chat__input-text-placeholder, var(--str-chat__text-tertiary)); } .str-chat__form-numeric-input--disabled & { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); cursor: not-allowed; } } diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss index 65ba411f57..c6c2ea6d99 100644 --- a/src/components/Form/styling/SwitchField.scss +++ b/src/components/Form/styling/SwitchField.scss @@ -2,20 +2,15 @@ // Single row: [label / title+description] [optional expanded content] [toggle] // CSS variables aligned with Figma tokens; fallbacks from get_variable_defs. +$switch-field-track-height: 24px; +$switch-field-track-thumb-bg: var(--str-chat__base-white, #ffffff); +$switch-field-track-radius: var(--str-chat__button-radius-full, 9999px); + .str-chat { - --str-chat__switch-field-background-color: var(--background-core-surface-card); - --str-chat__switch-field-border-radius: var(--radius-md); - --str-chat__switch-field__track-off-bg: var( - --control-toggle-switch-bg, - var(--border-core-on-surface, #a3acba) - ); - --str-chat__switch-field__track-on-bg: var( - --control-toggle-switch-bg-selected, - #005fff + --str-chat__switch-field-background-color: var( + --str-chat__background-core-surface-card ); - --str-chat__switch-field__track-thumb-bg: var(--base-white, #ffffff); - --str-chat__switch-field__track-height: 24px; - --str-chat__switch-field__track-radius: var(--button-radius-full, 9999px); + --str-chat__switch-field-border-radius: var(--str-chat__radius-md); .str-chat__form__switch-fieldset { width: 100%; @@ -26,9 +21,9 @@ .str-chat__form__switch-field { display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); width: 100%; - padding: var(--spacing-sm) var(--spacing-md); + padding: var(--str-chat__spacing-sm) var(--str-chat__spacing-md); background-color: var(--str-chat__switch-field-background-color); border-radius: var(--str-chat__switch-field-border-radius); box-sizing: border-box; @@ -58,27 +53,27 @@ align-items: center; flex-shrink: 0; width: 44px; - height: var(--str-chat__switch-field__track-height); - padding: var(--spacing-xxs); + height: $switch-field-track-height; + padding: var(--str-chat__spacing-xxs); cursor: pointer; - background-color: var(--str-chat__switch-field__track-off-bg); - border-radius: var(--str-chat__switch-field__track-radius); + background-color: var(--str-chat__control-toggle-switch-bg); + border-radius: $switch-field-track-radius; transition: background-color 0.2s ease; &-handle { - width: calc(var(--str-chat__switch-field__track-height) - 8px); - height: calc(var(--str-chat__switch-field__track-height) - 8px); - border-radius: var(--str-chat__switch-field__track-radius); - background-color: var(--str-chat__switch-field__track-thumb-bg); + width: calc($switch-field-track-height - 8px); + height: calc($switch-field-track-height - 8px); + border-radius: $switch-field-track-radius; + background-color: $switch-field-track-thumb-bg; transition: transform 0.2s ease; } &--on { - background-color: var(--str-chat__switch-field__track-on-bg); + background-color: var(--str-chat__control-toggle-switch-bg-selected); justify-content: flex-end; .str-chat__form__switch-field__switch-handle { - background-color: var(--str-chat__switch-field__track-thumb-bg); + background-color: $switch-field-track-thumb-bg; } } } @@ -96,12 +91,12 @@ .str-chat__form__switch-field__label { .str-chat__form__switch-field__label__text { - color: var(--text-primary); + color: var(--str-chat__text-primary); font: var(--str-chat__font-heading-xs); } .str-chat__form__switch-field__label__description { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); font: var(--str-chat__font-metadata-default); } } @@ -113,7 +108,7 @@ .str-chat__form__switch-field__label--as-error { .str-chat__form__switch-field__label__description { - color: var(--accent-error); + color: var(--str-chat__accent-error); } } } diff --git a/src/components/Form/styling/TextInput.scss b/src/components/Form/styling/TextInput.scss index 72e5126e45..e418a7be55 100644 --- a/src/components/Form/styling/TextInput.scss +++ b/src/components/Form/styling/TextInput.scss @@ -1,14 +1,14 @@ .str-chat__form-text-input { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); } .str-chat__form-text-input__label { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-tight); - color: var(--text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__text-primary); } /* Column shell: control row + optional in-border error */ @@ -17,8 +17,8 @@ flex-direction: column; align-items: stretch; gap: 0; - background-color: var(--background-core-elevation-0); - border-radius: var(--radius-md); + background-color: var(--str-chat__background-core-elevation-0); + border-radius: var(--str-chat__radius-md); outline: none; transition: border-color 0.15s ease, @@ -28,8 +28,8 @@ .str-chat__form-text-input__control-row { display: flex; align-items: center; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); min-width: 0; width: 100%; } @@ -38,7 +38,7 @@ // Outline variant — always 1px border on wrapper; + 2px focus ring on focus-within // --------------------------------------------------------------------------- .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-core-default); + border: 1px solid var(--str-chat__border-core-default); box-shadow: none; } @@ -48,18 +48,18 @@ } .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); } /* In-border error: shell keeps default outline (red only on message row) */ .str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-core-default); + border: 1px solid var(--str-chat__border-core-default); } .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -70,7 +70,7 @@ } .str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline { - border: 1px solid var(--border-utility-disabled); + border: 1px solid var(--str-chat__border-utility-disabled); } // --------------------------------------------------------------------------- @@ -87,7 +87,7 @@ } .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -99,7 +99,7 @@ .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost { - border: 1px solid var(--border-utility-error); + border: 1px solid var(--str-chat__border-utility-error); box-shadow: none; } @@ -117,7 +117,7 @@ align-items: center; justify-content: center; flex-shrink: 0; - color: var(--input-text-icon); + color: var(--str-chat__input-text-icon); } .str-chat__form-text-input .str-chat__form-text-input__input { @@ -125,7 +125,7 @@ min-width: 0; padding: 0; font: var(--str-chat__caption-default-text); - color: var(--input-text-default); + color: var(--str-chat__input-text-default); background: transparent; border: none; outline: none; @@ -134,18 +134,18 @@ } .str-chat__form-text-input .str-chat__form-text-input__input::placeholder { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); } .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); cursor: not-allowed; } .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input::placeholder { - color: var(--input-text-placeholder); + color: var(--str-chat__input-text-placeholder); } .str-chat__form-text-input .str-chat__form-text-input__input:focus, @@ -157,9 +157,9 @@ .str-chat__form-text-input__suffix { flex-shrink: 0; - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); } .str-chat__form-text-input__trailing { @@ -167,32 +167,33 @@ align-items: center; justify-content: center; flex-shrink: 0; - margin-inline-end: calc(-1 * var(--space-4)); - color: var(--input-text-icon); + margin-inline-end: calc(-1 * var(--str-chat__space-4)); + color: var(--str-chat__input-text-icon); } .str-chat__form-text-input--error .str-chat__form-text-input__trailing { - color: var(--accent-error); + color: var(--str-chat__accent-error); } .str-chat__form-text-input__message { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); font: var(--str-chat__metadata-default-text); } /* Base typography/color only when not error (error uses str-chat__form-field-error) */ .str-chat__form-text-input__message:not(.str-chat__form-field-error) { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__form-text-input__message--field-message-inside { - padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm); + padding: var(--str-chat__spacing-none) var(--str-chat__spacing-sm) + var(--str-chat__spacing-sm); } .str-chat__form-text-input__message--success { - color: var(--accent-success); + color: var(--str-chat__accent-success); } .str-chat__form-text-input__message-text { diff --git a/src/components/Form/styling/TextInputFieldset.scss b/src/components/Form/styling/TextInputFieldset.scss index 1490d85590..df60618ea2 100644 --- a/src/components/Form/styling/TextInputFieldset.scss +++ b/src/components/Form/styling/TextInputFieldset.scss @@ -4,10 +4,10 @@ border: none; .str-chat__form__input-fieldset__label { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-tight); - color: var(--text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-tight); + color: var(--str-chat__text-primary); } .str-chat__form__input-fieldset__values { diff --git a/src/components/Gallery/styling/Gallery.scss b/src/components/Gallery/styling/Gallery.scss index 68f9a3e2e1..05deb742de 100644 --- a/src/components/Gallery/styling/Gallery.scss +++ b/src/components/Gallery/styling/Gallery.scss @@ -22,12 +22,7 @@ } .str-chat__gallery { - --str-chat__gallery-action-button-color: rgba(255, 255, 255, 0.88); - --str-chat__gallery-action-button-hover-color: #ffffff; - --str-chat__gallery-action-button-hover-background: rgba(255, 255, 255, 0.14); - --str-chat__gallery-action-button-active-background: rgba(255, 255, 255, 0.2); - --str-chat__gallery-foreground: var(--text-on-accent); - --str-chat__gallery-muted-foreground: rgba(255, 255, 255, 0.72); + --str-chat__gallery-foreground: var(--str-chat__text-on-accent); --str-chat__gallery-nav-border: none; --str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92); --str-chat__gallery-nav-color: #101828; @@ -48,16 +43,16 @@ } &.str-chat__modal.str-chat__gallery-modal { - --str-chat__modal-overlay-color: var(--background-core-scrim); + --str-chat__modal-overlay-color: var(--str-chat__background-core-scrim); --str-chat__modal-overlay-backdrop-filter: none; } .str-chat__gallery__header { - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); pointer-events: none; width: 100%; } @@ -82,7 +77,7 @@ .str-chat__gallery__timestamp { display: block; margin-top: 2px; - color: var(--str-chat__gallery-muted-foreground); + color: rgba(255, 255, 255, 0.72); font: var(--str-chat__font-metadata-default); } @@ -90,7 +85,7 @@ display: inline-flex; align-items: center; justify-self: end; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); pointer-events: auto; } @@ -102,10 +97,10 @@ width: 2rem; height: 2rem; padding: 0; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); border: 0; background-color: transparent; - color: var(--str-chat__gallery-action-button-color); + color: rgba(255, 255, 255, 0.88); text-decoration: none; opacity: 0.92; @@ -117,13 +112,13 @@ } &:hover { - background-color: var(--str-chat__gallery-action-button-hover-background); - color: var(--str-chat__gallery-action-button-hover-color); + background-color: rgba(255, 255, 255, 0.14); + color: #ffffff; opacity: 1; } &:active { - background-color: var(--str-chat__gallery-action-button-active-background); + background-color: rgba(255, 255, 255, 0.2); } &:focus-visible { @@ -131,8 +126,8 @@ } .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } @@ -159,7 +154,7 @@ width: 100%; height: 100%; min-height: 0; - padding: var(--size-64); + padding: var(--str-chat__size-64); box-sizing: border-box; overflow: hidden; touch-action: pan-y pinch-zoom; @@ -220,7 +215,7 @@ height: 2rem; padding: 0; border: var(--str-chat__gallery-nav-border); - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); background-color: var(--str-chat__gallery-nav-background); color: var(--str-chat__gallery-nav-color); box-shadow: var(--str-chat__gallery-nav-box-shadow); @@ -255,11 +250,11 @@ } .str-chat__gallery__nav-button--prev { - inset-inline-start: var(--spacing-sm); + inset-inline-start: var(--str-chat__spacing-sm); } .str-chat__gallery__nav-button--next { - inset-inline-end: var(--spacing-sm); + inset-inline-end: var(--str-chat__spacing-sm); } .str-chat__gallery__position-indicator { @@ -272,7 +267,7 @@ display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); } .str-chat__gallery__loading { @@ -283,11 +278,11 @@ .str-chat__gallery__error { @include utils.flex-col-center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); width: 100%; height: 100%; - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); } &.str-chat__theme-dark { @@ -302,7 +297,7 @@ @media only screen and (max-device-width: 768px) { .str-chat__gallery__header { - inset: var(--spacing-xs) var(--spacing-xs) auto; + inset: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs) auto; } .str-chat__gallery__nav-button { diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss index 03b98d5b0c..1b34933199 100644 --- a/src/components/Loading/styling/LoadingChannels.scss +++ b/src/components/Loading/styling/LoadingChannels.scss @@ -1,21 +1,16 @@ @mixin channel-list-item-shimmer { - background-color: var(--str-chat__channel-list-item-loading-state-color); + background-color: var(--str-chat__background-core-surface-default); background-image: linear-gradient( 90deg, - var(--skeleton-loading-base) 0%, - var(--skeleton-loading-highlight) 50%, - var(--skeleton-loading-base) 100% + var(--str-chat__skeleton-loading-base) 0%, + var(--str-chat__skeleton-loading-highlight) 50%, + var(--str-chat__skeleton-loading-base) 100% ); background-repeat: no-repeat; background-size: 200% 100%; animation: loading-channels-shimmer 1.2s linear infinite; } -.str-chat { - /* The base surface color behind the channel list loading shimmer */ - --str-chat__channel-list-item-loading-state-color: var(--background-core-surface); -} - .str-chat__loading-channels { display: flex; flex-direction: column; @@ -43,14 +38,14 @@ .str-chat__loading-channels-avatar { flex-shrink: 0; - width: var(--size-48); - height: var(--size-48); + width: var(--str-chat__size-48); + height: var(--str-chat__size-48); border-radius: 50%; } .str-chat__loading-channels-username, .str-chat__loading-channels-status { - height: var(--size-20); + height: var(--str-chat__size-20); border-radius: 999px; -webkit-mask-image: linear-gradient( 90deg, diff --git a/src/components/Location/styling/ShareLocationDialog.scss b/src/components/Location/styling/ShareLocationDialog.scss index d4d51d597c..091a5870d0 100644 --- a/src/components/Location/styling/ShareLocationDialog.scss +++ b/src/components/Location/styling/ShareLocationDialog.scss @@ -1,5 +1,7 @@ @use '../../../styling/utils'; +$duration-selector-min-width: 120px; + .str-chat__share-location-dialog { width: 100%; max-width: 520px; @@ -18,7 +20,7 @@ &.str-chat__live-location-activation--expanded { .str-chat__form__switch-field { - padding-bottom: var(--spacing-xxs); + padding-bottom: var(--str-chat__spacing-xxs); } } @@ -28,25 +30,23 @@ } .str-chat__live-location-sharing-duration-selector { - padding-inline: calc(var(--spacing-md) - var(--spacing-xs)); - padding-bottom: var(--spacing-xs); - --str-chat__duration-selector-min-width: 120px; - + padding-inline: calc(var(--str-chat__spacing-md) - var(--str-chat__spacing-xs)); + padding-bottom: var(--str-chat__spacing-xs); .str-chat__live-location-sharing-duration-selector__button { @include utils.button-reset; align-items: center; background: transparent; - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); color: inherit; cursor: pointer; display: flex; justify-content: space-between; - min-width: var(--str-chat__duration-selector-min-width); + min-width: $duration-selector-min-width; font: var(--str-chat__font-caption-default); } .str-chat__context-menu { - min-width: var(--str-chat__duration-selector-min-width); + min-width: $duration-selector-min-width; } .str-chat__live-location-sharing-duration-option { width: 100%; diff --git a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss index 405f1f63c5..e07caf49a2 100644 --- a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss +++ b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss @@ -6,8 +6,8 @@ justify-content: center; max-width: var(--str-chat__message-composer-max-width); width: 100%; - border-radius: var(--radius-3xl); - border: 1px solid var(--border-core-default); + border-radius: var(--str-chat__radius-3xl); + border: 1px solid var(--str-chat__border-core-default); background: var(--composer-bg); position: relative; @@ -17,17 +17,17 @@ min-width: 0; display: flex; align-items: center; - gap: var(--spacing-md); - padding: var(--spacing-xs); - padding-inline-start: var(--spacing-sm); + gap: var(--str-chat__spacing-md); + padding: var(--str-chat__spacing-xs); + padding-inline-start: var(--str-chat__spacing-sm); .str-chat__recording-timer { display: flex; align-items: center; width: 2.75rem; - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__recording-timer--hours { @@ -37,15 +37,15 @@ .str-chat__audio-recorder__recording-playback--isPlaying { .str-chat__recording-timer { - color: var(--chat-waveform-bar-playing); + color: var(--str-chat__chat-waveform-bar-playing); } } .str-chat__audio-recorder__recording-preview { .str-chat__icon--voice { - height: var(--icon-size-sm); - width: var(--icon-size-sm); - color: var(--button-destructive-text); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); + color: var(--str-chat__button-destructive-text); } } @@ -53,8 +53,8 @@ .str-chat__audio_recorder__cancel-button, .str-chat__audio_recorder__toggle-recording-button { svg { - height: var(--icon-size-sm); - width: 18px; // var(18px, --icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: 18px; // var(18px, --str-chat__icon-size-sm); } } @@ -66,10 +66,10 @@ width: 32px; padding: 0; cursor: pointer; - --str-chat-icon-color: var(--text-on-accent); - border-radius: var(--radius-max); - color: var(--text-on-accent); - background-color: var(--accent-primary); + --str-chat-icon-color: var(--str-chat__text-on-accent); + border-radius: var(--str-chat__radius-max); + color: var(--str-chat__text-on-accent); + background-color: var(--str-chat__accent-primary); &:disabled { cursor: default; @@ -78,7 +78,7 @@ .str-chat__loading-indicator svg { linearGradient { stop:last-child { - stop-color: var(--background-core-app); + stop-color: var(--str-chat__background-core-app); } } } @@ -128,7 +128,7 @@ } .str-chat__wave-progress-bar__track-container { - padding-inline: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-xs); .str-chat__wave-progress-bar__track { flex: 1 1 auto; @@ -137,7 +137,7 @@ .str-chat__audio_recorder__recording-controls { display: flex; - gap: var(--spacing-xs); - padding: 0 var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: 0 var(--str-chat__spacing-xs); } } diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss index 9ba37c62ac..4eadb9a1ea 100644 --- a/src/components/Message/styling/Message.scss +++ b/src/components/Message/styling/Message.scss @@ -1,74 +1,59 @@ @use '../../../styling/utils'; -.str-chat { - /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */ - --str-chat__message-options-button-size: var(--size-32); - - --str-chat__message-border-radius: 0; - --str-chat__message-link-color: var(--chat-text-link); - --str-chat__message-mention-color: var(--accent-primary); - --str-chat__message-background-color: transparent; - --str-chat__message-highlighted-background-color: var(--background-core-highlight); - --str-chat__message-active-background-color: transparent; - - --str-chat__message-bubble-border-radius: var(--message-bubble-radius-group-bottom); - - --str-chat__blocked-message-border-radius: var(--radius-md); - - --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1); - - /* Background color for pinned messages (Figma: background/core/highlight) */ - --str-chat__message-pinned-background-color: var(--background-core-highlight); +$message-active-background-color: transparent; +$message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1); +.str-chat { + /* The width/height of the message options button(s) */ + --str-chat__message-options-button-size: var(--str-chat__size-32); /* The maximum allowed width of the message component */ --str-chat__message-max-width: 400px; - /* The maximum allowed width of the message component, if it has attachments */ --str-chat__message-with-attachment-max-width: 400px; .str-chat__message { &.str-chat__message--me { - --chat-bg: var(--chat-bg-outgoing); - --chat-bg-attachment: var(--chat-bg-attachment-outgoing); - --chat-text: var(--chat-text-outgoing); - --chat-border: var(--chat-border-outgoing); - --chat-border-on-chat: var(--chat-border-on-chat-outgoing); - --chat-reply-indicator: var(--chat-reply-indicator-outgoing); - --chat-poll-progress-track: var(--chat-poll-progress-track-outgoing); - --chat-poll-progress-fill: var(--chat-poll-progress-fill-outgoing); - --chat-thread-connector: var(--chat-thread-connector-outgoing); + --chat-bg: var(--str-chat__chat-bg-outgoing); + --chat-bg-attachment: var(--str-chat__chat-bg-attachment-outgoing); + --chat-text: var(--str-chat__chat-text-outgoing); + --chat-border: var(--str-chat__chat-border-outgoing); + --chat-border-on-chat: var(--str-chat__chat-border-on-chat-outgoing); + --chat-reply-indicator: var(--str-chat__chat-reply-indicator-outgoing); + --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-outgoing); + --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-outgoing); + --chat-thread-connector: var(--str-chat__chat-thread-connector-outgoing); } &.str-chat__message--other { - --chat-bg: var(--chat-bg-incoming); - --chat-bg-attachment: var(--chat-bg-attachment-incoming); - --chat-text: var(--chat-text-incoming); - --chat-border: var(--chat-border-incoming); - --chat-border-on-chat: var(--chat-border-on-chat-incoming); - --chat-reply-indicator: var(--chat-reply-indicator-incoming); - --chat-poll-progress-track: var(--chat-poll-progress-track-incoming); - --chat-poll-progress-fill: var(--chat-poll-progress-fill-incoming); - --chat-thread-connector: var(--chat-thread-connector-incoming); + --chat-bg: var(--str-chat__chat-bg-incoming); + --chat-bg-attachment: var(--str-chat__chat-bg-attachment-incoming); + --chat-text: var(--str-chat__chat-text-incoming); + --chat-border: var(--str-chat__chat-border-incoming); + --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming); + --chat-reply-indicator: var(--str-chat__chat-reply-indicator-incoming); + --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-incoming); + --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-incoming); + --chat-thread-connector: var(--str-chat__chat-thread-connector-incoming); } } } /* Make spaces between message groups */ .str-chat__li--top { - padding-block-start: var(--spacing-xs); - padding-block-end: var(--spacing-xxxs); + padding-block-start: var(--str-chat__spacing-xs); + padding-block-end: var(--str-chat__spacing-xxxs); } .str-chat__li--bottom { - padding-block-start: var(--spacing-xxxs); - padding-block-end: var(--spacing-xs); + padding-block-start: var(--str-chat__spacing-xxxs); + padding-block-end: var(--str-chat__spacing-xs); } .str-chat__li--middle { - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); } .str-chat__li--single { - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); } .str-chat__message { @@ -84,8 +69,8 @@ max-width: var(--str-chat__message-max-width); display: flex; flex-direction: column; - gap: var(--spacing-xs); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs); } .str-chat__message-options { @@ -94,7 +79,7 @@ a { text-decoration: none; - color: var(--str-chat__message-link-color); + color: var(--str-chat__chat-text-link); } } @@ -165,16 +150,16 @@ } .str-chat__message-mention { - color: var(--str-chat__message-mention-color); font: var(--str-chat__font-body-emphasis); + color: var(--str-chat__accent-primary); } .str-chat__message { - @include utils.component-layer-overrides('message'); + background: transparent; color: var(--str-chat__message-color, var(--chat-text)); @mixin chat-bubble-spacing { - padding-inline: var(--spacing-xxs); + padding-inline: var(--str-chat__spacing-xxs); p { white-space: pre-line; @@ -233,22 +218,22 @@ .str-chat__message-pin-indicator { grid-area: pin-indicator; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); .str-chat__message-pin-indicator__content { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); font: var(--str-chat__font-metadata-emphasis); - color: var(--text-primary-text); + color: var(--str-chat__text-primary); .str-chat__message-pin-indicator__icon { display: flex; align-items: center; .str-chat__icon { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); path { stroke-width: 2px; @@ -269,7 +254,7 @@ } &.str-chat__message--other { - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); justify-items: flex-start; &.str-chat__message--with-avatar { @@ -289,11 +274,9 @@ } &:has(.str-chat__message-reactions--top) { - padding-inline-start: calc( - var(--str-chat__message-reactions-host-offset-x) * -1 - ); + padding-inline-start: calc($message-reactions-host-offset-x * -1); - margin-inline-end: var(--str-chat__message-reactions-host-offset-x); + margin-inline-end: $message-reactions-host-offset-x; } .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom @@ -314,7 +297,7 @@ } &.str-chat__message--me { - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); justify-items: flex-end; &.str-chat__message--with-avatar { @@ -334,9 +317,9 @@ } &:has(.str-chat__message-reactions--top) { - padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1); + padding-inline-end: calc($message-reactions-host-offset-x * -1); - margin-inline-start: var(--str-chat__message-reactions-host-offset-x); + margin-inline-start: $message-reactions-host-offset-x; } .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom @@ -376,7 +359,7 @@ 'message-bubble options' 'replies replies'; grid-template-columns: auto 1fr; - column-gap: var(--space-8); + column-gap: var(--str-chat__space-8); position: relative; .str-chat__message-reactions-host { @@ -384,11 +367,11 @@ grid-area: reactions; &:has(.str-chat__message-reactions--top) { - margin-bottom: calc(var(--spacing-xxs) * -1); + margin-bottom: calc(var(--str-chat__spacing-xxs) * -1); } &:has(.str-chat__message-reactions--bottom) { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); } } @@ -405,10 +388,9 @@ grid-area: message-bubble; position: relative; min-width: 0; - @include utils.component-layer-overrides('message-bubble'); + border-radius: var(--str-chat__message-bubble-radius-group-bottom); color: var(--str-chat__message-bubble-color, inherit); background-color: var(--str-chat__message-bubble-background-color, var(--chat-bg)); - border-radius: var(--message-bubble-radius-group-bottom); overflow: hidden; .str-chat__message-text { @@ -455,10 +437,10 @@ grid-area: metadata; display: flex; flex-wrap: wrap; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-items: center; - height: var(--size-24); - color: var(--chat-text-timestamp); + height: var(--str-chat__size-24); + color: var(--str-chat__chat-text-timestamp); * { font: var(--str-chat__font-metadata-default); @@ -466,11 +448,11 @@ .str-chat__message-metadata__name { @include utils.prevent-glitch-text-overflow; - margin-inline-end: var(--spacing-xxs); + margin-inline-end: var(--str-chat__spacing-xxs); } .str-chat__message-edited-indicator { - margin-inline-start: var(--spacing-xs); + margin-inline-start: var(--str-chat__spacing-xs); } } @@ -481,12 +463,12 @@ .str-chat__message--blocked-inner { @include chat-bubble-spacing; - @include utils.component-layer-overrides('blocked-message'); + border-radius: var(--str-chat__radius-md); color: var(--str-chat__blocked-message-color, var(--chat-text)); background-color: var(--str-chat__blocked-message-background-color, var(--chat-bg)); // todo: once blocked message designs are ready remove this padding? - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); } .str-chat__message-error-indicator { @@ -499,13 +481,13 @@ &.str-chat__message--deleted { .str-chat__message-bubble { - padding: var(--spacing-sm); + padding: var(--str-chat__spacing-sm); .str-chat__message-text { display: flex; align-items: center; padding: 0; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } } } @@ -524,7 +506,7 @@ .str-chat__message--highlighted { transition: background-color 0.1s ease-out; - background-color: var(--str-chat__message-highlighted-background-color); + background-color: var(--str-chat__background-core-highlight); } .str-chat__li:has(.str-chat__message--pinned) { @@ -536,7 +518,7 @@ position: absolute; inset-block: 0; inset-inline: -9999px; - background-color: var(--str-chat__message-pinned-background-color); + background-color: var(--str-chat__background-core-highlight); z-index: -1; pointer-events: none; } @@ -545,19 +527,19 @@ /* Fallback for browsers without :has() support */ @supports not selector(:has(a, b)) { .str-chat__message--pinned { - background-color: var(--str-chat__message-pinned-background-color); + background-color: var(--str-chat__background-core-highlight); } } /* This rule won't be applied in browsers that don't support :has() */ .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) { - background-color: var(--str-chat__message-active-background-color); + background-color: $message-active-background-color; } /* Fallback for when :has() is unsupported */ @supports not selector(:has(a, b)) { .str-chat__li:hover { - background-color: var(--str-chat__message-active-background-color); + background-color: $message-active-background-color; } } @@ -628,13 +610,13 @@ .str-chat__li--bottom { .str-chat__message--other { .str-chat__message-bubble { - border-end-start-radius: var(--message-bubble-radius-tail); + border-end-start-radius: var(--str-chat__message-bubble-radius-tail); } } .str-chat__message--me { .str-chat__message-bubble { - border-end-end-radius: var(--message-bubble-radius-tail); + border-end-end-radius: var(--str-chat__message-bubble-radius-tail); } } } @@ -642,20 +624,20 @@ .str-chat__li--top, .str-chat__li--middle { .str-chat__message-bubble { - border-radius: var(--message-bubble-radius-group-middle); + border-radius: var(--str-chat__message-bubble-radius-group-middle); } } .str-chat__message-with-thread-link { &.str-chat__message--other { .str-chat__message-bubble { - border-end-start-radius: calc(var(--radius-md) / 6); + border-end-start-radius: calc(var(--str-chat__radius-md) / 6); } } &.str-chat__message--me { .str-chat__message-bubble { - border-end-end-radius: calc(var(--radius-md) / 6); + border-end-end-radius: calc(var(--str-chat__radius-md) / 6); } } } diff --git a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss index bdf6ec280c..53188698a0 100644 --- a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss +++ b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss @@ -1,32 +1,21 @@ @use '../../../styling/utils'; -.str-chat { - --str-chat__message-also-sent-in-channel-color: var(--text-primary); - --str-chat__message-also-sent-in-channel-background-color: transparent; - --str-chat__message-also-sent-in-channel-border-block-start: none; - --str-chat__message-also-sent-in-channel-border-block-end: none; - --str-chat__message-also-sent-in-channel-border-inline-start: none; - --str-chat__message-also-sent-in-channel-border-inline-end: none; - --str-chat__message-also-sent-in-channel-box-shadow: none; - --str-chat__message-also-sent-in-channel-border-radius: 0; -} - .str-chat__message-also-sent-in-channel { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: also-sent-in-channel; - padding-block: var(--spacing-xxs); - @include utils.component-layer-overrides('message-also-sent-in-channel'); + padding-block: var(--str-chat__spacing-xxs); + background: transparent; + color: var(--str-chat__text-primary); font: var(--str-chat__font-metadata-emphasis); .str-chat__icon { - height: var(--spacing-sm); - width: var(--spacing-sm); + height: var(--str-chat__spacing-sm); + width: var(--str-chat__spacing-sm); path { stroke-width: 2px; - stroke: var(--str-chat__message-also-sent-in-channel-color); } } @@ -34,6 +23,6 @@ @include utils.button-reset; cursor: pointer; font: var(--str-chat__font-metadata-default); - color: var(--text-link); + color: var(--str-chat__text-link); } } diff --git a/src/components/Message/styling/MessageRepliesCountButton.scss b/src/components/Message/styling/MessageRepliesCountButton.scss index 885197d8a9..f3bc4517fb 100644 --- a/src/components/Message/styling/MessageRepliesCountButton.scss +++ b/src/components/Message/styling/MessageRepliesCountButton.scss @@ -8,9 +8,9 @@ --replies-button-connector-stroke-width: 1px; display: flex; - padding-block-start: var(--spacing-xxs); - padding-block-end: var(--spacing-xxs); - margin-block-start: var(--spacing-xxs); + padding-block-start: var(--str-chat__spacing-xxs); + padding-block-end: var(--str-chat__spacing-xxs); + margin-block-start: var(--str-chat__spacing-xxs); position: relative; @@ -29,13 +29,13 @@ cursor: pointer; - border-radius: var(--radius-max); - gap: var(--spacing-xs); + border-radius: var(--str-chat__radius-max); + gap: var(--str-chat__spacing-xs); display: flex; flex-direction: row; align-items: center; - color: var(--text-link); + color: var(--str-chat__text-link); font: var(--str-chat__font-heading-xs); } } @@ -49,10 +49,10 @@ flex-direction: row; } - padding-inline-end: var(--spacing-xl); + padding-inline-end: var(--str-chat__spacing-xl); &::after { - border-end-end-radius: var(--radius-max); + border-end-end-radius: var(--str-chat__radius-max); border-inline-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid @@ -71,10 +71,10 @@ flex-direction: row-reverse; } - padding-inline-start: var(--spacing-xl); + padding-inline-start: var(--str-chat__spacing-xl); &::after { - border-end-start-radius: var(--radius-max); + border-end-start-radius: var(--str-chat__radius-max); border-inline-start: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector); border-block-end: var(--replies-button-connector-stroke-width) solid diff --git a/src/components/Message/styling/MessageStatus.scss b/src/components/Message/styling/MessageStatus.scss index 7c232082d4..977c9065fd 100644 --- a/src/components/Message/styling/MessageStatus.scss +++ b/src/components/Message/styling/MessageStatus.scss @@ -3,15 +3,15 @@ display: flex; align-items: center; justify-content: center; - column-gap: var(--space-2); + column-gap: var(--str-chat__space-2); position: relative; - color: var(--chat-text-timestamp); + color: var(--str-chat__chat-text-timestamp); svg { height: 16px; width: 16px; &.str-chat__message-status-read { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } } } diff --git a/src/components/Message/styling/MessageSystem.scss b/src/components/Message/styling/MessageSystem.scss index 08e41658c1..3a50177722 100644 --- a/src/components/Message/styling/MessageSystem.scss +++ b/src/components/Message/styling/MessageSystem.scss @@ -1,19 +1,19 @@ .str-chat__message--system { display: flex; - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); width: 100%; justify-content: center; .str-chat__message--system__text { display: flex; max-width: 338px; - padding: var(--spacing-xs) var(--spacing-sm); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); justify-content: center; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--radius-xl); - border: 1px solid var(--border-core-subtle); - background: var(--background-core-surface-subtle); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-xl); + border: 1px solid var(--str-chat__border-core-subtle); + background: var(--str-chat__background-core-surface-subtle); font: var(--str-chat__font-metadata-default); } } diff --git a/src/components/Message/styling/MessageTranslationIndicator.scss b/src/components/Message/styling/MessageTranslationIndicator.scss index 2e12746709..229a291c20 100644 --- a/src/components/Message/styling/MessageTranslationIndicator.scss +++ b/src/components/Message/styling/MessageTranslationIndicator.scss @@ -1,23 +1,13 @@ -@use '../../../styling/utils'; - -.str-chat { - --str-chat__message-translation-indicator-color: var( - --text-primary-text, - var(--text-primary) - ); - --str-chat__message-translation-indicator-background-color: transparent; -} - /* Translation indicator: below reminder in message grid. */ .str-chat__message-translation-indicator { display: flex; align-items: center; grid-area: translation-indicator; - padding-block: var(--spacing-xxs); - gap: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); + gap: var(--str-chat__spacing-xxs); margin: 0; - color: var(--str-chat__message-translation-indicator-color); - @include utils.component-layer-overrides('message-translation-indicator'); + background: transparent; + color: var(--str-chat__text-primary); &, .str-chat__message-translation-indicator__translation-toggle { diff --git a/src/components/Message/styling/QuotedMessage.scss b/src/components/Message/styling/QuotedMessage.scss index 72068698fb..2d0c83cc8e 100644 --- a/src/components/Message/styling/QuotedMessage.scss +++ b/src/components/Message/styling/QuotedMessage.scss @@ -7,7 +7,9 @@ .str-chat__quoted-message-preview { background-color: var(--chat-bg-attachment); width: calc( - var(--str-chat__message-with-attachment-max-width) - calc(2 * var(--spacing-xs)) + var(--str-chat__message-with-attachment-max-width) - calc( + 2 * var(--str-chat__spacing-xs) + ) ); max-width: 100%; min-width: 0; diff --git a/src/components/Message/styling/ReminderNotification.scss b/src/components/Message/styling/ReminderNotification.scss index 590f9ff108..58f338226c 100644 --- a/src/components/Message/styling/ReminderNotification.scss +++ b/src/components/Message/styling/ReminderNotification.scss @@ -1,43 +1,21 @@ -@use '../../../styling/utils'; - -.str-chat { - --str-chat__message-saved-for-later-color: var(--accent-primary); - --str-chat__message-saved-for-later-background-color: transparent; - --str-chat__message-saved-for-later-border-block-start: none; - --str-chat__message-saved-for-later-border-block-end: none; - --str-chat__message-saved-for-later-border-inline-start: none; - --str-chat__message-saved-for-later-border-inline-end: none; - --str-chat__message-saved-for-later-box-shadow: none; - --str-chat__message-saved-for-later-border-radius: 0; - - --str-chat__message-reminder-color: var(--text-primary); - --str-chat__message-reminder-background-color: transparent; - --str-chat__message-reminder-border-block-start: none; - --str-chat__message-reminder-border-block-end: none; - --str-chat__message-reminder-border-inline-start: none; - --str-chat__message-reminder-border-inline-end: none; - --str-chat__message-reminder-box-shadow: none; - --str-chat__message-reminder-border-radius: 0; -} - /* Saved for Later: above pin indicator. Font and spacing aligned with pin indicator. */ .str-chat__message-saved-for-later { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: message-saved-for-later; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); margin: 0; - @include utils.component-layer-overrides('message-saved-for-later'); + background: transparent; + color: var(--str-chat__accent-primary); font: var(--str-chat__font-metadata-emphasis); - svg { - width: var(--icon-size-xs); - height: var(--icon-size-xs); + .str-chat__icon { + width: var(--str-chat__icon-size-xs); + height: var(--str-chat__icon-size-xs); path { - stroke-width: 2px; - stroke: var(--str-chat__message-saved-for-later-color); + stroke-width: var(--str-chat__icon-stroke-emphasis); } } } @@ -46,15 +24,18 @@ .str-chat__message-reminder { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); grid-area: message-reminder; - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); margin: 0; - @include utils.component-layer-overrides('message-reminder'); + background: transparent; + color: var(--str-chat__text-primary); font: var(--str-chat__font-metadata-emphasis); - svg path { - stroke-width: 1.5px; + .str-chat__icon { + path { + stroke-width: var(--str-chat__icon-stroke-default); + } } .str-chat__message-reminder__time-left { diff --git a/src/components/MessageBounce/styling/MessageBouncePrompt.scss b/src/components/MessageBounce/styling/MessageBouncePrompt.scss index d8ce696cc3..3cd3652dc1 100644 --- a/src/components/MessageBounce/styling/MessageBouncePrompt.scss +++ b/src/components/MessageBounce/styling/MessageBouncePrompt.scss @@ -2,6 +2,6 @@ max-width: 300px; .str-chat__alert-header svg.str-chat__icon--exclamation-mark { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } } diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index c0a6847b38..35b983461d 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -1,87 +1,46 @@ @use '../../../styling/utils'; +$attachment-preview-row-height: 72px; + .str-chat { - /* - * AttachmentPreviewList theme variables (ported from stream-chat-css v2), - * set to match the current React SDK styling values in this file. - */ - --str-chat__attachment-preview-list-border-radius: 0; - --str-chat__attachment-preview-list-color: var(--text-primary); - --str-chat__attachment-preview-list-background-color: transparent; - --str-chat__attachment-preview-list-border-block-start: none; - --str-chat__attachment-preview-list-border-block-end: none; - --str-chat__attachment-preview-list-border-inline-start: none; - --str-chat__attachment-preview-list-border-inline-end: none; - --str-chat__attachment-preview-list-box-shadow: none; - --str-chat__attachment-preview-row-height: 72px; - - --str-chat__attachment-preview-close-icon-background: var(--control-remove-control-bg); - --str-chat__attachment-preview-close-icon-color: var(--control-remove-control-icon); + --str-chat__attachment-preview-close-icon-background: var( + --str-chat__control-remove-control-bg + ); + --str-chat__attachment-preview-close-icon-color: var( + --str-chat__control-remove-control-icon + ); --str-chat__attachment-preview-close-icon-border-color: var( - --control-remove-control-border + --str-chat__control-remove-control-border ); - --str-chat__attachment-preview-retry-icon-color: var(--accent-primary); - --str-chat__attachment-preview-download-icon-color: var(--text-secondary); + --str-chat__attachment-preview-retry-icon-color: var(--str-chat__accent-primary); + --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-secondary); --str-chat__attachment-preview-overlay-color: var(--background-core-overlay); - --str-chat__attachment-preview-image-border-radius: var( - --message-bubble-radius-attachment - ); - --str-chat__attachment-preview-image-color: var(--text-primary); - --str-chat__attachment-preview-image-background-color: transparent; - --str-chat__attachment-preview-image-border-block-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-block-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-inline-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-border-inline-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-image-box-shadow: none; - - --str-chat__attachment-preview-file-border-radius: var(--radius-lg); - --str-chat__attachment-preview-file-color: var(--text-primary); - --str-chat__attachment-preview-file-background-color: transparent; - --str-chat__attachment-preview-file-border-block-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-block-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-inline-start: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-border-inline-end: 1px solid - var(--border-core-default); - --str-chat__attachment-preview-file-box-shadow: none; - /* React-specific preview variants (classes diverged from v2 theme) */ --str-chat__attachment-preview-media-video-indicator-background-color: var( --chat-bg-typing-indicator ); - --str-chat__attachment-preview-media-video-indicator-color: var(--badge-text); - --str-chat__attachment-preview-media-video-indicator-border-radius: var(--radius-max); + --str-chat__attachment-preview-media-video-indicator-color: var(--str-chat__badge-text); + --str-chat__attachment-preview-media-video-indicator-border-radius: var( + --str-chat__radius-max + ); --str-chat__attachment-preview-media-overlay-hover-background-color: var( - --background-utility-hover + --str-chat__background-utility-hover ); --str-chat__attachment-preview-media-overlay-pressed-background-color: var( - --background-utility-pressed + --str-chat__background-utility-pressed ); - --str-chat__attachment-preview-media-uploading-overlay-background: linear-gradient( - 180deg, - var(--base-white) 0%, - var(--slate-100) 100% - ); --str-chat__attachment-preview-media-upload-error-overlay-background-color: var( --background-core-overlay ); - --str-chat__attachment-preview-file-fatal-error-color: var(--color-accent-error); - .str-chat__message-composer-voice-preview-slot { display: flex; align-items: center; width: 100%; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); min-width: 0; .str-chat__attachment-preview-audio { @@ -96,8 +55,9 @@ } .str-chat__attachment-preview-list { - @include utils.component-layer-overrides('attachment-preview-list'); - padding: var(--spacing-xxs); + background: transparent; + color: var(--str-chat__text-primary); + padding: var(--str-chat__spacing-xxs); display: flex; align-items: flex-start; align-content: flex-start; @@ -106,32 +66,35 @@ width: 100%; min-width: 0; max-width: 100%; - min-height: calc(var(--str-chat__attachment-preview-row-height) * 1.2); - max-height: calc(var(--str-chat__attachment-preview-row-height) * 1.7); + min-height: calc($attachment-preview-row-height * 1.2); + max-height: calc($attachment-preview-row-height * 1.7); overflow-x: hidden; overflow-y: auto; flex: 0 1 auto; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); } .str-chat__attachment-preview-audio, .str-chat__attachment-preview-file, .str-chat__attachment-preview-voice-recording, .str-chat__attachment-preview-unsupported { - @include utils.component-layer-overrides('attachment-preview-file'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__radius-lg); + border: 1px solid var(--str-chat__border-core-default); display: flex; align-items: center; flex: 0 1 auto; - gap: var(--spacing-sm); - padding: var(--spacing-md); - padding-inline-end: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); + padding: var(--str-chat__spacing-md); + padding-inline-end: var(--str-chat__spacing-sm); width: 290px; - height: var(--str-chat__attachment-preview-row-height); + height: $attachment-preview-row-height; } .str-chat__attachment-preview-audio { .str-chat__attachment-preview-file__data { - padding-inline-end: var(--spacing-xs); + padding-inline-end: var(--str-chat__spacing-xs); } } @@ -147,16 +110,19 @@ } .str-chat__attachment-preview-media { - @include utils.component-layer-overrides('attachment-preview-image'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: var(--str-chat__message-bubble-radius-attachment); + border: 1px solid var(--str-chat__border-core-default); flex: 0 0 auto; - width: var(--str-chat__attachment-preview-row-height); - height: var(--str-chat__attachment-preview-row-height); + width: $attachment-preview-row-height; + height: $attachment-preview-row-height; cursor: pointer; .str-chat__attachment-preview-media__thumbnail-wrapper { border-radius: max( 0px, - calc(var(--str-chat__attachment-preview-image-border-radius) - 1px) + calc(var(--str-chat__message-bubble-radius-attachment) - 1px) ); overflow: hidden; height: 100%; @@ -177,7 +143,7 @@ position: absolute; inset: 0; overflow: hidden; - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); &:hover { @include utils.overlay-after( @@ -199,27 +165,27 @@ .str-chat__loading-indicator, .str-chat__progress-indicator { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); position: absolute; - inset-inline-start: var(--spacing-xxs); - bottom: var(--spacing-xxs); - border-radius: var(--radius-max); - background: var(--background-core-elevation-0); - color: var(--accent-primary); + inset-inline-start: var(--str-chat__spacing-xxs); + bottom: var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__background-core-elevation-0); + color: var(--str-chat__accent-primary); } .str-chat__icon--exclamation { - padding: var(--spacing-xxxs); - width: var(--icon-size-sm); - height: var(--icon-size-sm); + padding: var(--str-chat__spacing-xxxs); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); position: absolute; - inset-inline-start: var(--spacing-xxs); - bottom: var(--spacing-xxs); - border: 2px solid var(--badge-border); - border-radius: var(--radius-max); - background: var(--badge-bg-error); - color: var(--badge-text-on-accent); + inset-inline-start: var(--str-chat__spacing-xxs); + bottom: var(--str-chat__spacing-xxs); + border: 2px solid var(--str-chat__badge-border); + border-radius: var(--str-chat__radius-max); + background: var(--str-chat__badge-bg-error); + color: var(--str-chat__badge-text-on-accent); } } @@ -233,7 +199,11 @@ .str-chat__attachment-preview-media--uploading { .str-chat__attachment-preview-media__overlay { - background: var(--str-chat__attachment-preview-media-uploading-overlay-background); + background: linear-gradient( + 180deg, + var(--str-chat__base-white) 0%, + var(--str-chat__slate-100) 100% + ); } } @@ -249,14 +219,14 @@ flex-direction: column; align-items: flex-start; justify-content: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__attachment-preview-file-name { @include utils.ellipsis-text; max-width: 100%; - font-weight: var(--typography-font-weight-semi-bold); - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-tight); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-tight); } .str-chat__attachment-preview-file__data { @@ -264,50 +234,50 @@ align-items: center; width: min(160px, 100%); max-width: 100%; - gap: var(--spacing-xxs); - color: var(--text-secondary); - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); + gap: var(--str-chat__spacing-xxs); + color: var(--str-chat__text-secondary); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__loading-indicator, .str-chat__progress-indicator { - width: var(--icon-size-sm); - height: var(--icon-size-sm); - color: var(--accent-primary); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); + color: var(--str-chat__accent-primary); } .str-chat__attachment-preview-file__fatal-error { display: flex; align-items: center; - gap: var(--spacing-xxs); - color: var(--str-chat__attachment-preview-file-fatal-error-color); + gap: var(--str-chat__spacing-xxs); + color: var(--color-accent-error); } .str-chat__attachment-preview-file__retriable-error { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); white-space: nowrap; .str-chat__icon--exclamation-triangle path { - fill: var(--accent-error); + fill: var(--str-chat__accent-error); } .str-chat__attachment-preview-file__retry-upload-button { @include utils.button-reset; padding: 0; - color: var(--text-link); + color: var(--str-chat__text-link); cursor: pointer; - line-height: var(--typography-line-height-tight, 16px); + line-height: var(--str-chat__typography-line-height-tight, 16px); } } } } .str-chat__button-play { - height: var(--button-visual-height-md); - width: var(--button-visual-height-md); + height: var(--str-chat__button-visual-height-md); + width: var(--str-chat__button-visual-height-md); border: 1px solid var(--control-play-control-border); } } diff --git a/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss b/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss index cd9b7f54f2..a79d129585 100644 --- a/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss +++ b/src/components/MessageComposer/styling/AttachmentPreviewThumbnail.scss @@ -2,7 +2,7 @@ .str-chat__location-preview-image, .str-chat__link-preview-card .str-chat__image-placeholder, .str-chat__attachment-preview__thumbnail { - border-radius: var(--radius-md); + border-radius: var(--str-chat__radius-md); overflow: hidden; width: 40px; height: 40px; diff --git a/src/components/MessageComposer/styling/AttachmentSelector.scss b/src/components/MessageComposer/styling/AttachmentSelector.scss index 26afb39352..ee3097d9d4 100644 --- a/src/components/MessageComposer/styling/AttachmentSelector.scss +++ b/src/components/MessageComposer/styling/AttachmentSelector.scss @@ -1,17 +1,21 @@ .str-chat { // todo: find existing replacement for variable button-style-outline-text) --str-chat__attachment-selector-button-icon-color: var(--button-style-outline-text); - --str-chat__attachment-selector-button-icon-color-hover: var(--text-secondary); - --str-chat__attachment-selector-actions-menu-button-icon-color: var(--text-secondary); + --str-chat__attachment-selector-button-icon-color-hover: var( + --str-chat__text-secondary + ); + --str-chat__attachment-selector-actions-menu-button-icon-color: var( + --str-chat__text-secondary + ); --str-chat__attachment-selector-actions-menu-button-icon-color-active: var( - --text-secondary + --str-chat__text-secondary ); .str-chat__attachment-selector { .str-chat__attachment-selector__menu-button { .str-chat__attachment-selector__menu-button__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); color: var(--str-chat__attachment-selector-button-icon-color); } @@ -48,7 +52,7 @@ .str-chat__message-composer--floating { .str-chat__attachment-selector__menu-button { - background-color: var(--background-core-elevation-1); + background-color: var(--str-chat__background-core-elevation-1); // todo: variable exists only in Figma, not added to tokens repo box-shadow: var(--shadow-web-light-elevation-2); } diff --git a/src/components/MessageComposer/styling/CommandChip.scss b/src/components/MessageComposer/styling/CommandChip.scss index a89cb5afb4..9a64add608 100644 --- a/src/components/MessageComposer/styling/CommandChip.scss +++ b/src/components/MessageComposer/styling/CommandChip.scss @@ -2,14 +2,14 @@ .str-chat__command-chip { display: flex; - padding: var(--spacing-xxs) var(--spacing-xs); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); justify-content: center; align-items: center; - gap: var(--spacing-xxs); - border-radius: var(--radius-max); + gap: var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__radius-max); - color: var(--text-on-inverse); - background-color: var(--background-core-inverse); + color: var(--str-chat__text-on-inverse); + background-color: var(--str-chat__background-core-inverse); text-transform: uppercase; font: var(--str-chat__font-metadata-emphasis); diff --git a/src/components/MessageComposer/styling/CommandsMenu.scss b/src/components/MessageComposer/styling/CommandsMenu.scss index dd57f5444b..9bcbd743d1 100644 --- a/src/components/MessageComposer/styling/CommandsMenu.scss +++ b/src/components/MessageComposer/styling/CommandsMenu.scss @@ -20,6 +20,6 @@ .str-chat__context-menu__header--commands:not( .str-chat__context-menu__header--submenu-commands ) { - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); } } diff --git a/src/components/MessageComposer/styling/DropzoneContainer.scss b/src/components/MessageComposer/styling/DropzoneContainer.scss index 028dd419ae..1a26b3fc5f 100644 --- a/src/components/MessageComposer/styling/DropzoneContainer.scss +++ b/src/components/MessageComposer/styling/DropzoneContainer.scss @@ -1,14 +1,3 @@ -.str-chat { - /* The text/icon color of the dropzone container */ - --str-chat__dropzone-container-color: var(--text-primary); - - /* The background color of the dropzone container */ - --str-chat__dropzone-container-background-color: var(--background-core-overlay-light); - - /* The backdrop filter applied to the dropzone container */ - --str-chat__dropzone-container-backdrop-filter: blur(3.5px); -} - .str-chat__dropzone-root { position: relative; min-height: 0; @@ -30,16 +19,16 @@ position: absolute; inset: 0; z-index: 5; - background-color: var(--str-chat__dropzone-container-background-color); - color: var(--str-chat__dropzone-container-color); - backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter); + background-color: var(--str-chat__background-core-overlay-light); + color: var(--str-chat__text-primary); + backdrop-filter: blur(3.5px); font: var(--str-chat__font-heading-sm); .str-chat__dropzone-container__content { display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-xs, 8px); + gap: var(--str-chat__spacing-xs, 8px); } svg { @@ -56,9 +45,5 @@ @supports not (backdrop-filter: blur(1px)) { .str-chat__dropzone-container { backdrop-filter: none; - background-color: var( - --str-chat__dropzone-container-background-color-fallback, - rgba(0, 0, 0, 0.4) - ); } } diff --git a/src/components/MessageComposer/styling/GeologacationPreview.scss b/src/components/MessageComposer/styling/GeologacationPreview.scss index 6ae742c5c1..e6ace98eb5 100644 --- a/src/components/MessageComposer/styling/GeologacationPreview.scss +++ b/src/components/MessageComposer/styling/GeologacationPreview.scss @@ -7,17 +7,17 @@ display: flex; align-items: start; justify-content: space-around; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs) var(--spacing-sm); - padding-block: var(--spacing-xs); - background-color: var(--chat-bg-outgoing); - border-radius: var(--message-bubble-radius-attachment); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); + background-color: var(--str-chat__chat-bg-outgoing); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__location-preview-image { display: flex; align-items: center; justify-content: center; - background-color: var(--background-core-overlay-light); + background-color: var(--str-chat__background-core-overlay-light); width: 40px; height: 40px; diff --git a/src/components/MessageComposer/styling/LinkPreviewList.scss b/src/components/MessageComposer/styling/LinkPreviewList.scss index 9789278c7e..3165b388fb 100644 --- a/src/components/MessageComposer/styling/LinkPreviewList.scss +++ b/src/components/MessageComposer/styling/LinkPreviewList.scss @@ -6,7 +6,7 @@ align-items: center; gap: 0.75rem; width: 100%; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__link-preview-card { @@ -16,11 +16,11 @@ display: flex; align-items: center; justify-content: space-around; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xs) var(--spacing-sm); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); background-color: var(--chat-bg); - border-radius: var(--message-bubble-radius-attachment); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__tooltip { @include utils.ellipsis-text(); @@ -51,7 +51,7 @@ .str-chat__link-preview-card__content__url { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } } } @@ -63,12 +63,12 @@ // gap: 0.25rem; // // .str-chat__link-preview-card__content-title { -// height: var(--size-16); +// height: var(--str-chat__size-16); // width: 100% // } // // .str-chat__link-preview-card__content-description { -// height: var(--size-12); +// height: var(--str-chat__size-12); // width: 100%; // } // } diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss index cb62276975..d11744c0a4 100644 --- a/src/components/MessageComposer/styling/MessageComposer.scss +++ b/src/components/MessageComposer/styling/MessageComposer.scss @@ -1,41 +1,6 @@ -@use '../../../styling/utils'; - .str-chat { - /* - * MessageInput theme variables (ported from stream-chat-css v2 MessageInput theme), - * set to match the current React SDK MessageComposer styling. - * - * Note: React's "composer" uses different class names than v2's `str-chat__message-input`, - * so we apply layer overrides to the closest equivalents in this file. - */ - --str-chat__message-input-border-radius: var(--radius-3xl); - --str-chat__message-input-color: var(--input-text-default); - --str-chat__message-input-background-color: var(--composer-bg); - --str-chat__message-input-border-block-start: 1px solid var(--border-core-default); - --str-chat__message-input-border-block-end: 1px solid var(--border-core-default); - --str-chat__message-input-border-inline-start: 1px solid var(--border-core-default); - --str-chat__message-input-border-inline-end: 1px solid var(--border-core-default); - --str-chat__message-input-box-shadow: none; - - --str-chat__message-textarea-border-radius: 0; - --str-chat__message-textarea-color: var(--input-text-default); - --str-chat__message-textarea-background-color: transparent; - --str-chat__message-textarea-border-block-start: 0; - --str-chat__message-textarea-border-block-end: 0; - --str-chat__message-textarea-border-inline-start: 0; - --str-chat__message-textarea-border-inline-end: 0; - --str-chat__message-textarea-box-shadow: none; - - --str-chat__cooldown-border-radius: var(--button-radius-full); - --str-chat__cooldown-color: var(--text-disabled); - --str-chat__cooldown-background-color: var(--background-utility-disabled); - --str-chat__cooldown-border-block-start: 0; - --str-chat__cooldown-border-block-end: 0; - --str-chat__cooldown-border-inline-start: 0; - --str-chat__cooldown-border-inline-end: 0; - --str-chat__cooldown-box-shadow: none; --str-chat__message-composer-max-width: 1120px; - --str-chat__message-composer-padding: var(--spacing-md); + --str-chat__message-composer-padding: var(--str-chat__spacing-md); --str-chat__message-composer-command-transition-duration: 280ms; --str-chat__message-composer-command-ease: cubic-bezier(0.22, 1, 0.32, 1); @@ -69,12 +34,12 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); justify-content: center; padding: var(--str-chat__message-composer-padding); min-width: 0; - border-top: 1px solid var(--border-core-default); - background: var(--background-core-elevation-1); + border-top: 1px solid var(--str-chat__border-core-default); + background: var(--str-chat__background-core-elevation-1); } .str-chat__message-composer { @@ -82,7 +47,7 @@ align-items: end; width: 100%; max-width: var(--str-chat__message-composer-max-width); - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-width: 0; flex-shrink: 1; transition: gap var(--str-chat__message-composer-command-transition-duration) @@ -95,11 +60,11 @@ flex-grow: 0; width: var( --str-chat__message-composer-attachment-slot-width, - calc(var(--button-visual-height-lg) + 2 * var(--spacing-xxs)) + calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs)) ); max-width: var( --str-chat__message-composer-attachment-slot-width, - calc(var(--button-visual-height-lg) + 2 * var(--spacing-xxs)) + calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs)) ); box-sizing: border-box; opacity: 1; @@ -152,7 +117,10 @@ flex-direction: column; flex: 1 1 0; min-width: 0; - @include utils.component-layer-overrides('message-input'); + background: var(--composer-bg); + color: var(--str-chat__input-text-default); + border-radius: var(--str-chat__radius-3xl); + border: 1px solid var(--str-chat__border-core-default); } .str-chat__message-composer-previews { @@ -161,8 +129,8 @@ max-height: 400px; overflow: hidden; width: 100%; - padding: var(--spacing-xs) var(--spacing-xs) 0; - gap: var(--spacing-xxs); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs) 0; + gap: var(--str-chat__spacing-xxs); min-width: 0; min-height: 0; @@ -172,9 +140,9 @@ display: flex; align-items: end; width: 100%; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); padding: calc( - var(--spacing-sm) - 1px + var(--str-chat__spacing-sm) - 1px ); // compensate for the 1px border of the composer container $controls-containers-min-height: 26px; @@ -185,7 +153,7 @@ flex-direction: column; min-height: $controls-containers-min-height; justify-content: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); .str-chat__message-composer-controls__text-composition-controls__command-chip-container { height: 100%; @@ -201,7 +169,7 @@ align-items: center; width: 100%; min-width: 0; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__message-composer__actions, @@ -232,13 +200,14 @@ width: 100%; textarea { - @include utils.component-layer-overrides('message-textarea'); + background: transparent; + color: var(--str-chat__input-text-default); resize: none; border: none; box-shadow: none; outline: none; width: 100%; - font-size: var(--typography-font-size-md); + font-size: var(--str-chat__typography-font-size-md); scrollbar-width: none; } } @@ -248,22 +217,22 @@ cursor: pointer; svg { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } .str-chat__start-recording-audio-button { .str-chat__icon--voice { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } .str-chat__send-button { .str-chat__icon--send { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } @@ -278,13 +247,14 @@ } .str-chat__message-composer-cooldown { - @include utils.component-layer-overrides('cooldown'); + background: var(--str-chat__background-utility-disabled); + color: var(--str-chat__text-disabled); + border-radius: var(--str-chat__button-radius-full); display: flex; align-items: center; justify-content: center; - height: var(--button-visual-height-md); - width: var(--button-visual-height-md); - border-radius: var(--str-chat__cooldown-border-radius); + height: var(--str-chat__button-visual-height-md); + width: var(--str-chat__button-visual-height-md); } [dir='rtl'] .str-chat__send-button, @@ -320,17 +290,17 @@ // todo: need designs? what kind of action buttons to use on modals? .str-chat__recording-permission-denied-notification { max-width: 100%; - padding: var(--spacing-md); - font-size: var(--typography-font-size-sm); - line-height: var(--typography-line-height-tight); + padding: var(--str-chat__spacing-md); + font-size: var(--str-chat__typography-font-size-sm); + line-height: var(--str-chat__typography-line-height-tight); .str-chat__recording-permission-denied-notification__heading { - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__recording-permission-denied-notification__message { - margin: var(--spacing-xs) 0 0; - font-weight: var(--typography-font-weight-regular, 400); + margin: var(--str-chat__spacing-xs) 0 0; + font-weight: var(--str-chat__typography-font-weight-regular, 400); } } } diff --git a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss index 25382c1c45..0856af481f 100644 --- a/src/components/MessageComposer/styling/QuotedMessageIndicator.scss +++ b/src/components/MessageComposer/styling/QuotedMessageIndicator.scss @@ -1,10 +1,13 @@ .str-chat__quoted-message-indicator { - background-color: var(--chat-reply-indicator, var(--chat-reply-indicator-incoming)); - border-radius: var(--radius-max); + background-color: var( + --chat-reply-indicator, + var(--str-chat__chat-reply-indicator-incoming) + ); + border-radius: var(--str-chat__radius-max); height: 100%; width: 2px; } .str-chat__quoted-message-indicator--own-message { - background-color: var(--chat-reply-indicator-outgoing); + background-color: var(--str-chat__chat-reply-indicator-outgoing); } diff --git a/src/components/MessageComposer/styling/QuotedMessagePreview.scss b/src/components/MessageComposer/styling/QuotedMessagePreview.scss index 977dc17861..243a5d012c 100644 --- a/src/components/MessageComposer/styling/QuotedMessagePreview.scss +++ b/src/components/MessageComposer/styling/QuotedMessagePreview.scss @@ -2,17 +2,17 @@ .str-chat { .str-chat__message-composer__quoted-message-preview-slot { - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); } .str-chat__quoted-message-preview { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); position: relative; - background-color: var(--chat-bg-incoming); - padding: var(--spacing-xs); - border-radius: var(--message-bubble-radius-attachment); + background-color: var(--str-chat__chat-bg-incoming); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__message-bubble-radius-attachment); .str-chat__quoted-message-indicator { height: 36px; @@ -24,25 +24,25 @@ justify-content: center; flex: 1; min-width: 0; - font-size: var(--typography-font-size-xs); - line-height: var(--typography-line-height-tight); + font-size: var(--str-chat__typography-font-size-xs); + line-height: var(--str-chat__typography-line-height-tight); height: 40px; // to keep the same height even though the image preview is missing (it has 40px height) .str-chat__quoted-message-preview__author { @include utils.ellipsis-text(); overflow-x: hidden; // force ellipsis to show - font-weight: var(--typography-font-weight-semi-bold); + font-weight: var(--str-chat__typography-font-weight-semi-bold); } .str-chat__quoted-message-preview__message { //@include utils.ellipsis-text-parent; display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); svg { - height: var(--typography-font-size-xs); - width: var(--typography-font-size-xs); + height: var(--str-chat__typography-font-size-xs); + width: var(--str-chat__typography-font-size-xs); } .str-chat__icon--voice path { @@ -57,7 +57,7 @@ // we do not want links to be blue etc. * { white-space: nowrap; - color: var(--chat-text-incoming); + color: var(--str-chat__chat-text-incoming); } } } @@ -85,7 +85,7 @@ position: absolute; inset-inline-start: 10px; top: 10px; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); background-color: var(--control-play-control-bg); .str-chat__icon--play-fill { @@ -101,6 +101,6 @@ } .str-chat__quoted-message-preview--own { - background-color: var(--chat-bg-outgoing); + background-color: var(--str-chat__chat-bg-outgoing); } } diff --git a/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss b/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss index 397e9b832c..d40d74029d 100644 --- a/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss +++ b/src/components/MessageComposer/styling/RemoveAttachmentPreviewButton.scss @@ -6,5 +6,5 @@ background-color: var(--str-chat__attachment-preview-close-icon-background); border: 3px solid var(--str-chat__attachment-preview-close-icon-border-color); color: var(--str-chat__attachment-preview-close-icon-color); - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); } diff --git a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss index 1d3f9266ef..a9e581381d 100644 --- a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss +++ b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss @@ -3,17 +3,17 @@ display: flex; align-items: flex-start; max-width: var(--str-chat__message-composer-max-width); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); &.str-chat__send-to-channel-checkbox__container--checked { - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat__send-to-channel-checkbox__field { position: relative; display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); cursor: pointer; /* Visually hide the native checkbox; it stays focusable and clickable for a11y */ @@ -36,8 +36,8 @@ .str-chat__send-to-channel-checkbox__visual { width: 20px; height: 20px; - border: 1px solid var(--control-checkbox-border, #d5dbe1); - border-radius: var(--radius-sm); + border: 1px solid var(--str-chat__control-checkbox-border, #d5dbe1); + border-radius: var(--str-chat__radius-sm); display: flex; align-items: center; justify-content: center; @@ -49,12 +49,18 @@ .str-chat__send-to-channel-checkbox__input:checked + .str-chat__send-to-channel-checkbox__visual { - background-color: var(--control-radiocheck-bg-selected, var(--accent-primary)); - border-color: var(--control-radiocheck-bg-selected, var(--accent-primary)); + background-color: var( + --control-radiocheck-bg-selected, + var(--str-chat__accent-primary) + ); + border-color: var( + --control-radiocheck-bg-selected, + var(--str-chat__accent-primary) + ); } .str-chat__send-to-channel-checkbox__checkmark { - color: var(--control-checkbox-icon); + color: var(--str-chat__control-checkbox-icon); opacity: 0; display: flex; align-items: center; diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss index 7bc49cc6ef..36dc58d43e 100644 --- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss +++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss @@ -1,45 +1,23 @@ @use '../../../styling/utils'; @use '../../../styling/variables/font' as font; -.str-chat { - /* The border radius used for the borders of file attachments */ - --str-chat__unsupported-attachment-preview-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* The text/icon color of file attachments */ - --str-chat__unsupported-attachment-preview-color: var(--text-primary); - - /* The background color of file attachments */ - --str-chat__unsupported-attachment-preview-background-color: transparent; - - /* Top border of file attachments */ - --str-chat__unsupported-attachment-preview-border-block-start: none; - - /* Bottom border of file attachments */ - --str-chat__unsupported-attachment-preview-border-block-end: none; - - /* Left (right in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-preview-border-inline-start: none; - - /* Right (left in RTL layout) border of file attachments */ - --str-chat__unsupported-attachment-preview-border-inline-end: none; - - /* Box shadow applied to file attachments */ - --str-chat__unsupported-attachment-preview-box-shadow: none; -} - .str-chat__attachment-preview-unsupported { - @include utils.component-layer-overrides('unsupported-attachment-preview'); + background: transparent; + color: var(--str-chat__text-primary); + border-radius: calc( + var(--str-chat__message-bubble-radius-group-bottom) - var( + --str-chat__attachment-margin + ) + ); display: flex; align-items: center; justify-content: center; - padding: var(--spacing-md); - column-gap: var(--spacing-xs); + padding: var(--str-chat__spacing-md); + column-gap: var(--str-chat__spacing-xs); .str-chat__icon { - height: var(--size-20); - width: var(--size-20); + height: var(--str-chat__size-20); + width: var(--str-chat__size-20); } .str-chat__attachment-preview-unsupported__metadata { diff --git a/src/components/MessageList/styling/MessageList.scss b/src/components/MessageList/styling/MessageList.scss index 3c49125861..c4f8c6c4ff 100644 --- a/src/components/MessageList/styling/MessageList.scss +++ b/src/components/MessageList/styling/MessageList.scss @@ -19,7 +19,10 @@ } .str-chat__message-list { - @include utils.scrollable-y; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable both-edges; + overscroll-behavior: contain; display: flex; justify-content: center; position: relative; @@ -27,7 +30,8 @@ width: 100%; height: 100%; max-height: 100%; - @include utils.component-layer-overrides('message-list'); + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); .str-chat__message-list-scroll { @include utils.message-list-spacing; @@ -65,36 +69,3 @@ } } } - -// Theme -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__message-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__message-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__message-list-background-color: var(--background-core-app); - - /* Box shadow applied to the component */ - --str-chat__message-list-box-shadow: none; - - /* Top border of the component */ - --str-chat__message-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__message-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__message-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__message-list-border-inline-end: none; - - /* The color used for displaying thread replies and thread separator at the start of a thread */ - --str-chat__thread-head-start-color: var(--text-tertiary); - - /* The color used for the separator below the first message in a thread */ - --str-chat__thread-head-start-border-block-end-color: var(--background-core-surface); -} diff --git a/src/components/MessageList/styling/NewMessageNotification.scss b/src/components/MessageList/styling/NewMessageNotification.scss index bd4ffa9689..f61ea1f652 100644 --- a/src/components/MessageList/styling/NewMessageNotification.scss +++ b/src/components/MessageList/styling/NewMessageNotification.scss @@ -11,10 +11,10 @@ display: flex; align-items: center; justify-content: center; - padding: var(--spacing-xxs) var(--spacing-sm); - background-color: var(--background-core-surface-subtle); - border-radius: var(--radius-max); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); + background-color: var(--str-chat__background-core-surface-subtle); + border-radius: var(--str-chat__radius-max); font: var(--str-chat__font-metadata-emphasis); - color: var(--chat-text-system); + color: var(--str-chat__chat-text-system); } } diff --git a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss index bcc57ad1af..da8c5304f5 100644 --- a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss +++ b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss @@ -2,14 +2,17 @@ height: 40px; width: 40px; position: absolute; - inset-block-end: var(--spacing-md); + inset-block-end: var(--str-chat__spacing-md); inset-inline-end: max( - var(--spacing-md), - calc((100% - var(--str-chat__message-list-scroll-max-width)) / 2 + var(--spacing-md)) + var(--str-chat__spacing-md), + calc( + (100% - var(--str-chat__message-list-scroll-max-width)) / 2 + + var(--str-chat__spacing-md) + ) ); z-index: 2; - border-radius: var(--radius-max); - background-color: var(--background-core-elevation-1); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__background-core-elevation-1); // todo - we ned to have the shadows in variables that are supported in light and dark mode too box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -25,7 +28,7 @@ .str-chat__jump-to-latest__unread-count { position: absolute; inset-block-end: 100%; - margin-block-end: var(--space-4); + margin-block-end: var(--str-chat__space-4); inset-inline-end: -15%; top: -15%; } diff --git a/src/components/MessageList/styling/UnreadMessageNotification.scss b/src/components/MessageList/styling/UnreadMessageNotification.scss index 90dff26c19..6249a3f253 100644 --- a/src/components/MessageList/styling/UnreadMessageNotification.scss +++ b/src/components/MessageList/styling/UnreadMessageNotification.scss @@ -2,9 +2,9 @@ .str-chat__unread-messages-notification { display: flex; align-items: center; - background: var(--background-core-elevation-1); - border-radius: var(--button-radius-lg); - border: 1px solid var(--button-secondary-border); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__button-radius-lg); + border: 1px solid var(--str-chat__button-secondary-border); /* shadow/web/light/elevation-2 */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), @@ -27,17 +27,21 @@ button:first-of-type { display: flex; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg); - padding: var(--button-padding-y-md) var(--spacing-xxs) var(--button-padding-y-md) - var(--button-padding-x-with-label-md); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__button-radius-lg) 0 0 + var(--str-chat__button-radius-lg); + padding: var(--str-chat__button-padding-y-md) var(--str-chat__spacing-xxs) + var(--str-chat__button-padding-y-md) + var(--str-chat__button-padding-x-with-label-md); font: var(--str-chat__font-caption-emphasis); } button:last-of-type { - border-radius: 0 var(--button-radius-lg) var(--button-radius-lg) 0; - padding: var(--button-padding-y-md) var(--button-padding-x-with-label-md) - var(--button-padding-y-md) var(--spacing-xxs); + border-radius: 0 var(--str-chat__button-radius-lg) var(--str-chat__button-radius-lg) + 0; + padding: var(--str-chat__button-padding-y-md) + var(--str-chat__button-padding-x-with-label-md) + var(--str-chat__button-padding-y-md) var(--str-chat__spacing-xxs); svg { height: 16px; diff --git a/src/components/MessageList/styling/UnreadMessagesSeparator.scss b/src/components/MessageList/styling/UnreadMessagesSeparator.scss index a14594b2d6..81b19a64e5 100644 --- a/src/components/MessageList/styling/UnreadMessagesSeparator.scss +++ b/src/components/MessageList/styling/UnreadMessagesSeparator.scss @@ -1,5 +1,5 @@ .str-chat__unread-messages-separator-wrapper { - padding-block: var(--spacing-xs); + padding-block: var(--str-chat__spacing-xs); display: flex; justify-content: center; @@ -7,15 +7,16 @@ display: flex; align-items: center; width: fit-content; - padding: var(--spacing-xxs) var(--spacing-xs); - background: var(--background-core-elevation-1); - border-radius: var(--button-radius-lg); - border: 1px solid var(--button-secondary-border); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__button-radius-lg); + border: 1px solid var(--str-chat__button-secondary-border); overflow: clip; .str-chat__unread-messages-separator__text { - padding-inline: var(--spacing-xs) var(--spacing-xxs); - border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg); + padding-inline: var(--str-chat__spacing-xs) var(--str-chat__spacing-xxs); + border-radius: var(--str-chat__button-radius-lg) 0 0 + var(--str-chat__button-radius-lg); font: var(--str-chat__font-caption-emphasis); text-transform: lowercase; } diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss index ad5cd21d01..c62fa4eaaa 100644 --- a/src/components/MessageList/styling/VirtualizedMessageList.scss +++ b/src/components/MessageList/styling/VirtualizedMessageList.scss @@ -1,34 +1,12 @@ @use '../../../styling/utils'; -.str-chat { - /* The border radius used for the borders of the component */ - --str-chat__virtual-list-border-radius: 0; - - /* The text/icon color of the component */ - --str-chat__virtual-list-color: var(--text-primary); - - /* The background color of the component */ - --str-chat__virtual-list-background-color: var(--background-core-app); - - /* Box shadow applied to the component */ - --str-chat__virtual-list-box-shadow: none; - - /* Top border of the component */ - --str-chat__virtual-list-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__virtual-list-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__virtual-list-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__virtual-list-border-inline-end: none; -} - .str-chat__virtual-list { - @include utils.component-layer-overrides('virtual-list'); - @include utils.scrollable-y; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable both-edges; + + background: var(--str-chat__background-core-app); + color: var(--str-chat__text-primary); --str-chat__message-list-scroll-max-width: calc( var(--str-chat__message-composer-max-width) + var(--str-chat__message-composer-padding) @@ -58,7 +36,7 @@ // a simple workaround is to make the loading indicator an overlay. &__loading { display: flex; - padding-top: var(--space-8); + padding-top: var(--str-chat__space-8); justify-content: center; width: 100%; position: absolute; diff --git a/src/components/Modal/styling/Modal.scss b/src/components/Modal/styling/Modal.scss index f0264f16e0..b0795b7ce7 100644 --- a/src/components/Modal/styling/Modal.scss +++ b/src/components/Modal/styling/Modal.scss @@ -2,16 +2,16 @@ .str-chat { /* The border radius used for the borders of the content area of the component of the content area of the component */ - --str-chat__modal-border-radius: var(--radius-xl); + --str-chat__modal-border-radius: var(--str-chat__radius-xl); /* The text/icon color of the content area of the component */ - --str-chat__modal-color: var(--text-primary); + --str-chat__modal-color: var(--str-chat__text-primary); /* The background color of the content area of the component */ - --str-chat__modal-background-color: var(--background-core-elevation-1); + --str-chat__modal-background-color: var(--str-chat__background-core-elevation-1); /* The overlay color of the component */ - --str-chat__modal-overlay-color: var(--background-core-scrim); + --str-chat__modal-overlay-color: var(--str-chat__background-core-scrim); /* The backdrop filter applied to the component */ --str-chat__modal-overlay-backdrop-filter: blur(3px); @@ -50,8 +50,8 @@ position: absolute; inset-inline-end: 10px; top: 10px; - padding: var(--spacing-xs); - color: var(--text-on-accent); + padding: var(--str-chat__spacing-xs); + color: var(--str-chat__text-on-accent); svg { height: 12px; diff --git a/src/components/Notifications/styling/Notification.scss b/src/components/Notifications/styling/Notification.scss index 14d5a2a7ad..aefae8dc01 100644 --- a/src/components/Notifications/styling/Notification.scss +++ b/src/components/Notifications/styling/Notification.scss @@ -1,26 +1,29 @@ .str-chat__notification { display: flex; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); min-height: 48px; max-width: 100%; - padding: var(--spacing-xs); + padding: var(--str-chat__spacing-xs); position: relative; pointer-events: visible; - background: var(--str-chat__notification-background, var(--background-core-inverse)); - border-radius: var(--str-chat__notification-border-radius, var(--radius-3xl)); + background: var( + --str-chat__notification-background, + var(--str-chat__background-core-inverse) + ); + border-radius: var(--str-chat__notification-border-radius, var(--str-chat__radius-3xl)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 12px 24px 0 rgba(0, 0, 0, 0.1); - color: var(--str-chat__notification-color, var(--text-on-inverse)); + color: var(--str-chat__notification-color, var(--str-chat__text-on-inverse)); .str-chat__notification-content { align-items: flex-start; display: flex; flex: 1 1 auto; - gap: var(--spacing-xs); - padding-inline: var(--spacing-xxs) var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-xxs) var(--str-chat__spacing-xs); .str-chat__notification-icon { display: flex; @@ -28,14 +31,14 @@ height: 100%; svg { - block-size: var(--icon-size-sm); - inline-size: var(--icon-size-sm); + block-size: var(--str-chat__icon-size-sm); + inline-size: var(--str-chat__icon-size-sm); } } .str-chat__notification-message { flex: 1 1 auto; - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); font: var(--str-chat__font-caption-default); text-align: center; white-space: nowrap; @@ -47,16 +50,16 @@ flex-basis: 100%; align-items: center; justify-content: flex-end; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); } .str-chat__notification-close-button { align-self: center; - padding: var(--spacing-xxs); + padding: var(--str-chat__spacing-xxs); svg { - height: var(--icon-size-sm); - width: var(--icon-size-sm); + height: var(--str-chat__icon-size-sm); + width: var(--str-chat__icon-size-sm); } } } @@ -93,23 +96,23 @@ //// Severity overrides: allow themes to keep colored variants; defaults match Figma (inverse). //.str-chat__notification--success { -// background: var(--str-chat-success-background, var(--background-core-inverse)); -// color: var(--str-chat-success-color, var(--text-on-inverse)); +// background: var(--str-chat-success-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-success-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--error { -// background: var(--str-chat-error-background, var(--background-core-inverse)); -// color: var(--str-chat-error-color, var(--text-on-inverse)); +// background: var(--str-chat-error-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-error-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--warning { -// background: var(--str-chat-warning-background, var(--background-core-inverse)); -// color: var(--str-chat-warning-color, var(--text-on-inverse)); +// background: var(--str-chat-warning-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-warning-color, var(--str-chat__text-on-inverse)); //} // //.str-chat__notification--info { -// background: var(--str-chat-info-background, var(--background-core-inverse)); -// color: var(--str-chat-info-color, var(--text-on-inverse)); +// background: var(--str-chat-info-background, var(--str-chat__background-core-inverse)); +// color: var(--str-chat-info-color, var(--str-chat__text-on-inverse)); //} // Loading state: spin the refresh icon diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss index e840557344..f17171523e 100644 --- a/src/components/Notifications/styling/NotificationList.scss +++ b/src/components/Notifications/styling/NotificationList.scss @@ -1,36 +1,28 @@ -.str-chat__notification-list { - --str-chat__notification-list-inset: 16px; - --str-chat__notification-list-gap: 8px; - --str-chat__notification-list-max-height: calc( - 100% - (var(--str-chat__notification-list-inset) * 2) - ); - --str-chat__notification-list-width: min( - 100%, - calc(100% - (var(--str-chat__notification-list-inset) * 2)) - ); +$notification-list-inset: 16px; +.str-chat__notification-list { background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - inline-size: var(--str-chat__notification-list-width); + inline-size: min(100%, calc(100% - ($notification-list-inset * 2))); max-width: 100%; min-width: 0; - max-height: var(--str-chat__notification-list-max-height); - padding-inline: var(--spacing-xs); + max-height: calc(100% - ($notification-list-inset * 2)); + padding-inline: var(--str-chat__spacing-xs); pointer-events: none; position: absolute; - inset-inline-end: var(--str-chat__notification-list-inset); + inset-inline-end: $notification-list-inset; z-index: 2; } .str-chat__notification-list--position-top { - inset-block-start: var(--str-chat__notification-list-inset); + inset-block-start: $notification-list-inset; } .str-chat__notification-list--position-bottom { - inset-block-end: var(--str-chat__notification-list-inset); + inset-block-end: $notification-list-inset; } .str-chat__notification-list__edge { diff --git a/src/components/Poll/styling/OptionFieldSet.scss b/src/components/Poll/styling/OptionFieldSet.scss index 28d972c5a5..ca7324117f 100644 --- a/src/components/Poll/styling/OptionFieldSet.scss +++ b/src/components/Poll/styling/OptionFieldSet.scss @@ -2,7 +2,7 @@ .str-chat__form__input-field { .str-chat__form__input-field__value { .str-chat__form__remove-option-button { - color: var(--input-text-icon); + color: var(--str-chat__input-text-icon); } } } diff --git a/src/components/Poll/styling/Poll.scss b/src/components/Poll/styling/Poll.scss index 853f5a3299..9fc0669c18 100644 --- a/src/components/Poll/styling/Poll.scss +++ b/src/components/Poll/styling/Poll.scss @@ -4,10 +4,12 @@ .str-chat__poll { display: flex; flex-direction: column; - gap: var(--spacing-xl); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xl); + padding: var(--str-chat__spacing-xs); width: calc( - var(--str-chat__message-with-attachment-max-width) - calc(2 * var(--spacing-xs)) + var(--str-chat__message-with-attachment-max-width) - calc( + 2 * var(--str-chat__spacing-xs) + ) ); max-width: 100%; min-width: 260px; @@ -28,17 +30,18 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + } - .str-chat__button.str-chat__poll-action { - width: 100%; - border: 1px solid var(--chat-border-on-chat); - padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm); - font: var(--str-chat__font-body-emphasis); + .str-chat__button.str-chat__poll-action { + width: 100%; + border: 1px solid var(--chat-border-on-chat); + padding: var(--str-chat__button-padding-y-sm) + var(--str-chat__button-padding-x-with-label-sm); + font: var(--str-chat__font-caption-emphasis); - &.str-chat__poll-action--additional { - border: none; - } + &.str-chat__poll-action--additional { + border: none; } } } diff --git a/src/components/Poll/styling/PollAnswerList.scss b/src/components/Poll/styling/PollAnswerList.scss index 512fa553b6..6e9dd4b7a2 100644 --- a/src/components/Poll/styling/PollAnswerList.scss +++ b/src/components/Poll/styling/PollAnswerList.scss @@ -9,14 +9,16 @@ .str-chat__infinite-scroll-paginator__content { display: flex; flex-direction: column; - gap: var(--spacing-md); - padding-bottom: var(--spacing-xl); + gap: var(--str-chat__spacing-md); + padding-bottom: var(--str-chat__spacing-xl); } } .str-chat__loading-indicator-placeholder { width: 100%; - height: calc(var(--str-chat__loading-indicator-size) + (2 * var(--spacing-xxs))); + height: calc( + var(--str-chat__loading-indicator-size) + (2 * var(--str-chat__spacing-xxs)) + ); display: flex; justify-content: center; } @@ -25,22 +27,22 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__poll-answer__data { display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-self: stretch; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); .str-chat__avatar { - height: var(--spacing-xl); - width: var(--spacing-xl); + height: var(--str-chat__spacing-xl); + width: var(--str-chat__spacing-xl); } p { @@ -52,7 +54,7 @@ } .str-chat__poll-vote { - padding-inline: var(--spacing-none); + padding-inline: var(--str-chat__spacing-none); padding-block: 0; } } @@ -61,8 +63,8 @@ display: flex; justify-content: center; width: 100%; - padding: var(--spacing-xs) var(--spacing-md); - border-top: 1px solid var(--border-core-default); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); + border-top: 1px solid var(--str-chat__border-core-default); } } } diff --git a/src/components/Poll/styling/PollCreationDialog.scss b/src/components/Poll/styling/PollCreationDialog.scss index 6fd9de80c1..c8b83a487d 100644 --- a/src/components/Poll/styling/PollCreationDialog.scss +++ b/src/components/Poll/styling/PollCreationDialog.scss @@ -10,14 +10,14 @@ form { display: flex; flex-direction: column; - gap: var(--spacing-xl); + gap: var(--str-chat__spacing-xl); } } .str-chat__poll-creation-dialog__features-selectors { display: flex; flex-direction: column; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); align-items: center; } @@ -42,7 +42,7 @@ .str-chat__multiple-answers-field__votes-limit-field__numeric-field { display: flex; align-items: center; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; .str-chat__form__switch-field__label { diff --git a/src/components/Poll/styling/PollOptionFullList.scss b/src/components/Poll/styling/PollOptionFullList.scss index 368f6874a5..99862acbb1 100644 --- a/src/components/Poll/styling/PollOptionFullList.scss +++ b/src/components/Poll/styling/PollOptionFullList.scss @@ -6,23 +6,23 @@ scrollbar-width: none; display: flex; flex-direction: column; - gap: var(--spacing-2xl); - padding-bottom: var(--spacing-xl); + gap: var(--str-chat__spacing-2xl); + padding-bottom: var(--str-chat__spacing-xl); .str-chat__poll-option-list--full { - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xs); scrollbar-width: none; - padding: var(--spacing-sm) var(--spacing-xxs); - border-radius: var(--radius-lg); - background-color: var(--background-core-surface-card); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-lg); + background-color: var(--str-chat__background-core-surface-card); .str-chat__poll-option { - padding: var(--spacing-xs); - border-radius: var(--radius-lg); + padding: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-md); } .str-chat__poll-option--votable { &:hover { - background-color: var(--background-utility-hover); + background-color: var(--str-chat__background-utility-hover); } } } diff --git a/src/components/Poll/styling/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss index e84481731e..7af07bc91f 100644 --- a/src/components/Poll/styling/PollOptionList.scss +++ b/src/components/Poll/styling/PollOptionList.scss @@ -1,21 +1,19 @@ -.str-chat { - --str-chat__poll-checkmark-size: 24px; -} +$poll-checkmark-size: var(--str-chat__size-24); .str-chat__poll-option-list { display: flex; flex-direction: column; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); .str-chat__poll-option { display: grid; grid-template-columns: minmax(0, auto) 1fr; grid-template-rows: 1fr auto; - row-gap: var(--spacing-xs); + row-gap: var(--str-chat__spacing-xs); align-items: start; &.str-chat__poll-option--votable { - column-gap: var(--spacing-sm); + column-gap: var(--str-chat__spacing-sm); &:hover { cursor: pointer; @@ -25,10 +23,11 @@ .str-chat__checkmark { grid-column: 1; grid-row: span 2; - height: var(--str-chat__poll-checkmark-size); - width: var(--str-chat__poll-checkmark-size); - border-radius: var(--radius-max); - border: 1px solid var(--chat-border-on-chat); + height: $poll-checkmark-size; + width: $poll-checkmark-size; + border-radius: var(--str-chat__radius-max); + border: 1px solid + var(--chat-border-on-chat, var(--str-chat__chat-border-on-chat-incoming)); } .str-chat__checkmark--checked { @@ -36,29 +35,31 @@ background-repeat: no-repeat; background-position: center; background-size: 11px 10px; - background-color: var(--control-radio-check-bg-selected); + background-color: var(--str-chat__control-radio-check-bg-selected); border: none; } .str-chat__poll-option-data { flex: 1; display: flex; - align-items: start; - gap: var(--spacing-xs); + align-items: baseline; + gap: var(--str-chat__spacing-xs); grid-column: 2 / 3; grid-row: 1 / 2; min-height: 24px; - padding-block: var(--spacing-xxxs); + padding-block: var(--str-chat__spacing-xxxs); p { margin: 0; flex: 1; + word-break: break-word; + hyphens: auto; } .str-chat__poll-option-votes { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__poll-option-voters { --str-chat__avatar-size: 1.175rem; @@ -79,18 +80,15 @@ width: 100%; background: linear-gradient( to right, - var(--chat-poll-progress-fill) var(--str-chat__amount-bar-fulfillment), - var(--chat-poll-progress-track) var(--str-chat__amount-bar-fulfillment) + var(--chat-poll-progress-fill, var(--str-chat__chat-poll-progress-fill-incoming)) + var(--str-chat__amount-bar-fulfillment), + var( + --chat-poll-progress-track, + var(--str-chat__chat-poll-progress-track-incoming) + ) + var(--str-chat__amount-bar-fulfillment) ); - border-radius: var(--size-4); - } - } -} - -.str-chat__message--me { - .str-chat__poll-option-list { - .str-chat__checkmark { - border: 1px solid var(--chat-border-on-chat-outgoing); + border-radius: var(--str-chat__size-4); } } } diff --git a/src/components/Poll/styling/PollQuestion.scss b/src/components/Poll/styling/PollQuestion.scss index d1d7fc7e32..f6cc0cb538 100644 --- a/src/components/Poll/styling/PollQuestion.scss +++ b/src/components/Poll/styling/PollQuestion.scss @@ -1,20 +1,20 @@ .str-chat__modal__poll-question { display: flex; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__modal__poll-question__label { font: var(--str-chat__font-heading-xs); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__modal__poll-question__text { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/Poll/styling/PollResults.scss b/src/components/Poll/styling/PollResults.scss index 04ecd1bca9..18c7b5a90b 100644 --- a/src/components/Poll/styling/PollResults.scss +++ b/src/components/Poll/styling/PollResults.scss @@ -9,7 +9,7 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-2xl); + gap: var(--str-chat__spacing-2xl); } .str-chat__modal__poll-results__options { @@ -22,40 +22,42 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); align-self: stretch; .str-chat__poll-option { display: flex; flex-direction: column; width: 100%; - padding-block: var(--spacing-md); - border-radius: var(--radius-lg); - background: var(--background-core-surface-card); + padding-block: var(--str-chat__spacing-md); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-surface-card); .str-chat__poll-option__header { display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); align-self: stretch; - padding-inline: var(--spacing-md); + padding-inline: var(--str-chat__spacing-md); .str-chat__poll-option__header__label { font: var(--str-chat__font-heading-xs); - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__poll-option__header__title { display: flex; align-items: start; - gap: var(--spacing-md); + gap: var(--str-chat__spacing-md); width: 100%; font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); .str-chat__poll-option__option-text { flex: 1; + word-break: break-word; + hyphens: auto; } } } @@ -65,11 +67,11 @@ flex-direction: column; align-items: flex-start; align-self: stretch; - padding: var(--spacing-xs) var(--spacing-none); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-none); .str-chat__avatar { - height: var(--spacing-2xl); - width: var(--spacing-2xl); + height: var(--str-chat__spacing-2xl); + width: var(--str-chat__spacing-2xl); } } @@ -77,8 +79,8 @@ display: flex; justify-content: center; width: 100%; - padding: var(--spacing-xs) var(--spacing-md); - border-top: 1px solid var(--border-core-default); + padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-md); + border-top: 1px solid var(--str-chat__border-core-default); } } @@ -96,7 +98,9 @@ .str-chat__poll-option__votes-paginated-list { .str-chat__loading-indicator-placeholder { width: 100%; - height: calc(var(--str-chat__loading-indicator-size) + (2 * var(--spacing-xxs))); + height: calc( + var(--str-chat__loading-indicator-size) + (2 * var(--str-chat__spacing-xxs)) + ); display: flex; justify-content: center; } @@ -104,7 +108,7 @@ } .str-chat__modal__poll-results__options__footer { - padding-top: var(--spacing-2xl); + padding-top: var(--str-chat__spacing-2xl); .str-chat__modal__poll-results__options-total-count { width: 100%; @@ -115,11 +119,13 @@ .str-chat__poll-result-option-vote-counter { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; font: var(--str-chat__font-caption-emphasis); - svg { + .str-chat__icon { + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } } } @@ -130,7 +136,7 @@ scrollbar-width: none; width: 100%; height: 100%; - padding-bottom: var(--spacing-xl); + padding-bottom: var(--str-chat__spacing-xl); } } @@ -139,6 +145,6 @@ @include utils.scrollable-y; scrollbar-width: none; max-height: calc(640px - 76px); - padding-bottom: var(--spacing-2xl); + padding-bottom: var(--str-chat__spacing-2xl); } } diff --git a/src/components/Poll/styling/PollVote.scss b/src/components/Poll/styling/PollVote.scss index 11b8a1174f..c35d1171a6 100644 --- a/src/components/Poll/styling/PollVote.scss +++ b/src/components/Poll/styling/PollVote.scss @@ -1,8 +1,8 @@ .str-chat__poll-vote { display: flex; - padding: var(--spacing-xxs) var(--spacing-sm); + padding: var(--str-chat__spacing-xxs) var(--str-chat__spacing-sm); align-items: center; - gap: var(--spacing-none, 0); + gap: var(--str-chat__spacing-none, 0); align-self: stretch; width: 100%; font: var(--str-chat__font-caption-default); @@ -11,7 +11,7 @@ flex: 1; display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); } .str-chat__poll-vote__author__name { diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss index e54961b8cd..b4ff58f0d9 100644 --- a/src/components/Reactions/styling/MessageReactions.scss +++ b/src/components/Reactions/styling/MessageReactions.scss @@ -9,7 +9,7 @@ padding: 0; display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); .str-chat__message-reactions__list-item { display: flex; @@ -26,9 +26,9 @@ .str-chat__message-reactions__list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions__total-count, diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss index 1f756e9723..d426b08235 100644 --- a/src/components/Reactions/styling/MessageReactionsDetail.scss +++ b/src/components/Reactions/styling/MessageReactionsDetail.scss @@ -4,13 +4,13 @@ .str-chat { .str-chat__dialog-contents:has(.str-chat__message-reactions-detail):focus-visible { - border-radius: var(--radius-lg); + border-radius: var(--str-chat__radius-lg); } } .str-chat__message-reactions-detail { - border-radius: var(--radius-lg); - background: var(--background-core-elevation-2); + border-radius: var(--str-chat__radius-lg); + background: var(--str-chat__background-core-elevation-2); max-width: 256px; min-width: min(90vw, 256px); @@ -26,38 +26,38 @@ min-width: unset; } - font-family: var(--typography-font-family-sans); + font-family: var(--str-chat__typography-font-family-sans); box-shadow: var(--str-chat__box-shadow-3); - padding-block-start: var(--spacing-xxs); + padding-block-start: var(--str-chat__spacing-xxs); display: flex; flex-direction: column; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); .str-chat__message-reactions-detail__total-count { display: flex; align-items: center; justify-content: flex-start; - padding-inline: var(--spacing-md); - min-height: var(--size-32); - max-height: var(--size-32); - - color: var(--text-tertiary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-medium); - line-height: var(--typography-line-height-normal); + padding-inline: var(--str-chat__spacing-md); + min-height: var(--str-chat__size-32); + max-height: var(--str-chat__size-32); + + color: var(--str-chat__text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-medium); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__reaction-type-list { list-style: none; margin: 0; - padding-inline: var(--spacing-md); - padding-block: var(--spacing-xs); + padding-inline: var(--str-chat__spacing-md); + padding-block: var(--str-chat__spacing-xs); display: flex; flex-wrap: wrap; - gap: var(--spacing-xs) var(--spacing-xxs); + gap: var(--str-chat__spacing-xs) var(--str-chat__spacing-xxs); .str-chat__message-reactions-detail__reaction-type-list-item { display: flex; @@ -65,19 +65,19 @@ .str-chat__message-reactions-detail__reaction-type-list-item-button { @include common.reaction-button; box-shadow: unset; - min-width: var(--size-48); + min-width: var(--str-chat__size-48); background: none; - border: 1px solid var(--control-chip-border); + border: 1px solid var(--str-chat__control-chip-border); .str-chat__message-reactions-detail__reaction-type-list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } &:has(.str-chat__icon) { @@ -88,7 +88,7 @@ } .str-chat__message-reactions-detail__reaction-type-list-item-count { - color: var(--reaction-text); + color: var(--str-chat__reaction-text); font: var(--str-chat__font-metadata-emphasis); } } @@ -108,45 +108,45 @@ @include utils.scrollable-y; scrollbar-width: none; position: relative; - padding-block-end: var(--spacing-xxs); + padding-block-end: var(--str-chat__spacing-xxs); max-height: 180px; .str-chat__message-reactions-detail__skeleton-item { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs)); + gap: var(--str-chat__spacing-xs); + padding-inline: calc(var(--str-chat__spacing-sm) + var(--str-chat__spacing-xxs)); .str-chat__message-reactions-detail__skeleton-avatar { - width: var(--size-32); - height: var(--size-32); - border-radius: var(--radius-max); + width: var(--str-chat__size-32); + height: var(--str-chat__size-32); + border-radius: var(--str-chat__radius-max); @include channel-utils.channel-loading-shimmer; flex-shrink: 0; } .str-chat__message-reactions-detail__skeleton-line { flex-grow: 1; - height: var(--size-20); - border-radius: var(--radius-sm); + height: var(--str-chat__size-20); + border-radius: var(--str-chat__radius-sm); @include channel-utils.channel-loading-faded-bar; } } .str-chat__message-reactions-detail__user-list-item { - padding-block: var(--spacing-xxs); + padding-block: var(--str-chat__spacing-xxs); display: flex; align-items: center; - gap: var(--spacing-xs); - padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs)); - max-height: var(--size-40); + gap: var(--str-chat__spacing-xs); + padding-inline: calc(var(--str-chat__spacing-sm) + var(--str-chat__spacing-xxs)); + max-height: var(--str-chat__size-40); .str-chat__message-reactions-detail__user-list-item-icon { font-family: system-ui; - font-size: var(--font-size-size-17); + font-size: var(--str-chat__font-size-size-17); font-style: normal; - line-height: var(--typography-line-height-normal); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__user-list-item-info { @@ -156,15 +156,15 @@ min-width: 0; .str-chat__message-reactions-detail__user-list-item-username { - color: var(--text-primary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + color: var(--str-chat__text-primary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); } .str-chat__message-reactions-detail__user-list-item-button { @include utils.unset-button; - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); font: var(--str-chat__font-metadata-default); cursor: pointer; align-self: flex-start; diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss index 784ad45cdd..32bd011e8c 100644 --- a/src/components/Reactions/styling/ReactionSelector.scss +++ b/src/components/Reactions/styling/ReactionSelector.scss @@ -3,14 +3,14 @@ .str-chat__reaction-selector { display: flex; - padding-inline-start: var(--spacing-xxs, 0); - padding-inline-end: var(--spacing-xs, 0); - padding-block: var(--spacing-xxs, 0); + padding-inline-start: var(--str-chat__spacing-xxs, 0); + padding-inline-end: var(--str-chat__spacing-xs, 0); + padding-block: var(--str-chat__spacing-xxs, 0); align-items: center; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); - border-radius: var(--radius-4xl, 32px); - background: var(--background-core-elevation-2, #fff); + border-radius: var(--str-chat__radius-4xl, 32px); + background: var(--str-chat__background-core-elevation-2, #fff); box-shadow: var(--str-chat__box-shadow-3); @@ -19,7 +19,7 @@ display: block; @include utils.scrollable-y; scrollbar-width: none; - border-radius: var(--radius-lg); + border-radius: var(--str-chat__radius-lg); max-height: 320px; @include common.clipping-fade; @@ -30,17 +30,17 @@ aspect-ratio: 1/1; .str-chat__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } } .str-chat__reaction-selector-list { list-style: none; - margin: var(--spacing-none, 0); - padding: var(--spacing-none, 0); + margin: var(--str-chat__spacing-none, 0); + padding: var(--str-chat__spacing-none, 0); display: flex; - gap: var(--space-2, 2px); + gap: var(--str-chat__space-2, 2px); .str-chat__reaction-selector-list__item { display: flex; @@ -49,33 +49,33 @@ .str-chat__reaction-selector-list__item-button { background-color: transparent; border: none; - border-radius: var(--radius-max); + border-radius: var(--str-chat__radius-max); cursor: pointer; display: flex; min-width: 40px; min-height: 40px; - padding: var(--spacing-none, 0); + padding: var(--str-chat__spacing-none, 0); justify-content: center; align-items: center; - gap: var(--spacing-none, 0); + gap: var(--str-chat__spacing-none, 0); &:not(:disabled):hover { - background-color: var(--background-utility-hover); + background-color: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background-color: var(--background-utility-pressed); + background-color: var(--str-chat__background-utility-pressed); } &:not(:disabled):focus-visible { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: -2px; } &:not(:disabled)[aria-pressed='true'] { - background-color: var(--background-utility-selected); + background-color: var(--str-chat__background-utility-selected); } .str-chat__reaction-icon { - font-size: var(--typography-font-size-2xl); + font-size: var(--str-chat__typography-font-size-2xl); line-height: 1; display: flex; justify-content: center; diff --git a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss index fb0ca14a54..30d5b9c834 100644 --- a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss +++ b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss @@ -2,14 +2,14 @@ display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; - padding-block: var(--spacing-md); - padding-inline: var(--spacing-sm); + padding-block: var(--str-chat__spacing-md); + padding-inline: var(--str-chat__spacing-sm); .str-chat__reaction-selector-extended-list__button { .str-chat__reaction-icon { - height: var(--emoji-md); - width: var(--emoji-md); - font-size: var(--emoji-md); + height: var(--str-chat__emoji-md); + width: var(--str-chat__emoji-md); + font-size: var(--str-chat__emoji-md); letter-spacing: var(--typography-letter-spacing-default); font-style: normal; line-height: 0; diff --git a/src/components/Reactions/styling/common.scss b/src/components/Reactions/styling/common.scss index 83607f6109..7b73b9f8f9 100644 --- a/src/components/Reactions/styling/common.scss +++ b/src/components/Reactions/styling/common.scss @@ -6,15 +6,15 @@ cursor: pointer; position: relative; display: flex; - gap: var(--spacing-xxs); - padding-inline: var(--spacing-xs); - padding-block: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxs); + padding-inline: var(--str-chat__spacing-xs); + padding-block: var(--str-chat__spacing-xxxs); align-items: center; justify-content: center; - border-radius: var(--radius-max); - border: 1px solid var(--reaction-border); - background: var(--reaction-bg); - color: var(--reaction-text); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__reaction-border); + background: var(--str-chat__reaction-bg); + color: var(--str-chat__reaction-text); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16); font-weight: inherit; font-size: inherit; @@ -36,13 +36,13 @@ } &:hover::before { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:active::before { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &[aria-pressed='true']::before { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } } } @@ -54,7 +54,7 @@ position: absolute; width: 100%; inset-inline-start: 0; - height: var(--size-16); + height: var(--str-chat__size-16); } &::after { @@ -64,7 +64,7 @@ background: linear-gradient( to bottom, transparent 5%, - var(--background-core-elevation-2) 95% + var(--str-chat__background-core-elevation-2) 95% ); } @@ -77,7 +77,7 @@ background: linear-gradient( to top, transparent 5%, - var(--background-core-elevation-2) 95% + var(--str-chat__background-core-elevation-2) 95% ); } } diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss index d88646948b..09653432f9 100644 --- a/src/components/Search/styling/Search.scss +++ b/src/components/Search/styling/Search.scss @@ -1,27 +1,27 @@ .str-chat__search { display: flex; flex-direction: column; - gap: var(--spacing-sm); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-xs); justify-content: center; } .str-chat__search-bar { - padding-inline: var(--spacing-md); + padding-inline: var(--str-chat__spacing-md); display: flex; - gap: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxxs); .str-chat__search-bar__input-wrapper { display: flex; min-height: 40px; align-items: center; - gap: var(--spacing-xs); - border-radius: var(--radius-max); - border: 1px solid var(--border-core-default); - color: var(--input-text-placeholder); + gap: var(--str-chat__spacing-xs); + border-radius: var(--str-chat__radius-max); + border: 1px solid var(--str-chat__border-core-default); + color: var(--str-chat__input-text-placeholder); font: var(--str_chat__heading-xs-text); // FIXME: there's no proper variation so we need to adjust font-weight separately - font-weight: var(--typography-font-weight-regular); + font-weight: var(--str-chat__typography-font-weight-regular); flex-shrink: 1; flex-grow: 1; @@ -42,8 +42,8 @@ flex-shrink: 0; } - padding-block: var(--spacing-xs); - padding-inline: var(--spacing-sm); + padding-block: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-sm); } .str-chat__search-bar__exit-search-button { @@ -54,7 +54,7 @@ .str-chat__search-results { display: flex; flex-direction: column; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); .str-chat__search-results-header { overflow-x: auto; @@ -62,8 +62,8 @@ .str-chat__search-results-header__filter-source-buttons { display: flex; - gap: var(--spacing-xxs); - padding-inline: var(--spacing-md); + gap: var(--str-chat__spacing-xxs); + padding-inline: var(--str-chat__spacing-md); & > .str-chat__button { flex-shrink: 0; @@ -74,16 +74,16 @@ .str-chat__search-source-result-list { .str-chat__search-result-container { - padding: var(--spacing-xxs); - border-bottom: 1px solid var(--border-core-subtle); + padding: var(--str-chat__spacing-xxs); + border-bottom: 1px solid var(--str-chat__border-core-subtle); .str-chat__search-result { &--user { display: flex; align-items: center; - gap: var(--spacing-md); - padding: var(--spacing-sm); - border-radius: var(--radius-lg); + gap: var(--str-chat__spacing-md); + padding: var(--str-chat__spacing-sm); + border-radius: var(--str-chat__radius-lg); width: 100%; border: none; background: none; @@ -96,14 +96,14 @@ .str-chat__search-result-data { display: flex; flex-direction: column; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex: 1 0 0; min-width: 0; text-align: start; .str-chat__search-result__display-name { font: var(--str-chat__font-heading-xs); - color: var(--text-primary); + color: var(--str-chat__text-primary); flex: 1; min-width: 0; text-overflow: ellipsis; @@ -117,22 +117,22 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - font-weight: var(--typography-font-weight-regular); - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + line-height: var(--str-chat__typography-line-height-normal); } } - background: var(--background-core-elevation-1); + background: var(--str-chat__background-core-elevation-1); &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } } } @@ -142,9 +142,9 @@ .str-chat__search-source-result-list__footer, .str-chat__search-results-presearch, .str-chat__search-source-results-empty { - font-size: var(--typography-font-size-sm); - color: var(--text-tertiary); - padding-block: var(--spacing-xs); + font-size: var(--str-chat__typography-font-size-sm); + color: var(--str-chat__text-tertiary); + padding-block: var(--str-chat__spacing-xs); display: flex; justify-content: center; align-items: center; diff --git a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss index ddd644f83e..6449fb48c2 100644 --- a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss +++ b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss @@ -1,22 +1,22 @@ .str-chat__summarized-message-preview { display: flex; align-items: center; - gap: var(--spacing-xxs); + gap: var(--str-chat__spacing-xxs); flex-grow: 1; flex-shrink: 1; min-width: 0; - color: var(--text-secondary); - font-size: var(--typography-font-size-sm); + color: var(--str-chat__text-secondary); + font-size: var(--str-chat__typography-font-size-sm); font-style: normal; - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); .str-chat__icon { flex-shrink: 0; - width: var(--icon-size-sm); - height: var(--icon-size-sm); + width: var(--str-chat__icon-size-sm); + height: var(--str-chat__icon-size-sm); } &--error { @@ -24,7 +24,7 @@ } &--deleted { - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); } .str-chat__summarized-message-preview__text { @@ -39,16 +39,16 @@ .str-chat__summarized-message-preview__delivery-status { display: flex; flex-shrink: 0; - color: var(--text-tertiary); + color: var(--str-chat__text-tertiary); &--read { - color: var(--accent-primary); + color: var(--str-chat__accent-primary); } } .str-chat__summarized-message-preview__sender { - color: var(--text-tertiary); - font-weight: var(--typography-font-weight-semi-bold); + color: var(--str-chat__text-tertiary); + font-weight: var(--str-chat__typography-font-weight-semi-bold); white-space: nowrap; overflow: hidden; diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx index a3aef4765a..f61303e623 100644 --- a/src/components/Thread/ThreadHeader.tsx +++ b/src/components/Thread/ThreadHeader.tsx @@ -99,11 +99,9 @@ export const ThreadHeader = (props: ThreadHeaderProps) => { return (
- {activeChatView === 'threads' && HeaderStartContent && ( -
- -
- )} +
+ {activeChatView === 'threads' && HeaderStartContent && } +
{t('Thread')}
.str-chat__icon { - height: var(--icon-size-md); - width: var(--icon-size-md); + height: var(--str-chat__icon-size-md); + width: var(--str-chat__icon-size-md); } &:not(:disabled):hover { - @include utils.overlay-after(var(--background-utility-hover)); + @include utils.overlay-after(var(--str-chat__background-utility-hover)); } } } @@ -115,7 +105,7 @@ } .str-chat__thread-list-empty-placeholder { - --str-chat-icon-color: var(--text-secondary); + --str-chat-icon-color: var(--str-chat__text-secondary); @include utils.empty-theme('thread-list'); height: 100%; @@ -124,14 +114,14 @@ flex-direction: column; align-items: center; justify-content: center; - padding: var(--spacing-xl); - color: var(--text-secondary); + padding: var(--str-chat__spacing-xl); + color: var(--str-chat__text-secondary); p { margin: 0; - color: var(--text-secondary); - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + color: var(--str-chat__text-secondary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); } } diff --git a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss index 5d51fb4cd6..b4edd16094 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss @@ -1,13 +1,13 @@ .str-chat__thread-list__header { display: flex; align-items: center; - padding: var(--spacing-md); + padding: var(--str-chat__spacing-md); height: var(--str-chat__channel-header-height); width: 100%; .str-chat__thread-list__header__title { flex: 1; font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } } diff --git a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss index c5e1a39990..d81448042a 100644 --- a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss +++ b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss @@ -1,38 +1,38 @@ @use '../../../../styling/utils'; .str-chat__thread-list-item-container { - border-bottom: 1px solid var(--border-core-subtle); - padding: var(--spacing-xxs); + border-bottom: 1px solid var(--str-chat__border-core-subtle); + padding: var(--str-chat__spacing-xxs); max-width: 100%; &:has(.str-chat__thread-list-item--highlighted) { - background: var(--background-core-highlight); + background: var(--str-chat__background-core-highlight); } } .str-chat__thread-list-item { display: flex; - gap: var(--spacing-sm); + gap: var(--str-chat__spacing-sm); align-items: flex-start; - padding-inline: var(--spacing-sm); - padding-block: var(--spacing-sm); - padding-block-start: calc(var(--spacing-sm) - 1px); + padding-inline: var(--str-chat__spacing-sm); + padding-block: var(--str-chat__spacing-sm); + padding-block-start: calc(var(--str-chat__spacing-sm) - 1px); border: none; cursor: pointer; text-align: start; - background: var(--background-core-elevation-1); - border-radius: var(--radius-lg); + background: var(--str-chat__background-core-elevation-1); + border-radius: var(--str-chat__radius-lg); width: 100%; max-width: 100%; &:not(:disabled):hover { - background: var(--background-utility-hover); + background: var(--str-chat__background-utility-hover); } &:not(:disabled):active { - background: var(--background-utility-pressed); + background: var(--str-chat__background-utility-pressed); } &:not(:disabled)[aria-pressed='true'] { - background: var(--background-utility-selected); + background: var(--str-chat__background-utility-selected); } .str-chat__avatar { @@ -41,10 +41,10 @@ .str-chat__summarized-message-preview { .str-chat__summarized-message-preview__sender { - color: var(--text-secondary); + color: var(--str-chat__text-secondary); } .str-chat__summarized-message-preview__text { - color: var(--text-primary); + color: var(--str-chat__text-primary); } } } @@ -52,7 +52,7 @@ .str-chat__thread-list-item__content { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); flex: 1 0 0; min-width: 0; } @@ -60,15 +60,15 @@ .str-chat__thread-list-item__content-leading { display: flex; flex-direction: column; - gap: var(--spacing-xxs); - padding-block: var(--spacing-xxxs); + gap: var(--str-chat__spacing-xxs); + padding-block: var(--str-chat__spacing-xxxs); } .str-chat__thread-list-item__title { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -76,31 +76,31 @@ .str-chat__thread-list-item__content-trailing { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; } .str-chat__thread-list-item__reply-information { display: flex; - gap: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); align-items: center; } .str-chat__thread-list-item__reply-count { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-semi-bold); - line-height: var(--typography-line-height-normal); - color: var(--text-link); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-semi-bold); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .str-chat__thread-list-item__timestamp { - font-size: var(--typography-font-size-sm); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); - color: var(--text-tertiary); + font-size: var(--str-chat__typography-font-size-sm); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); + color: var(--str-chat__text-tertiary); white-space: nowrap; min-width: 0; @include utils.ellipsis-text; diff --git a/src/components/Threads/styling/UnreadCountBadge.scss b/src/components/Threads/styling/UnreadCountBadge.scss index cec7dcefdc..a6192c460e 100644 --- a/src/components/Threads/styling/UnreadCountBadge.scss +++ b/src/components/Threads/styling/UnreadCountBadge.scss @@ -1,12 +1,7 @@ /* Only available in React SDK. */ -.str-chat { - --str-chat-unread-count-badge-color: var(--badge-text-on-accent); - --str-chat-unread-count-badge-background-color: var(--accent-error); -} - .str-chat__unread-count-badge { - background-color: var(--str-chat-unread-count-badge-background-color); - color: var(--str-chat-unread-count-badge-color); + background-color: var(--str-chat__accent-error); + color: var(--str-chat__badge-text-on-accent); border-radius: 9999px; } diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss index 9bc59d3028..28d3ebeeae 100644 --- a/src/components/Tooltip/styling/Tooltip.scss +++ b/src/components/Tooltip/styling/Tooltip.scss @@ -1,42 +1,23 @@ @use '../../../styling/utils'; .str-chat { - /* The border radius used for the borders of the component */ - --str-chat__tooltip-border-radius: var(--radius-md); - - /* The text/icon color of the component */ - --str-chat__tooltip-color: var(--text-on-accent); - - /* The background color of the component */ - --str-chat__tooltip-background-color: var(--background-core-inverse); - - /* Top border of the component */ - --str-chat__tooltip-border-block-start: none; - - /* Bottom border of the component */ - --str-chat__tooltip-border-block-end: none; - - /* Left (right in RTL layout) border of the component */ - --str-chat__tooltip-border-inline-start: none; - - /* Right (left in RTL layout) border of the component */ - --str-chat__tooltip-border-inline-end: none; - - /* Box shadow applied to the component */ - --str-chat__tooltip-box-shadow: var(--str-chat__box-shadow-3); + --str-chat__tooltip-background-color: var(--str-chat__background-core-inverse); // FIXME: this should not be the case &.str-chat__theme-dark { - --str-chat__tooltip-background-color: var(--background-core-elevation-2); + --str-chat__tooltip-background-color: var(--str-chat__background-core-elevation-2); } } .str-chat__tooltip { - @include utils.component-layer-overrides('tooltip'); + background: var(--str-chat__tooltip-background-color); + color: var(--str-chat__text-on-accent); + box-shadow: var(--str-chat__box-shadow-3); + border-radius: var(--str-chat__radius-md); @include utils.prevent-glitch-text-overflow; display: flex; - gap: var(--spacing-xs); - padding: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding: var(--str-chat__spacing-xs); z-index: 1; max-width: 150px; width: max-content; diff --git a/src/components/TypingIndicator/styling/TypingIndicator.scss b/src/components/TypingIndicator/styling/TypingIndicator.scss index 4e2493d7a5..69e9a6b8b8 100644 --- a/src/components/TypingIndicator/styling/TypingIndicator.scss +++ b/src/components/TypingIndicator/styling/TypingIndicator.scss @@ -23,8 +23,8 @@ var(--str-chat__message-composer-padding) ); margin: auto; - gap: var(--spacing-xs); - padding-block: var(--spacing-xs); + gap: var(--str-chat__spacing-xs); + padding-block: var(--str-chat__spacing-xs); padding-inline: var(--str-chat__message-composer-padding); &.str-chat__typing-indicator--with-transition { @@ -37,11 +37,12 @@ align-items: center; min-height: 36px; max-height: 36px; - padding-block: var(--spacing-xs); - padding-inline: var(--spacing-sm); - border-radius: var(--message-bubble-radius-group-bottom) - var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-group-bottom) - var(--message-bubble-radius-tail); + padding-block: var(--str-chat__spacing-xs); + padding-inline: var(--str-chat__spacing-sm); + border-radius: var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-group-bottom) + var(--str-chat__message-bubble-radius-tail); // variable --chat-bg-typing-indicator has incorrect color value? //background: var(--chat-bg-typing-indicator); border: 1px solid var(--chat-bg); @@ -51,7 +52,7 @@ .str-chat__typing-indicator__dots { display: flex; align-items: center; - column-gap: var(--spacing-xxs); + column-gap: var(--str-chat__spacing-xxs); } /* SVG dots (TypingIndicatorDots component) */ @@ -59,19 +60,19 @@ display: block; circle:nth-child(1) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0s; } circle:nth-child(2) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0.15s; } circle:nth-child(3) { - fill: var(--chat-text-typing-indicator); + fill: var(--str-chat__chat-text-typing-indicator); animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both; animation-delay: 0.3s; } @@ -96,9 +97,9 @@ .str-chat__typing-indicator-header { display: inline-flex; align-items: baseline; - gap: var(--spacing-xs, 4px); + gap: var(--str-chat__spacing-xs); white-space: nowrap; - color: var(--text-secondary); + color: var(--str-chat__text-secondary); font: var(--str-chat__font-caption-default); } diff --git a/src/components/VideoPlayer/styling/VideoThumbnail.scss b/src/components/VideoPlayer/styling/VideoThumbnail.scss index c3594ab1f5..594b0ee92c 100644 --- a/src/components/VideoPlayer/styling/VideoThumbnail.scss +++ b/src/components/VideoPlayer/styling/VideoThumbnail.scss @@ -19,8 +19,8 @@ position: absolute; height: $size; width: $size; - border-radius: var(--radius-max); - background-color: var(--control-play-button-bg); + border-radius: var(--str-chat__radius-max); + background-color: var(--str-chat__control-play-button-bg); left: calc(50% - calc($size / 2)); top: calc(50% - calc($size / 2)); @@ -29,7 +29,7 @@ width: calc($size / 2); path { - fill: var(--control-play-button-icon); + fill: var(--str-chat__control-play-button-icon); } } } diff --git a/src/plugins/Emojis/styling/EmojiPicker.scss b/src/plugins/Emojis/styling/EmojiPicker.scss index 5cf3cba2ef..2bd0aadea9 100644 --- a/src/plugins/Emojis/styling/EmojiPicker.scss +++ b/src/plugins/Emojis/styling/EmojiPicker.scss @@ -1,11 +1,11 @@ -.str-chat__message-textarea-emoji-picker-container { - --str-chat__emoji-picker-border-radius: 10px; +$emoji-picker-border-radius: 10px; - border-radius: var(--str-chat__emoji-picker-border-radius); +.str-chat__message-textarea-emoji-picker-container { + border-radius: $emoji-picker-border-radius; box-shadow: var(--str-chat__box-shadow-3); overflow: hidden; em-emoji-picker { - --border-radius: var(--str-chat__emoji-picker-border-radius); + --border-radius: #{$emoji-picker-border-radius}; } } diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss index 0a12e2e1ff..8ad59b58c1 100644 --- a/src/styling/_utils.scss +++ b/src/styling/_utils.scss @@ -52,7 +52,7 @@ text-overflow: ellipsis; } -@mixin unset-button($outline-radius: var(--radius-max)) { +@mixin unset-button($outline-radius: var(--str-chat__radius-max)) { padding: unset; background: unset; border: unset; @@ -60,7 +60,7 @@ } @mixin focusable { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: 2px; } @@ -77,8 +77,8 @@ } @mixin modal { - border-radius: var(--radius-xl); - background: var(--background-core-elevation-1); + border-radius: var(--str-chat__radius-xl); + background: var(--str-chat__background-core-elevation-1); /* shadow/web/light/elevation-4 */ box-shadow: @@ -99,24 +99,19 @@ } @mixin header-layout { - display: flex; - align-items: center; width: 100%; - padding: var(--spacing-md); - gap: var(--spacing-sm); + padding: var(--str-chat__spacing-md); height: var(--str-chat__channel-header-height); - min-width: 0; + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; } - @mixin header-text-layout { display: flex; flex-direction: column; align-items: center; overflow-y: hidden; // for Edge overflow-x: hidden; // for ellipsis text - max-width: 100%; - row-gap: var(--spacing-xxs); - width: 100%; } @mixin empty-theme($component-name) { @@ -136,15 +131,3 @@ max-width: 100%; } } - -@mixin component-layer-overrides($component-name, $important: '') { - background: var(--str-chat__#{$component-name}-background-color) #{$important}; - color: var(--str-chat__#{$component-name}-color) #{$important}; - box-shadow: var(--str-chat__#{$component-name}-box-shadow) #{$important}; - border-radius: var(--str-chat__#{$component-name}-border-radius) #{$important}; - border-block-start: var(--str-chat__#{$component-name}-border-block-start) #{$important}; - border-block-end: var(--str-chat__#{$component-name}-border-block-end) #{$important}; - border-inline-start: var(--str-chat__#{$component-name}-border-inline-start) - #{$important}; - border-inline-end: var(--str-chat__#{$component-name}-border-inline-end) #{$important}; -} diff --git a/src/styling/base.scss b/src/styling/base.scss index 9b7bf5666d..1fc01b23d7 100644 --- a/src/styling/base.scss +++ b/src/styling/base.scss @@ -1,13 +1,13 @@ .str-chat { font-family: var(--str-chat__font-family); - font-size: var(--typography-font-size-md); - font-weight: var(--typography-font-weight-regular); - line-height: var(--typography-line-height-normal); + font-size: var(--str-chat__typography-font-size-md); + font-weight: var(--str-chat__typography-font-weight-regular); + line-height: var(--str-chat__typography-line-height-normal); letter-spacing: var(--typography-letter-spacing-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); *:not(:disabled):focus-visible { - outline: 2px solid var(--border-utility-focused); + outline: 2px solid var(--str-chat__border-utility-focused); outline-offset: 2px; } diff --git a/src/styling/dark.scss b/src/styling/dark.scss index 0e6401ba8b..56fcb9a3ff 100644 --- a/src/styling/dark.scss +++ b/src/styling/dark.scss @@ -1,610 +1,165 @@ -@mixin variables { - /** +/** * Do not edit directly, this file was auto-generated. */ - --base-transparent-0: rgba(255, 255, 255, 0); - --base-transparent-white-10: rgba(255, 255, 255, 0.1); - --base-transparent-white-20: rgba(255, 255, 255, 0.2); - --base-transparent-white-30: rgba(255, 255, 255, 0.3); - --base-transparent-white-70: rgba(255, 255, 255, 0.7); - --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */ - --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */ - --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */ - --base-black: #000000; - --base-white: #ffffff; - --slate-50: #f6f8fa; - --slate-100: #ebeef1; - --slate-150: #d5dbe1; - --slate-200: #c0c8d2; - --slate-300: #a3acba; - --slate-400: #87909f; - --slate-500: #687385; - --slate-600: #545969; - --slate-700: #414552; - --slate-800: #30313d; - --slate-900: #1a1b25; - --neutral-50: #f8f8f8; - --neutral-100: #efefef; - --neutral-150: #d8d8d8; - --neutral-200: #c4c4c4; - --neutral-300: #ababab; - --neutral-400: #8f8f8f; - --neutral-500: #6a6a6a; - --neutral-600: #565656; - --neutral-700: #464646; - --neutral-800: #323232; - --neutral-900: #1c1c1c; - --blue-50: #f3f7ff; - --blue-100: #e3edff; - --blue-150: #c3d9ff; - --blue-200: #a5c5ff; - --blue-300: #78a8ff; - --blue-400: #4586ff; - --blue-500: #005fff; - --blue-600: #1b53bd; - --blue-700: #19418d; - --blue-800: #142f63; - --blue-900: #091a3b; - --cyan-50: #f1fbfc; - --cyan-100: #d1f3f6; - --cyan-150: #a9e4ea; - --cyan-200: #72d7e0; - --cyan-300: #45bcc7; - --cyan-400: #1e9ea9; - --cyan-500: #248088; - --cyan-600: #006970; - --cyan-700: #065056; - --cyan-800: #003a3f; - --cyan-900: #002124; - --green-50: #e1ffee; - --green-100: #bdfcdb; - --green-150: #8febbd; - --green-200: #59dea3; - --green-300: #00c384; - --green-400: #00a46e; - --green-500: #277e59; - --green-600: #006643; - --green-700: #004f33; - --green-800: #003a25; - --green-900: #002213; - --purple-50: #f7f8ff; - --purple-100: #ecedff; - --purple-150: #d4d7ff; - --purple-200: #c1c5ff; - --purple-300: #a1a3ff; - --purple-400: #8482fc; - --purple-500: #644af9; - --purple-600: #553bd8; - --purple-700: #4032a1; - --purple-800: #2e2576; - --purple-900: #1a114d; - --yellow-50: #fef9da; - --yellow-100: #fcedb9; - --yellow-150: #fcd579; - --yellow-200: #f6bf57; - --yellow-300: #fa922b; - --yellow-400: #f26d10; - --yellow-500: #c84801; - --yellow-600: #a82c00; - --yellow-700: #842106; - --yellow-800: #5f1a05; - --yellow-900: #331302; - --red-50: #fff5fa; - --red-100: #ffe7f2; - --red-150: #ffccdf; - --red-200: #ffb1cd; - --red-300: #fe87a1; - --red-400: #fc526a; - --red-500: #d90d10; - --red-600: #b3093c; - --red-700: #890d37; - --red-800: #68052b; - --red-900: #3e021a; - --violet-50: #fef4ff; - --violet-100: #fbe8fe; - --violet-150: #f7cffc; - --violet-200: #eeb5f4; - --violet-300: #e68bec; - --violet-400: #d75fe7; - --violet-500: #b716ca; - --violet-600: #9d00ae; - --violet-700: #7c0089; - --violet-800: #5c0066; - --violet-900: #36003d; - --lime-50: #f1fde8; - --lime-100: #d4ffb0; - --lime-150: #b1ee79; - --lime-200: #9cda5d; - --lime-300: #78c100; - --lime-400: #639e11; - --lime-500: #4b7a0a; - --lime-600: #3e6213; - --lime-700: #355315; - --lime-800: #203a00; - --lime-900: #112100; - --size-2: 2px; - --size-4: 4px; - --size-6: 6px; - --size-8: 8px; - --size-12: 12px; - --size-16: 16px; - --size-20: 20px; - --size-24: 24px; - --size-32: 32px; - --size-40: 40px; - --size-48: 48px; - --size-64: 64px; - --size-28: 28px; - --size-80: 80px; - --size-128: 128px; - --size-240: 240px; - --size-320: 320px; - --size-480: 480px; - --size-560: 560px; - --size-640: 640px; - --size-760: 760px; - --size-144: 144px; - --size-208: 208px; - --size-56: 56px; - --radius-0: 0px; - --radius-2: 2px; - --radius-4: 4px; - --radius-6: 6px; - --radius-8: 8px; - --radius-12: 12px; - --radius-16: 16px; - --radius-20: 20px; - --radius-24: 24px; - --radius-32: 32px; - --radius-full: 9999px; - --space-0: 0px; - --space-2: 2px; - --space-4: 4px; - --space-8: 8px; - --space-12: 12px; - --space-16: 16px; - --space-20: 20px; - --space-24: 24px; - --space-32: 32px; - --space-40: 40px; - --space-48: 48px; - --space-64: 64px; - --space-80: 80px; - --w100: 1px; - --w150: 1.5px; - --w200: 2px; - --w300: 3px; - --w400: 4px; - --w120: 1.2px; - --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ - --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ - --font-weight-w400: 400; - --font-weight-w500: 500; - --font-weight-w600: 600; - --font-weight-w700: 700; - --font-size-size-8: 8px; - --font-size-size-10: 10px; - --font-size-size-11: 11px; - --font-size-size-12: 12px; - --font-size-size-13: 13px; - --font-size-size-14: 14px; - --font-size-size-16: 16px; - --font-size-size-15: 15px; - --font-size-size-17: 17px; - --font-size-size-18: 18px; - --font-size-size-20: 20px; - --font-size-size-22: 22px; - --font-size-size-24: 24px; - --font-size-size-28: 28px; - --font-size-size-32: 32px; - --font-size-size-40: 40px; - --font-size-size-48: 48px; - --font-size-size-64: 64px; - --line-height-line-height-8: 8px; - --line-height-line-height-10: 10px; - --line-height-line-height-12: 12px; - --line-height-line-height-13: 13px; - --line-height-line-height-14: 14px; - --line-height-line-height-15: 15px; - --line-height-line-height-16: 16px; - --line-height-line-height-17: 17px; - --line-height-line-height-18: 18px; - --line-height-line-height-20: 20px; - --line-height-line-height-24: 24px; - --line-height-line-height-28: 28px; - --line-height-line-height-32: 32px; - --line-height-line-height-40: 40px; - --line-height-line-height-48: 48px; - --typography-font-family-sans: 'Geist'; - --typography-font-family-mono: 'Geist Mono'; - --typography-font-weight-regular: 400; - --typography-font-weight-medium: 500; - --typography-font-weight-semi-bold: 600; - --typography-font-weight-bold: 700; - --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */ - --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */ - --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */ - --typography-font-size-md: 16px; /** Default desktop body size, main text. */ - --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */ - --typography-font-size-xl: 20px; /** Small headings. */ - --typography-font-size-2xl: 24px; /** Section titles, important headings. */ - --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */ - --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */ - --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */ - --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */ - --light-elevation-1: - 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), - 0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */ - --light-elevation-2: - 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12), - 0px 6px 16px 0px rgba(0, 0, 0, 0.06); - --light-elevation-3: - 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14), - 0px 12px 24px 0px rgba(0, 0, 0, 0.1); - --light-elevation-4: - 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16), - 0px 20px 32px 0px rgba(0, 0, 0, 0.12); - --dark-elevation-1: - 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2), - 0px 4px 8px 0px rgba(0, 0, 0, 0.1); - --dark-elevation-2: - 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22), - 0px 6px 16px 0px rgba(0, 0, 0, 0.12); - --dark-elevation-3: - 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24), - 0px 12px 24px 0px rgba(0, 0, 0, 0.14); - --dark-elevation-4: - 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28), - 0px 20px 32px 0px rgba(0, 0, 0, 0.16); - --radius-none: 0px; - --radius-xxs: 2px; - --radius-xs: 4px; - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 20px; - --radius-max: 9999px; - --radius-3xl: 24px; - --radius-4xl: 32px; - --spacing-none: 0px; /** No spacing. Used for tight component joins. */ - --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */ - --spacing-xs: 8px; /** Small padding and default vertical gaps. */ - --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */ - --spacing-md: 16px; /** Default large padding for sections and cards. */ - --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */ - --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */ - --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */ - --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */ - --spacing-xxxs: 2px; - --device-radius: 8px; - --device-safe-area-bottom: 0px; - --device-safe-area-top: 0px; - --message-bubble-radius-group-top: 20px; - --message-bubble-radius-group-middle: 20px; - --message-bubble-radius-group-bottom: 20px; - --message-bubble-radius-tail: 0px; - --message-bubble-radius-attachment: 12px; - --message-bubble-radius-attachment-inline: 8px; - --composer-radius-fixed: 24px; - --composer-radius-floating: 24px; - --button-radius-lg: 9999px; - --button-radius-md: 9999px; - --button-radius-sm: 9999px; - --button-radius-full: 9999px; - --button-visual-height-sm: 32px; - --button-visual-height-md: 40px; - --button-visual-height-lg: 48px; - --button-visual-height-xs: 24px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-height: 48px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-width: 48px; - --button-padding-y-lg: 14px; - --button-padding-y-md: 10px; - --button-padding-y-sm: 6px; - --button-padding-y-xs: 4px; - --button-padding-x-icon-only-lg: 14px; - --button-padding-x-icon-only-md: 10px; - --button-padding-x-icon-only-sm: 6px; - --button-padding-x-icon-only-xs: 4px; - --button-padding-x-with-label-lg: 16px; - --button-padding-x-with-label-md: 16px; - --button-padding-x-with-label-sm: 16px; - --button-padding-x-with-label-xs: 12px; - --button-primary-bg: #4586ff; - --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0); - --button-primary-text: #4586ff; - --button-primary-text-on-accent: #ffffff; - --button-primary-text-on-dark: #000000; - --button-primary-border: #1b53bd; - --button-primary-border-on-dark: #000000; - --button-secondary-bg: #323232; - --button-secondary-bg-liquid-glass: #000000; - --button-secondary-text: #f8f8f8; - --button-secondary-text-on-accent: #f8f8f8; - --button-secondary-text-on-dark: #000000; - --button-secondary-border: #565656; - --button-secondary-border-on-dark: #000000; - --button-destructive-bg: #fc526a; - --button-destructive-bg-liquid-glass: #000000; - --button-destructive-text: #fc526a; - --button-destructive-text-on-accent: #ffffff; - --button-destructive-text-on-dark: #000000; - --button-destructive-border: #fc526a; - --button-destructive-border-on-dark: #000000; - --icon-size-xs: 12px; - --icon-size-sm: 16px; - --icon-size-md: 20px; - --icon-size-lg: 32px; - --icon-stroke-subtle: 1.2px; - --icon-stroke-default: 1.5px; - --icon-stroke-emphasis: 2px; - --emoji-sm: 16px; - --emoji-md: 24px; - --emoji-lg: 32px; - --emoji-xl: 48px; - --emoji-2xl: 64px; - --background-core-app: #000000; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ - --background-core-elevation-0: #000000; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */ - --background-core-elevation-1: #1c1c1c; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ - --background-core-elevation-2: #323232; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ - --background-core-elevation-3: #565656; /** Used for badge counts that float above other UI elements. */ - --background-core-surface-default: #323232; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ - --background-core-surface-subtle: #1c1c1c; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ - --background-core-surface-card: #323232; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ - --background-core-surface-strong: #464646; /** A more prominent background. Used for elements that need to stand out from the main surface. */ - --background-core-inverse: #ffffff; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ - --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ - --background-core-highlight: #5f1a05; /** A tint for drawing attention to content. Used for highlights and pinned messages. */ - --background-core-overlay-light: rgba( + +@mixin variables { + --str-chat__background-core-overlay-light: rgba( 0, 0, 0, 0.75 ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */ - --background-core-overlay-dark: rgba( + --str-chat__background-core-overlay-dark: rgba( 0, 0, 0, 0.5 ); /** A dark semi-transparent layer. Used for image overlays. */ - --background-core-scrim: rgba( + --str-chat__background-core-scrim: rgba( 0, 0, 0, 0.75 ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */ - --background-utility-hover: rgba( + --str-chat__background-utility-hover: rgba( 255, 255, 255, 0.15 ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */ - --background-utility-pressed: rgba( + --str-chat__background-utility-pressed: rgba( 255, 255, 255, 0.2 ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */ - --background-utility-selected: rgba( + --str-chat__background-utility-selected: rgba( 255, 255, 255, 0.25 ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */ - --background-utility-disabled: #323232; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ - --border-utility-error: #fc526a; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ - --border-utility-warning: #fa922b; /** Border for cautionary states. Used on inputs or elements requiring attention. */ - --border-utility-success: #00c384; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ - --border-utility-selected: rgba( + --str-chat__border-utility-selected: rgba( 255, 255, 255, 0.15 ); /** Border for selected or active items. Used for highlighted list items and active controls. */ - --border-utility-disabled: #323232; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ - --border-utility-focused: #19418d; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ - --border-utility-active: #4586ff; /** Active input border. Used for focused text fields and selected form elements. */ - --border-utility-hover: rgba( + --str-chat__border-utility-hover: rgba( 255, 255, 255, 0.1 ); /** Applied on pointer hover over bordered interactive elements. */ - --border-utility-pressed: rgba( + --str-chat__border-utility-pressed: rgba( 255, 255, 255, 0.2 ); /** Applied during an active press on bordered interactive elements. */ - --border-utility-disabled-on-surface: #464646; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ - --border-core-default: #565656; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ - --border-core-subtle: #323232; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ - --border-core-strong: #6a6a6a; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ - --border-core-inverse: #000000; /** Used on dark backgrounds. */ - --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ - --border-core-opacity-subtle: rgba( + --str-chat__border-core-opacity-subtle: rgba( 255, 255, 255, 0.2 ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */ - --border-core-opacity-strong: rgba( + --str-chat__border-core-opacity-strong: rgba( 255, 255, 255, 0.25 ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */ - --border-core-on-inverse: #000000; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ - --border-core-on-surface: #6a6a6a; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ - --chat-bg-incoming: #323232; /** Incoming bubble background. */ - --chat-bg-outgoing: #142f63; /** Outgoing bubble background. */ - --chat-bg-attachment-incoming: #464646; /** Attachment card in incoming bubble. */ - --chat-bg-attachment-outgoing: #19418d; /** Attachment card in outgoing bubble. */ - --chat-text-incoming: #f8f8f8; /** Message body text. */ - --chat-text-outgoing: #f3f7ff; /** Message body text. */ - --chat-text-username: #d8d8d8; /** Username label. */ - --chat-text-timestamp: #ababab; /** Time labels. */ - --chat-text-typing-indicator: #f8f8f8; /** Typing indicator chip. */ - --chat-text-read: #4586ff; - --chat-text-mention: #a5c5ff; /** Mention styling. */ - --chat-text-link: #a5c5ff; /** Links inside message bubbles. */ - --chat-text-reaction: #d8d8d8; /** Reaction count text. */ - --chat-text-system: #d8d8d8; /** System messages like date separators. */ - --chat-border-incoming: #323232; - --chat-border-outgoing: #142f63; - --chat-border-on-chat-incoming: #6a6a6a; - --chat-border-on-chat-outgoing: #005fff; - --chat-reply-indicator-incoming: #8f8f8f; /** Reply indicator shading for incoming. */ - --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */ - --chat-waveform-bar: rgba(255, 255, 255, 0.25); - --chat-waveform-bar-playing: #4586ff; - --chat-poll-progress-track-incoming: #464646; - --chat-poll-progress-track-outgoing: #1b53bd; - --chat-poll-progress-fill-incoming: #ababab; - --chat-poll-progress-fill-outgoing: #4586ff; - --chat-thread-connector-incoming: #565656; - --chat-thread-connector-outgoing: #19418d; - --input-text-default: #f8f8f8; /** Main text inside the chat input. */ - --input-text-placeholder: #ababab; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-text-disabled: #6a6a6a; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-text-icon: #ababab; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ - --input-send-icon: #4586ff; /** Default send icon color in the input. Uses the brand accent. */ - --input-send-icon-disabled: #6a6a6a; /** Send icon when disabled (e.g. empty input). */ - --reaction-bg: #565656; - --reaction-border: #565656; - --reaction-text: #f8f8f8; - --reaction-emoji: #f8f8f8; - --presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ - --presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --system-text: #ffffff; - --system-bg-blur: rgba(0, 0, 0, 0.01); - --system-scrollbar: rgba(255, 255, 255, 0.5); - --system-caret: #4586ff; - --badge-bg-default: #565656; - --badge-bg-primary: #4586ff; - --badge-bg-neutral: #ababab; - --badge-bg-error: #fc526a; - --badge-bg-inverse: #ffffff; - --badge-bg-overlay: rgba(0, 0, 0, 0.75); - --badge-text: #f8f8f8; - --badge-text-on-inverse: #000000; - --badge-text-on-accent: #ffffff; - --badge-border: #000000; - --control-remove-control-bg: #ffffff; - --control-remove-control-icon: #000000; - --control-remove-control-border: #000000; - --control-progress-bar-fill: #ababab; - --control-progress-bar-track: #464646; - --control-toggle-switch-bg: #ababab; - --control-toggle-switch-bg-selected: #4586ff; - --control-toggle-switch-bg-disabled: #323232; - --control-toggle-switch-knob: #ffffff; - --control-playback-toggle-text: #f8f8f8; - --control-playback-toggle-border: #565656; - --control-checkbox-bg: rgba(255, 255, 255, 0); - --control-checkbox-border: #565656; - --control-checkbox-bg-selected: #4586ff; - --control-checkbox-icon: #ffffff; - --control-play-button-bg: rgba(0, 0, 0, 0.75); - --control-play-button-icon: #ffffff; - --control-playback-thumb-bg-default: #ffffff; - --control-playback-thumb-border-active: #ffffff; - --control-playback-thumb-bg-active: #4586ff; - --control-playback-thumb-border-default: rgba(255, 255, 255, 0.25); - --control-radio-button-bg: rgba(255, 255, 255, 0); - --control-radio-button-border: #565656; - --control-radio-button-bg-selected: #4586ff; - --control-radio-button-indicator: #ffffff; - --control-radio-check-bg: rgba(255, 255, 255, 0); - --control-radio-check-border: #565656; - --control-radio-check-bg-selected: #4586ff; - --control-radio-check-icon: #ffffff; - --control-chip-border: #565656; - --control-chip-text: #f8f8f8; - --text-primary: #f8f8f8; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ - --text-secondary: #d8d8d8; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ - --text-tertiary: #ababab; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ - --text-on-inverse: #000000; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ - --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ - --text-disabled: #6a6a6a; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ - --text-link: #a5c5ff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ - --avatar-palette-bg-1: #1b53bd; - --avatar-palette-bg-2: #006970; - --avatar-palette-bg-3: #006643; - --avatar-palette-bg-4: #553bd8; - --avatar-palette-bg-5: #a82c00; - --avatar-palette-text-1: #e3edff; - --avatar-palette-text-2: #d1f3f6; - --avatar-palette-text-3: #bdfcdb; - --avatar-palette-text-4: #ecedff; - --avatar-palette-text-5: #fcedb9; - --avatar-bg-default: #1b53bd; - --avatar-bg-placeholder: #464646; - --avatar-text-default: #e3edff; - --avatar-text-placeholder: #ababab; - --avatar-presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ - --accent-primary: #4586ff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ - --accent-success: #00c384; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ - --accent-warning: #fa922b; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ - --accent-error: #fc526a; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ - --accent-neutral: #ababab; /** A mid-tone gray for de-emphasized UI elements. */ - --brand-50: #091a3b; - --brand-100: #142f63; - --brand-150: #19418d; - --brand-200: #1b53bd; - --brand-300: #005fff; - --brand-400: #4586ff; - --brand-500: #78a8ff; - --brand-600: #a5c5ff; - --brand-700: #c3d9ff; - --brand-800: #e3edff; - --brand-900: #f3f7ff; - --skeleton-loading-base: rgba( - 255, - 255, - 255, - 0 - ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */ - --skeleton-loading-highlight: rgba( - 0, - 0, - 0, - 0.75 - ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */ - --chrome-0: #000000; - --chrome-50: #1c1c1c; - --chrome-100: #323232; - --chrome-150: #464646; - --chrome-200: #565656; - --chrome-300: #6a6a6a; - --chrome-400: #8f8f8f; - --chrome-500: #ababab; - --chrome-600: #c4c4c4; - --chrome-700: #d8d8d8; - --chrome-800: #efefef; - --chrome-900: #f8f8f8; - --chrome-1000: #ffffff; + --str-chat__system-bg-blur: rgba(0, 0, 0, 0.01); + --str-chat__system-scrollbar: rgba(255, 255, 255, 0.5); + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --str-chat__background-core-highlight: var( + --str-chat__yellow-800 + ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --str-chat__avatar-palette-bg-1: var(--str-chat__blue-600); + --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-600); + --str-chat__avatar-palette-bg-3: var(--str-chat__green-600); + --str-chat__avatar-palette-bg-4: var(--str-chat__purple-600); + --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-600); + --str-chat__avatar-palette-text-1: var(--str-chat__blue-100); + --str-chat__avatar-palette-text-2: var(--str-chat__cyan-100); + --str-chat__avatar-palette-text-3: var(--str-chat__green-100); + --str-chat__avatar-palette-text-4: var(--str-chat__purple-100); + --str-chat__avatar-palette-text-5: var(--str-chat__yellow-100); + --str-chat__accent-success: var( + --str-chat__green-300 + ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --str-chat__accent-warning: var( + --str-chat__yellow-300 + ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --str-chat__accent-error: var( + --str-chat__red-400 + ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --str-chat__brand-50: var(--str-chat__blue-900); + --str-chat__brand-100: var(--str-chat__blue-800); + --str-chat__brand-150: var(--str-chat__blue-700); + --str-chat__brand-200: var(--str-chat__blue-600); + --str-chat__brand-300: var(--str-chat__blue-500); + --str-chat__brand-500: var(--str-chat__blue-300); + --str-chat__brand-600: var(--str-chat__blue-200); + --str-chat__brand-700: var(--str-chat__blue-150); + --str-chat__brand-800: var(--str-chat__blue-100); + --str-chat__brand-900: var(--str-chat__blue-50); + --str-chat__chrome-0: var(--str-chat__base-black); + --str-chat__chrome-50: var(--str-chat__neutral-900); + --str-chat__chrome-100: var(--str-chat__neutral-800); + --str-chat__chrome-150: var(--str-chat__neutral-700); + --str-chat__chrome-200: var(--str-chat__neutral-600); + --str-chat__chrome-300: var(--str-chat__neutral-500); + --str-chat__chrome-400: var(--str-chat__neutral-400); + --str-chat__chrome-500: var(--str-chat__neutral-300); + --str-chat__chrome-600: var(--str-chat__neutral-200); + --str-chat__chrome-700: var(--str-chat__neutral-150); + --str-chat__chrome-800: var(--str-chat__neutral-100); + --str-chat__chrome-900: var(--str-chat__neutral-50); + --str-chat__chrome-1000: var(--str-chat__base-white); + --str-chat__background-core-elevation-1: var( + --str-chat__chrome-50 + ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --str-chat__background-core-elevation-2: var( + --str-chat__chrome-100 + ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --str-chat__background-core-elevation-3: var( + --str-chat__chrome-200 + ); /** Used for badge counts that float above other UI elements. */ + --str-chat__background-core-surface-card: var( + --str-chat__chrome-100 + ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --str-chat__background-core-on-accent: var( + --str-chat__chrome-1000 + ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --str-chat__border-core-default: var( + --str-chat__chrome-200 + ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --str-chat__border-core-on-accent: var( + --str-chat__chrome-1000 + ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --str-chat__text-on-accent: var( + --str-chat__chrome-1000 + ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --str-chat__text-link: var( + --str-chat__brand-600 + ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --str-chat__accent-primary: var( + --str-chat__brand-400 + ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ } diff --git a/src/styling/light.scss b/src/styling/light.scss index 5b93f6d4d5..1175475f1f 100644 --- a/src/styling/light.scss +++ b/src/styling/light.scss @@ -1,610 +1,798 @@ -@mixin variables { - /** +/** * Do not edit directly, this file was auto-generated. */ - --base-transparent-0: rgba(255, 255, 255, 0); - --base-transparent-white-10: rgba(255, 255, 255, 0.1); - --base-transparent-white-20: rgba(255, 255, 255, 0.2); - --base-transparent-white-30: rgba(255, 255, 255, 0.3); - --base-transparent-white-70: rgba(255, 255, 255, 0.7); - --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */ - --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */ - --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */ - --base-black: #000000; - --base-white: #ffffff; - --slate-50: #f6f8fa; - --slate-100: #ebeef1; - --slate-150: #d5dbe1; - --slate-200: #c0c8d2; - --slate-300: #a3acba; - --slate-400: #87909f; - --slate-500: #687385; - --slate-600: #545969; - --slate-700: #414552; - --slate-800: #30313d; - --slate-900: #1a1b25; - --neutral-50: #f8f8f8; - --neutral-100: #efefef; - --neutral-150: #d8d8d8; - --neutral-200: #c4c4c4; - --neutral-300: #ababab; - --neutral-400: #8f8f8f; - --neutral-500: #6a6a6a; - --neutral-600: #565656; - --neutral-700: #464646; - --neutral-800: #323232; - --neutral-900: #1c1c1c; - --blue-50: #f3f7ff; - --blue-100: #e3edff; - --blue-150: #c3d9ff; - --blue-200: #a5c5ff; - --blue-300: #78a8ff; - --blue-400: #4586ff; - --blue-500: #005fff; - --blue-600: #1b53bd; - --blue-700: #19418d; - --blue-800: #142f63; - --blue-900: #091a3b; - --cyan-50: #f1fbfc; - --cyan-100: #d1f3f6; - --cyan-150: #a9e4ea; - --cyan-200: #72d7e0; - --cyan-300: #45bcc7; - --cyan-400: #1e9ea9; - --cyan-500: #248088; - --cyan-600: #006970; - --cyan-700: #065056; - --cyan-800: #003a3f; - --cyan-900: #002124; - --green-50: #e1ffee; - --green-100: #bdfcdb; - --green-150: #8febbd; - --green-200: #59dea3; - --green-300: #00c384; - --green-400: #00a46e; - --green-500: #277e59; - --green-600: #006643; - --green-700: #004f33; - --green-800: #003a25; - --green-900: #002213; - --purple-50: #f7f8ff; - --purple-100: #ecedff; - --purple-150: #d4d7ff; - --purple-200: #c1c5ff; - --purple-300: #a1a3ff; - --purple-400: #8482fc; - --purple-500: #644af9; - --purple-600: #553bd8; - --purple-700: #4032a1; - --purple-800: #2e2576; - --purple-900: #1a114d; - --yellow-50: #fef9da; - --yellow-100: #fcedb9; - --yellow-150: #fcd579; - --yellow-200: #f6bf57; - --yellow-300: #fa922b; - --yellow-400: #f26d10; - --yellow-500: #c84801; - --yellow-600: #a82c00; - --yellow-700: #842106; - --yellow-800: #5f1a05; - --yellow-900: #331302; - --red-50: #fff5fa; - --red-100: #ffe7f2; - --red-150: #ffccdf; - --red-200: #ffb1cd; - --red-300: #fe87a1; - --red-400: #fc526a; - --red-500: #d90d10; - --red-600: #b3093c; - --red-700: #890d37; - --red-800: #68052b; - --red-900: #3e021a; - --violet-50: #fef4ff; - --violet-100: #fbe8fe; - --violet-150: #f7cffc; - --violet-200: #eeb5f4; - --violet-300: #e68bec; - --violet-400: #d75fe7; - --violet-500: #b716ca; - --violet-600: #9d00ae; - --violet-700: #7c0089; - --violet-800: #5c0066; - --violet-900: #36003d; - --lime-50: #f1fde8; - --lime-100: #d4ffb0; - --lime-150: #b1ee79; - --lime-200: #9cda5d; - --lime-300: #78c100; - --lime-400: #639e11; - --lime-500: #4b7a0a; - --lime-600: #3e6213; - --lime-700: #355315; - --lime-800: #203a00; - --lime-900: #112100; - --size-2: 2px; - --size-4: 4px; - --size-6: 6px; - --size-8: 8px; - --size-12: 12px; - --size-16: 16px; - --size-20: 20px; - --size-24: 24px; - --size-32: 32px; - --size-40: 40px; - --size-48: 48px; - --size-64: 64px; - --size-28: 28px; - --size-80: 80px; - --size-128: 128px; - --size-240: 240px; - --size-320: 320px; - --size-480: 480px; - --size-560: 560px; - --size-640: 640px; - --size-760: 760px; - --size-144: 144px; - --size-208: 208px; - --size-56: 56px; - --radius-0: 0px; - --radius-2: 2px; - --radius-4: 4px; - --radius-6: 6px; - --radius-8: 8px; - --radius-12: 12px; - --radius-16: 16px; - --radius-20: 20px; - --radius-24: 24px; - --radius-32: 32px; - --radius-full: 9999px; - --space-0: 0px; - --space-2: 2px; - --space-4: 4px; - --space-8: 8px; - --space-12: 12px; - --space-16: 16px; - --space-20: 20px; - --space-24: 24px; - --space-32: 32px; - --space-40: 40px; - --space-48: 48px; - --space-64: 64px; - --space-80: 80px; - --w100: 1px; - --w150: 1.5px; - --w200: 2px; - --w300: 3px; - --w400: 4px; - --w120: 1.2px; - --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ - --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ - --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ - --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ - --font-weight-w400: 400; - --font-weight-w500: 500; - --font-weight-w600: 600; - --font-weight-w700: 700; - --font-size-size-8: 8px; - --font-size-size-10: 10px; - --font-size-size-11: 11px; - --font-size-size-12: 12px; - --font-size-size-13: 13px; - --font-size-size-14: 14px; - --font-size-size-16: 16px; - --font-size-size-15: 15px; - --font-size-size-17: 17px; - --font-size-size-18: 18px; - --font-size-size-20: 20px; - --font-size-size-22: 22px; - --font-size-size-24: 24px; - --font-size-size-28: 28px; - --font-size-size-32: 32px; - --font-size-size-40: 40px; - --font-size-size-48: 48px; - --font-size-size-64: 64px; - --line-height-line-height-8: 8px; - --line-height-line-height-10: 10px; - --line-height-line-height-12: 12px; - --line-height-line-height-13: 13px; - --line-height-line-height-14: 14px; - --line-height-line-height-15: 15px; - --line-height-line-height-16: 16px; - --line-height-line-height-17: 17px; - --line-height-line-height-18: 18px; - --line-height-line-height-20: 20px; - --line-height-line-height-24: 24px; - --line-height-line-height-28: 28px; - --line-height-line-height-32: 32px; - --line-height-line-height-40: 40px; - --line-height-line-height-48: 48px; - --typography-font-family-sans: 'Geist'; - --typography-font-family-mono: 'Geist Mono'; - --typography-font-weight-regular: 400; - --typography-font-weight-medium: 500; - --typography-font-weight-semi-bold: 600; - --typography-font-weight-bold: 700; - --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */ - --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */ - --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */ - --typography-font-size-md: 16px; /** Default desktop body size, main text. */ - --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */ - --typography-font-size-xl: 20px; /** Small headings. */ - --typography-font-size-2xl: 24px; /** Section titles, important headings. */ - --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */ - --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */ - --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */ - --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */ - --light-elevation-1: + +@mixin variables { + --str-chat__base-transparent-0: rgba(255, 255, 255, 0); + --str-chat__base-transparent-white-10: rgba(255, 255, 255, 0.1); + --str-chat__base-transparent-white-20: rgba(255, 255, 255, 0.2); + --str-chat__base-transparent-white-30: rgba(255, 255, 255, 0.3); + --str-chat__base-transparent-white-70: rgba(255, 255, 255, 0.7); + --str-chat__base-transparent-black-5: rgba( + 0, + 0, + 0, + 0.05 + ); /** Used for bg in closeButton */ + --str-chat__base-transparent-black-10: rgba( + 0, + 0, + 0, + 0.1 + ); /** Used for bg in closeButton */ + --str-chat__base-transparent-black-70: rgba( + 0, + 0, + 0, + 0.7 + ); /** Used for bg in closeButton */ + --str-chat__base-black: #000000; + --str-chat__base-white: #ffffff; + --str-chat__slate-50: #f6f8fa; + --str-chat__slate-100: #ebeef1; + --str-chat__slate-150: #d5dbe1; + --str-chat__slate-200: #c0c8d2; + --str-chat__slate-300: #a3acba; + --str-chat__slate-400: #87909f; + --str-chat__slate-500: #687385; + --str-chat__slate-600: #545969; + --str-chat__slate-700: #414552; + --str-chat__slate-800: #30313d; + --str-chat__slate-900: #1a1b25; + --str-chat__neutral-50: #f8f8f8; + --str-chat__neutral-100: #efefef; + --str-chat__neutral-150: #d8d8d8; + --str-chat__neutral-200: #c4c4c4; + --str-chat__neutral-300: #ababab; + --str-chat__neutral-400: #8f8f8f; + --str-chat__neutral-500: #6a6a6a; + --str-chat__neutral-600: #565656; + --str-chat__neutral-700: #464646; + --str-chat__neutral-800: #323232; + --str-chat__neutral-900: #1c1c1c; + --str-chat__blue-50: #f3f7ff; + --str-chat__blue-100: #e3edff; + --str-chat__blue-150: #c3d9ff; + --str-chat__blue-200: #a5c5ff; + --str-chat__blue-300: #78a8ff; + --str-chat__blue-400: #4586ff; + --str-chat__blue-500: #005fff; + --str-chat__blue-600: #1b53bd; + --str-chat__blue-700: #19418d; + --str-chat__blue-800: #142f63; + --str-chat__blue-900: #091a3b; + --str-chat__cyan-50: #f1fbfc; + --str-chat__cyan-100: #d1f3f6; + --str-chat__cyan-150: #a9e4ea; + --str-chat__cyan-200: #72d7e0; + --str-chat__cyan-300: #45bcc7; + --str-chat__cyan-400: #1e9ea9; + --str-chat__cyan-500: #248088; + --str-chat__cyan-600: #006970; + --str-chat__cyan-700: #065056; + --str-chat__cyan-800: #003a3f; + --str-chat__cyan-900: #002124; + --str-chat__green-50: #e1ffee; + --str-chat__green-100: #bdfcdb; + --str-chat__green-150: #8febbd; + --str-chat__green-200: #59dea3; + --str-chat__green-300: #00c384; + --str-chat__green-400: #00a46e; + --str-chat__green-500: #277e59; + --str-chat__green-600: #006643; + --str-chat__green-700: #004f33; + --str-chat__green-800: #003a25; + --str-chat__green-900: #002213; + --str-chat__purple-50: #f7f8ff; + --str-chat__purple-100: #ecedff; + --str-chat__purple-150: #d4d7ff; + --str-chat__purple-200: #c1c5ff; + --str-chat__purple-300: #a1a3ff; + --str-chat__purple-400: #8482fc; + --str-chat__purple-500: #644af9; + --str-chat__purple-600: #553bd8; + --str-chat__purple-700: #4032a1; + --str-chat__purple-800: #2e2576; + --str-chat__purple-900: #1a114d; + --str-chat__yellow-50: #fef9da; + --str-chat__yellow-100: #fcedb9; + --str-chat__yellow-150: #fcd579; + --str-chat__yellow-200: #f6bf57; + --str-chat__yellow-300: #fa922b; + --str-chat__yellow-400: #f26d10; + --str-chat__yellow-500: #c84801; + --str-chat__yellow-600: #a82c00; + --str-chat__yellow-700: #842106; + --str-chat__yellow-800: #5f1a05; + --str-chat__yellow-900: #331302; + --str-chat__red-50: #fff5fa; + --str-chat__red-100: #ffe7f2; + --str-chat__red-150: #ffccdf; + --str-chat__red-200: #ffb1cd; + --str-chat__red-300: #fe87a1; + --str-chat__red-400: #fc526a; + --str-chat__red-500: #d90d10; + --str-chat__red-600: #b3093c; + --str-chat__red-700: #890d37; + --str-chat__red-800: #68052b; + --str-chat__red-900: #3e021a; + --str-chat__violet-50: #fef4ff; + --str-chat__violet-100: #fbe8fe; + --str-chat__violet-150: #f7cffc; + --str-chat__violet-200: #eeb5f4; + --str-chat__violet-300: #e68bec; + --str-chat__violet-400: #d75fe7; + --str-chat__violet-500: #b716ca; + --str-chat__violet-600: #9d00ae; + --str-chat__violet-700: #7c0089; + --str-chat__violet-800: #5c0066; + --str-chat__violet-900: #36003d; + --str-chat__lime-50: #f1fde8; + --str-chat__lime-100: #d4ffb0; + --str-chat__lime-150: #b1ee79; + --str-chat__lime-200: #9cda5d; + --str-chat__lime-300: #78c100; + --str-chat__lime-400: #639e11; + --str-chat__lime-500: #4b7a0a; + --str-chat__lime-600: #3e6213; + --str-chat__lime-700: #355315; + --str-chat__lime-800: #203a00; + --str-chat__lime-900: #112100; + --str-chat__size-2: 2px; + --str-chat__size-4: 4px; + --str-chat__size-6: 6px; + --str-chat__size-8: 8px; + --str-chat__size-12: 12px; + --str-chat__size-16: 16px; + --str-chat__size-20: 20px; + --str-chat__size-24: 24px; + --str-chat__size-32: 32px; + --str-chat__size-40: 40px; + --str-chat__size-48: 48px; + --str-chat__size-64: 64px; + --str-chat__size-28: 28px; + --str-chat__size-80: 80px; + --str-chat__size-128: 128px; + --str-chat__size-240: 240px; + --str-chat__size-320: 320px; + --str-chat__size-480: 480px; + --str-chat__size-560: 560px; + --str-chat__size-640: 640px; + --str-chat__size-760: 760px; + --str-chat__size-144: 144px; + --str-chat__size-208: 208px; + --str-chat__size-56: 56px; + --str-chat__radius-0: 0px; + --str-chat__radius-2: 2px; + --str-chat__radius-4: 4px; + --str-chat__radius-6: 6px; + --str-chat__radius-8: 8px; + --str-chat__radius-12: 12px; + --str-chat__radius-16: 16px; + --str-chat__radius-20: 20px; + --str-chat__radius-24: 24px; + --str-chat__radius-32: 32px; + --str-chat__radius-full: 9999px; + --str-chat__space-0: 0px; + --str-chat__space-2: 2px; + --str-chat__space-4: 4px; + --str-chat__space-8: 8px; + --str-chat__space-12: 12px; + --str-chat__space-16: 16px; + --str-chat__space-20: 20px; + --str-chat__space-24: 24px; + --str-chat__space-32: 32px; + --str-chat__space-40: 40px; + --str-chat__space-48: 48px; + --str-chat__space-64: 64px; + --str-chat__space-80: 80px; + --str-chat__w100: 1px; + --str-chat__w150: 1.5px; + --str-chat__w200: 2px; + --str-chat__w300: 3px; + --str-chat__w400: 4px; + --str-chat__w120: 1.2px; + --str-chat__font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --str-chat__font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --str-chat__font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */ + --str-chat__font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */ + --str-chat__font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */ + --str-chat__font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */ + --str-chat__font-weight-w400: 400; + --str-chat__font-weight-w500: 500; + --str-chat__font-weight-w600: 600; + --str-chat__font-weight-w700: 700; + --str-chat__font-size-size-8: 8px; + --str-chat__font-size-size-10: 10px; + --str-chat__font-size-size-11: 11px; + --str-chat__font-size-size-12: 12px; + --str-chat__font-size-size-13: 13px; + --str-chat__font-size-size-14: 14px; + --str-chat__font-size-size-16: 16px; + --str-chat__font-size-size-15: 15px; + --str-chat__font-size-size-17: 17px; + --str-chat__font-size-size-18: 18px; + --str-chat__font-size-size-20: 20px; + --str-chat__font-size-size-22: 22px; + --str-chat__font-size-size-24: 24px; + --str-chat__font-size-size-28: 28px; + --str-chat__font-size-size-32: 32px; + --str-chat__font-size-size-40: 40px; + --str-chat__font-size-size-48: 48px; + --str-chat__font-size-size-64: 64px; + --str-chat__line-height-line-height-8: 8px; + --str-chat__line-height-line-height-10: 10px; + --str-chat__line-height-line-height-12: 12px; + --str-chat__line-height-line-height-13: 13px; + --str-chat__line-height-line-height-14: 14px; + --str-chat__line-height-line-height-15: 15px; + --str-chat__line-height-line-height-16: 16px; + --str-chat__line-height-line-height-17: 17px; + --str-chat__line-height-line-height-18: 18px; + --str-chat__line-height-line-height-20: 20px; + --str-chat__line-height-line-height-24: 24px; + --str-chat__line-height-line-height-28: 28px; + --str-chat__line-height-line-height-32: 32px; + --str-chat__line-height-line-height-40: 40px; + --str-chat__line-height-line-height-48: 48px; + --str-chat__typography-font-weight-regular: 400; + --str-chat__typography-font-weight-medium: 500; + --str-chat__typography-font-weight-semi-bold: 600; + --str-chat__typography-font-weight-bold: 700; + --str-chat__light-elevation-1: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */ - --light-elevation-2: + --str-chat__light-elevation-2: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.06); - --light-elevation-3: + --str-chat__light-elevation-3: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 12px 24px 0px rgba(0, 0, 0, 0.1); - --light-elevation-4: + --str-chat__light-elevation-4: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16), 0px 20px 32px 0px rgba(0, 0, 0, 0.12); - --dark-elevation-1: + --str-chat__dark-elevation-1: 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.1); - --dark-elevation-2: + --str-chat__dark-elevation-2: 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22), 0px 6px 16px 0px rgba(0, 0, 0, 0.12); - --dark-elevation-3: + --str-chat__dark-elevation-3: 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24), 0px 12px 24px 0px rgba(0, 0, 0, 0.14); - --dark-elevation-4: + --str-chat__dark-elevation-4: 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28), 0px 20px 32px 0px rgba(0, 0, 0, 0.16); - --radius-none: 0px; - --radius-xxs: 2px; - --radius-xs: 4px; - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 20px; - --radius-max: 9999px; - --radius-3xl: 24px; - --radius-4xl: 32px; - --spacing-none: 0px; /** No spacing. Used for tight component joins. */ - --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */ - --spacing-xs: 8px; /** Small padding and default vertical gaps. */ - --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */ - --spacing-md: 16px; /** Default large padding for sections and cards. */ - --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */ - --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */ - --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */ - --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */ - --spacing-xxxs: 2px; - --device-radius: 8px; - --device-safe-area-bottom: 0px; - --device-safe-area-top: 0px; - --message-bubble-radius-group-top: 20px; - --message-bubble-radius-group-middle: 20px; - --message-bubble-radius-group-bottom: 20px; - --message-bubble-radius-tail: 0px; - --message-bubble-radius-attachment: 12px; - --message-bubble-radius-attachment-inline: 8px; - --composer-radius-fixed: 24px; - --composer-radius-floating: 24px; - --button-radius-lg: 9999px; - --button-radius-md: 9999px; - --button-radius-sm: 9999px; - --button-radius-full: 9999px; - --button-visual-height-sm: 32px; - --button-visual-height-md: 40px; - --button-visual-height-lg: 48px; - --button-visual-height-xs: 24px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-height: 48px; - /** - * Minimum interactive hit target size. - * - * iOS / Android: enforce minimum touch target. - * Web: do not apply a min-width or min-height; size to content. - * - * Note: Web uses a placeholder value in Figma due to variable mode constraints. - */ - --button-hit-target-min-width: 48px; - --button-padding-y-lg: 14px; - --button-padding-y-md: 10px; - --button-padding-y-sm: 6px; - --button-padding-y-xs: 4px; - --button-padding-x-icon-only-lg: 14px; - --button-padding-x-icon-only-md: 10px; - --button-padding-x-icon-only-sm: 6px; - --button-padding-x-icon-only-xs: 4px; - --button-padding-x-with-label-lg: 16px; - --button-padding-x-with-label-md: 16px; - --button-padding-x-with-label-sm: 16px; - --button-padding-x-with-label-xs: 12px; - --button-primary-bg: #005fff; - --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0); - --button-primary-text: #005fff; - --button-primary-text-on-accent: #ffffff; - --button-primary-text-on-dark: #ffffff; - --button-primary-border: #a5c5ff; - --button-primary-border-on-dark: #ffffff; - --button-secondary-bg: #ebeef1; - --button-secondary-bg-liquid-glass: #ffffff; - --button-secondary-text: #1a1b25; - --button-secondary-text-on-accent: #1a1b25; - --button-secondary-text-on-dark: #ffffff; - --button-secondary-border: #d5dbe1; - --button-secondary-border-on-dark: #ffffff; - --button-destructive-bg: #d90d10; - --button-destructive-bg-liquid-glass: #ffffff; - --button-destructive-text: #d90d10; - --button-destructive-text-on-accent: #ffffff; - --button-destructive-text-on-dark: #ffffff; - --button-destructive-border: #d90d10; - --button-destructive-border-on-dark: #ffffff; - --icon-size-xs: 12px; - --icon-size-sm: 16px; - --icon-size-md: 20px; - --icon-size-lg: 32px; - --icon-stroke-subtle: 1.2px; - --icon-stroke-default: 1.5px; - --icon-stroke-emphasis: 2px; - --emoji-sm: 16px; - --emoji-md: 24px; - --emoji-lg: 32px; - --emoji-xl: 48px; - --emoji-2xl: 64px; - --background-core-app: #ffffff; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ - --background-core-elevation-0: #ffffff; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */ - --background-core-elevation-1: #ffffff; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ - --background-core-elevation-2: #ffffff; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ - --background-core-elevation-3: #ffffff; /** Used for badge counts that float above other UI elements. */ - --background-core-surface-default: #ebeef1; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ - --background-core-surface-subtle: #f6f8fa; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ - --background-core-surface-card: #f6f8fa; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ - --background-core-surface-strong: #d5dbe1; /** A more prominent background. Used for elements that need to stand out from the main surface. */ - --background-core-inverse: #000000; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ - --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ - --background-core-highlight: #fef9da; /** A tint for drawing attention to content. Used for highlights and pinned messages. */ - --background-core-overlay-light: rgba( + --str-chat__button-padding-y-lg: 14px; + --str-chat__button-padding-y-md: 10px; + --str-chat__button-padding-y-sm: 6px; + --str-chat__button-padding-y-xs: 4px; + --str-chat__button-padding-x-icon-only-lg: 14px; + --str-chat__button-padding-x-icon-only-md: 10px; + --str-chat__button-padding-x-icon-only-sm: 6px; + --str-chat__button-padding-x-icon-only-xs: 4px; + --str-chat__button-padding-x-with-label-lg: 16px; + --str-chat__button-padding-x-with-label-md: 16px; + --str-chat__button-padding-x-with-label-sm: 16px; + --str-chat__button-padding-x-with-label-xs: 12px; + --str-chat__background-core-overlay-light: rgba( 255, 255, 255, 0.75 ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */ - --background-core-overlay-dark: rgba( + --str-chat__background-core-overlay-dark: rgba( 26, 27, 37, 0.25 ); /** A dark semi-transparent layer. Used for image overlays. */ - --background-core-scrim: rgba( + --str-chat__background-core-scrim: rgba( 26, 27, 37, 0.5 ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */ - --background-utility-hover: rgba( + --str-chat__background-utility-hover: rgba( 26, 27, 37, 0.1 ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */ - --background-utility-pressed: rgba( + --str-chat__background-utility-pressed: rgba( 26, 27, 37, 0.15 ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */ - --background-utility-selected: rgba( + --str-chat__background-utility-selected: rgba( 26, 27, 37, 0.2 ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */ - --background-utility-disabled: #ebeef1; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ - --border-utility-hover: rgba( + --str-chat__border-utility-hover: rgba( 26, 27, 37, 0.1 ); /** Applied on pointer hover over bordered interactive elements. */ - --border-utility-pressed: rgba( + --str-chat__border-utility-pressed: rgba( 26, 27, 37, 0.2 ); /** Applied during an active press on bordered interactive elements. */ - --border-utility-selected: rgba( + --str-chat__border-utility-selected: rgba( 26, 27, 37, 0.15 ); /** Border for selected or active items. Used for highlighted list items and active controls. */ - --border-utility-focused: #c3d9ff; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ - --border-utility-active: #005fff; /** Active input border. Used for focused text fields and selected form elements. */ - --border-utility-success: #00a46e; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ - --border-utility-warning: #f26d10; /** Border for cautionary states. Used on inputs or elements requiring attention. */ - --border-utility-error: #d90d10; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ - --border-utility-disabled: #ebeef1; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ - --border-utility-disabled-on-surface: #d5dbe1; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ - --border-core-default: #d5dbe1; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ - --border-core-subtle: #ebeef1; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ - --border-core-strong: #a3acba; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ - --border-core-inverse: #ffffff; /** Used on dark backgrounds. */ - --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ - --border-core-on-surface: #a3acba; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ - --border-core-opacity-subtle: rgba( + --str-chat__border-core-opacity-subtle: rgba( 26, 27, 37, 0.1 ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */ - --border-core-opacity-strong: rgba( + --str-chat__border-core-opacity-strong: rgba( 26, 27, 37, 0.25 ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */ - --border-core-on-inverse: #ffffff; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ - --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */ - --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */ - --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */ - --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */ - --chat-text-incoming: #1a1b25; /** Message body text. */ - --chat-text-outgoing: #091a3b; /** Message body text. */ - --chat-text-username: #414552; /** Username label. */ - --chat-text-timestamp: #687385; /** Time labels. */ - --chat-text-typing-indicator: #1a1b25; /** Typing indicator chip. */ - --chat-text-read: #005fff; - --chat-text-mention: #005fff; /** Mention styling. */ - --chat-text-link: #005fff; /** Links inside message bubbles. */ - --chat-text-reaction: #414552; /** Reaction count text. */ - --chat-text-system: #414552; /** System messages like date separators. */ - --chat-border-incoming: #ebeef1; - --chat-border-outgoing: #e3edff; - --chat-border-on-chat-incoming: #a3acba; - --chat-border-on-chat-outgoing: #78a8ff; - --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */ - --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */ - --chat-waveform-bar: rgba(26, 27, 37, 0.25); - --chat-waveform-bar-playing: #005fff; - --chat-poll-progress-track-incoming: #d5dbe1; - --chat-poll-progress-track-outgoing: #a5c5ff; - --chat-poll-progress-fill-incoming: #687385; - --chat-poll-progress-fill-outgoing: #005fff; - --chat-thread-connector-incoming: #d5dbe1; - --chat-thread-connector-outgoing: #c3d9ff; - --input-text-default: #1a1b25; /** Main text inside the chat input. */ - --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */ - --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ - --input-send-icon: #005fff; /** Default send icon color in the input. Uses the brand accent. */ - --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */ - --reaction-bg: #ffffff; - --reaction-border: #d5dbe1; - --reaction-text: #1a1b25; - --reaction-emoji: #1a1b25; - --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ - --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --system-text: #000000; - --system-bg-blur: rgba(255, 255, 255, 0.01); - --system-caret: #005fff; - --system-scrollbar: rgba(0, 0, 0, 0.5); - --badge-bg-default: #ffffff; - --badge-bg-primary: #005fff; - --badge-bg-neutral: #687385; - --badge-bg-error: #d90d10; - --badge-bg-inverse: #000000; - --badge-bg-overlay: rgba(0, 0, 0, 0.75); - --badge-text: #1a1b25; - --badge-text-on-inverse: #ffffff; - --badge-text-on-accent: #ffffff; - --badge-border: #ffffff; - --control-remove-control-bg: #000000; - --control-remove-control-icon: #ffffff; - --control-remove-control-border: #ffffff; - --control-progress-bar-fill: #687385; - --control-progress-bar-track: #d5dbe1; - --control-toggle-switch-bg: #687385; - --control-toggle-switch-bg-selected: #005fff; - --control-toggle-switch-bg-disabled: #ebeef1; - --control-toggle-switch-knob: #ffffff; - --control-playback-toggle-text: #1a1b25; - --control-playback-toggle-border: #d5dbe1; - --control-checkbox-bg: rgba(255, 255, 255, 0); - --control-checkbox-border: #d5dbe1; - --control-checkbox-bg-selected: #005fff; - --control-checkbox-icon: #ffffff; - --control-play-button-bg: rgba(0, 0, 0, 0.75); - --control-play-button-icon: #ffffff; - --control-playback-thumb-bg-default: #ffffff; - --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25); - --control-playback-thumb-bg-active: #005fff; - --control-playback-thumb-border-active: #ffffff; - --control-radio-button-bg: rgba(255, 255, 255, 0); - --control-radio-button-border: #d5dbe1; - --control-radio-button-bg-selected: #005fff; - --control-radio-button-indicator: #ffffff; - --control-radio-check-bg: rgba(255, 255, 255, 0); - --control-radio-check-border: #d5dbe1; - --control-radio-check-bg-selected: #005fff; - --control-radio-check-icon: #ffffff; - --control-chip-border: #d5dbe1; - --control-chip-text: #1a1b25; - --text-primary: #1a1b25; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ - --text-secondary: #414552; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ - --text-tertiary: #687385; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ - --text-on-inverse: #ffffff; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ - --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ - --text-disabled: #a3acba; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ - --text-link: #005fff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ - --avatar-palette-bg-1: #c3d9ff; - --avatar-palette-bg-2: #a9e4ea; - --avatar-palette-bg-3: #8febbd; - --avatar-palette-bg-4: #d4d7ff; - --avatar-palette-bg-5: #fcd579; - --avatar-palette-text-1: #091a3b; - --avatar-palette-text-2: #002124; - --avatar-palette-text-3: #002213; - --avatar-palette-text-4: #1a114d; - --avatar-palette-text-5: #331302; - --avatar-bg-default: #c3d9ff; - --avatar-bg-placeholder: #d5dbe1; - --avatar-text-default: #091a3b; - --avatar-text-placeholder: #687385; - --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ - --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ - --accent-primary: #005fff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ - --accent-success: #00a46e; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ - --accent-warning: #f26d10; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ - --accent-error: #d90d10; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ - --accent-neutral: #687385; /** A mid-tone gray for de-emphasized UI elements. */ - --brand-50: #f3f7ff; - --brand-100: #e3edff; - --brand-150: #c3d9ff; - --brand-200: #a5c5ff; - --brand-300: #78a8ff; - --brand-400: #4586ff; - --brand-500: #005fff; - --brand-600: #1b53bd; - --brand-700: #19418d; - --brand-800: #142f63; - --brand-900: #091a3b; - --skeleton-loading-base: rgba( - 255, - 255, - 255, - 0 + --str-chat__system-bg-blur: rgba(255, 255, 255, 0.01); + --str-chat__system-scrollbar: rgba(0, 0, 0, 0.5); + --str-chat__badge-bg-overlay: rgba(0, 0, 0, 0.75); + --str-chat__control-play-button-bg: rgba(0, 0, 0, 0.75); + --str-chat__typography-font-family-sans: var(--str-chat__font-family-geist); + --str-chat__typography-font-family-mono: var(--str-chat__font-family-geist-mono); + --str-chat__typography-font-size-xxs: var( + --str-chat__font-size-size-10 + ); /** Micro text such as timestamps or subtle metadata. */ + --str-chat__typography-font-size-xs: var( + --str-chat__font-size-size-12 + ); /** Compact secondary text, small UI labels. */ + --str-chat__typography-font-size-sm: var( + --str-chat__font-size-size-14 + ); /** Default mobile body size, small controls. */ + --str-chat__typography-font-size-md: var( + --str-chat__font-size-size-16 + ); /** Default desktop body size, main text. */ + --str-chat__typography-font-size-lg: var( + --str-chat__font-size-size-18 + ); /** Medium emphasis, section labels. */ + --str-chat__typography-font-size-xl: var( + --str-chat__font-size-size-20 + ); /** Small headings. */ + --str-chat__typography-font-size-2xl: var( + --str-chat__font-size-size-24 + ); /** Section titles, important headings. */ + --str-chat__typography-font-size-micro: var( + --str-chat__font-size-size-8 + ); /** Micro text such as timestamps or subtle metadata. */ + --str-chat__typography-line-height-tight: var( + --str-chat__line-height-line-height-16 + ); /** Compact text, headers, UI labels. */ + --str-chat__typography-line-height-normal: var( + --str-chat__line-height-line-height-20 + ); /** Default reading line-height for sizes 14–16px. */ + --str-chat__typography-line-height-relaxed: var( + --str-chat__line-height-line-height-24 + ); /** For larger text sizes or multiline descriptions. */ + --str-chat__radius-none: var(--str-chat__radius-0); + --str-chat__radius-xxs: var(--str-chat__radius-2); + --str-chat__radius-xs: var(--str-chat__radius-4); + --str-chat__radius-sm: var(--str-chat__radius-6); + --str-chat__radius-md: var(--str-chat__radius-8); + --str-chat__radius-lg: var(--str-chat__radius-12); + --str-chat__radius-xl: var(--str-chat__radius-16); + --str-chat__radius-2xl: var(--str-chat__radius-20); + --str-chat__radius-max: var(--str-chat__radius-full); + --str-chat__radius-3xl: var(--str-chat__radius-24); + --str-chat__radius-4xl: var(--str-chat__radius-32); + --str-chat__spacing-none: var( + --str-chat__space-0 + ); /** No spacing. Used for tight component joins. */ + --str-chat__spacing-xxs: var( + --str-chat__space-4 + ); /** Base unit. Minimal padding, tight gaps. */ + --str-chat__spacing-xs: var( + --str-chat__space-8 + ); /** Small padding and default vertical gaps. */ + --str-chat__spacing-sm: var( + --str-chat__space-12 + ); /** Common internal spacing in inputs and buttons. */ + --str-chat__spacing-md: var( + --str-chat__space-16 + ); /** Default large padding for sections and cards. */ + --str-chat__spacing-xl: var( + --str-chat__space-24 + ); /** Comfortable spacing for chat bubbles and list items. */ + --str-chat__spacing-2xl: var( + --str-chat__space-32 + ); /** Larger spacing for panels, modals, and gutters. */ + --str-chat__spacing-3xl: var( + --str-chat__space-40 + ); /** Used for wide layout spacing and breathing room. */ + --str-chat__spacing-lg: var( + --str-chat__space-20 + ); /** Medium spacing for grouping elements and section breaks. */ + --str-chat__spacing-xxxs: var(--str-chat__space-2); + --str-chat__device-safe-area-bottom: var(--str-chat__space-0); + --str-chat__device-safe-area-top: var(--str-chat__space-0); + --str-chat__button-radius-lg: var(--str-chat__radius-full); + --str-chat__button-radius-md: var(--str-chat__radius-full); + --str-chat__button-radius-sm: var(--str-chat__radius-full); + --str-chat__button-radius-full: var(--str-chat__radius-full); + --str-chat__button-visual-height-sm: var(--str-chat__size-32); + --str-chat__button-visual-height-md: var(--str-chat__size-40); + --str-chat__button-visual-height-lg: var(--str-chat__size-48); + --str-chat__button-visual-height-xs: var(--str-chat__size-24); + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --str-chat__button-hit-target-min-height: var(--str-chat__size-48); + /** + * Minimum interactive hit target size. + * + * iOS / Android: enforce minimum touch target. + * Web: do not apply a min-width or min-height; size to content. + * + * Note: Web uses a placeholder value in Figma due to variable mode constraints. + */ + --str-chat__button-hit-target-min-width: var(--str-chat__size-48); + --str-chat__button-primary-bg-liquid-glass: var(--str-chat__base-transparent-0); + --str-chat__icon-size-xs: var(--str-chat__size-12); + --str-chat__icon-size-sm: var(--str-chat__size-16); + --str-chat__icon-size-md: var(--str-chat__size-20); + --str-chat__icon-size-lg: var(--str-chat__size-32); + --str-chat__icon-stroke-subtle: var(--str-chat__w120); + --str-chat__icon-stroke-default: var(--str-chat__w150); + --str-chat__icon-stroke-emphasis: var(--str-chat__w200); + --str-chat__emoji-md: var(--str-chat__font-size-size-24); + --str-chat__emoji-lg: var(--str-chat__font-size-size-32); + --str-chat__emoji-xl: var(--str-chat__font-size-size-48); + --str-chat__emoji-2xl: var(--str-chat__font-size-size-64); + --str-chat__background-core-highlight: var( + --str-chat__yellow-50 + ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */ + --str-chat__chat-waveform-bar: var(--str-chat__border-core-opacity-strong); + --str-chat__control-checkbox-bg: var(--str-chat__base-transparent-0); + --str-chat__control-playback-thumb-border-default: var( + --str-chat__border-core-opacity-strong + ); + --str-chat__control-radio-button-bg: var(--str-chat__base-transparent-0); + --str-chat__control-radio-check-bg: var(--str-chat__base-transparent-0); + --str-chat__avatar-palette-bg-1: var(--str-chat__blue-150); + --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-150); + --str-chat__avatar-palette-bg-3: var(--str-chat__green-150); + --str-chat__avatar-palette-bg-4: var(--str-chat__purple-150); + --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-150); + --str-chat__avatar-palette-text-1: var(--str-chat__blue-900); + --str-chat__avatar-palette-text-2: var(--str-chat__cyan-900); + --str-chat__avatar-palette-text-3: var(--str-chat__green-900); + --str-chat__avatar-palette-text-4: var(--str-chat__purple-900); + --str-chat__avatar-palette-text-5: var(--str-chat__yellow-900); + --str-chat__accent-success: var( + --str-chat__green-400 + ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */ + --str-chat__accent-warning: var( + --str-chat__yellow-400 + ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */ + --str-chat__accent-error: var( + --str-chat__red-500 + ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */ + --str-chat__brand-50: var(--str-chat__blue-50); + --str-chat__brand-100: var(--str-chat__blue-100); + --str-chat__brand-150: var(--str-chat__blue-150); + --str-chat__brand-200: var(--str-chat__blue-200); + --str-chat__brand-300: var(--str-chat__blue-300); + --str-chat__brand-400: var(--str-chat__blue-400); + --str-chat__brand-500: var(--str-chat__blue-500); + --str-chat__brand-600: var(--str-chat__blue-600); + --str-chat__brand-700: var(--str-chat__blue-700); + --str-chat__brand-800: var(--str-chat__blue-800); + --str-chat__brand-900: var(--str-chat__blue-900); + --str-chat__skeleton-loading-base: var( + --str-chat__base-transparent-0 ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */ - --skeleton-loading-highlight: rgba( - 255, - 255, - 255, - 0.75 + --str-chat__skeleton-loading-highlight: var( + --str-chat__background-core-overlay-light ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */ - --chrome-0: #ffffff; - --chrome-50: #f6f8fa; - --chrome-100: #ebeef1; - --chrome-150: #d5dbe1; - --chrome-200: #c0c8d2; - --chrome-300: #a3acba; - --chrome-400: #87909f; - --chrome-500: #687385; - --chrome-600: #545969; - --chrome-700: #414552; - --chrome-800: #30313d; - --chrome-900: #1a1b25; - --chrome-1000: #000000; + --str-chat__chrome-0: var(--str-chat__base-white); + --str-chat__chrome-50: var(--str-chat__slate-50); + --str-chat__chrome-100: var(--str-chat__slate-100); + --str-chat__chrome-150: var(--str-chat__slate-150); + --str-chat__chrome-200: var(--str-chat__slate-200); + --str-chat__chrome-300: var(--str-chat__slate-300); + --str-chat__chrome-400: var(--str-chat__slate-400); + --str-chat__chrome-500: var(--str-chat__slate-500); + --str-chat__chrome-600: var(--str-chat__slate-600); + --str-chat__chrome-700: var(--str-chat__slate-700); + --str-chat__chrome-800: var(--str-chat__slate-800); + --str-chat__chrome-900: var(--str-chat__slate-900); + --str-chat__chrome-1000: var(--str-chat__base-black); + --str-chat__device-radius: var(--str-chat__radius-md); + --str-chat__message-bubble-radius-group-top: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-group-middle: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-group-bottom: var(--str-chat__radius-2xl); + --str-chat__message-bubble-radius-tail: var(--str-chat__radius-none); + --str-chat__message-bubble-radius-attachment: var(--str-chat__radius-lg); + --str-chat__message-bubble-radius-attachment-inline: var(--str-chat__radius-md); + --str-chat__composer-radius-fixed: var(--str-chat__radius-3xl); + --str-chat__composer-radius-floating: var(--str-chat__radius-3xl); + --str-chat__button-primary-border: var(--str-chat__brand-200); + --str-chat__button-destructive-bg: var(--str-chat__accent-error); + --str-chat__button-destructive-text: var(--str-chat__accent-error); + --str-chat__button-destructive-border: var(--str-chat__accent-error); + --str-chat__emoji-sm: var(--str-chat__typography-font-size-md); + --str-chat__background-core-app: var( + --str-chat__chrome-0 + ); /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */ + --str-chat__background-core-elevation-0: var( + --str-chat__chrome-0 + ); /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */ + --str-chat__background-core-elevation-1: var( + --str-chat__chrome-0 + ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */ + --str-chat__background-core-elevation-2: var( + --str-chat__chrome-0 + ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */ + --str-chat__background-core-elevation-3: var( + --str-chat__chrome-0 + ); /** Used for badge counts that float above other UI elements. */ + --str-chat__background-core-surface-default: var( + --str-chat__chrome-100 + ); /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */ + --str-chat__background-core-surface-subtle: var( + --str-chat__chrome-50 + ); /** A slightly receded background. Used for secondary containers or to create soft visual separation. */ + --str-chat__background-core-surface-card: var( + --str-chat__chrome-50 + ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */ + --str-chat__background-core-surface-strong: var( + --str-chat__chrome-150 + ); /** A more prominent background. Used for elements that need to stand out from the main surface. */ + --str-chat__background-core-inverse: var( + --str-chat__chrome-1000 + ); /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */ + --str-chat__background-core-on-accent: var( + --str-chat__chrome-0 + ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */ + --str-chat__background-utility-disabled: var( + --str-chat__chrome-100 + ); /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */ + --str-chat__border-utility-focused: var( + --str-chat__brand-150 + ); /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */ + --str-chat__border-utility-success: var( + --str-chat__accent-success + ); /** Border for positive or confirmed states. Used on validated inputs and success indicators. */ + --str-chat__border-utility-warning: var( + --str-chat__accent-warning + ); /** Border for cautionary states. Used on inputs or elements requiring attention. */ + --str-chat__border-utility-error: var( + --str-chat__accent-error + ); /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */ + --str-chat__border-utility-disabled: var( + --str-chat__chrome-100 + ); /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */ + --str-chat__border-utility-disabled-on-surface: var( + --str-chat__chrome-150 + ); /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */ + --str-chat__border-core-default: var( + --str-chat__chrome-150 + ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */ + --str-chat__border-core-subtle: var( + --str-chat__chrome-100 + ); /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */ + --str-chat__border-core-strong: var( + --str-chat__chrome-300 + ); /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */ + --str-chat__border-core-inverse: var( + --str-chat__chrome-0 + ); /** Used on dark backgrounds. */ + --str-chat__border-core-on-accent: var( + --str-chat__chrome-0 + ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */ + --str-chat__border-core-on-surface: var( + --str-chat__chrome-300 + ); /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */ + --str-chat__border-core-on-inverse: var( + --str-chat__chrome-0 + ); /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */ + --str-chat__chat-bg-outgoing: var( + --str-chat__brand-100 + ); /** Outgoing bubble background. */ + --str-chat__chat-bg-attachment-outgoing: var( + --str-chat__brand-150 + ); /** Attachment card in outgoing bubble. */ + --str-chat__chat-text-outgoing: var(--str-chat__brand-900); /** Message body text. */ + --str-chat__chat-border-outgoing: var(--str-chat__brand-100); + --str-chat__chat-border-on-chat-outgoing: var(--str-chat__brand-300); + --str-chat__chat-reply-indicator-incoming: var( + --str-chat__chrome-400 + ); /** Reply indicator shading for incoming. */ + --str-chat__chat-reply-indicator-outgoing: var( + --str-chat__brand-400 + ); /** Reply indicator shading for outgoing. */ + --str-chat__chat-poll-progress-track-outgoing: var(--str-chat__brand-200); + --str-chat__chat-thread-connector-outgoing: var(--str-chat__brand-150); + --str-chat__presence-bg-online: var( + --str-chat__accent-success + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__system-text: var(--str-chat__chrome-1000); + --str-chat__badge-bg-error: var(--str-chat__accent-error); + --str-chat__badge-bg-inverse: var(--str-chat__chrome-1000); + --str-chat__text-primary: var( + --str-chat__chrome-900 + ); /** Main body text. Used for message content, titles, and any text that carries primary meaning. */ + --str-chat__text-secondary: var( + --str-chat__chrome-700 + ); /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */ + --str-chat__text-tertiary: var( + --str-chat__chrome-500 + ); /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */ + --str-chat__text-on-inverse: var( + --str-chat__chrome-0 + ); /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */ + --str-chat__text-on-accent: var( + --str-chat__chrome-0 + ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */ + --str-chat__text-disabled: var( + --str-chat__chrome-300 + ); /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */ + --str-chat__text-link: var( + --str-chat__brand-500 + ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */ + --str-chat__avatar-bg-default: var(--str-chat__avatar-palette-bg-1); + --str-chat__avatar-bg-placeholder: var(--str-chat__chrome-150); + --str-chat__avatar-text-default: var(--str-chat__avatar-palette-text-1); + --str-chat__avatar-text-placeholder: var(--str-chat__chrome-500); + --str-chat__avatar-presence-bg-online: var( + --str-chat__accent-success + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__accent-primary: var( + --str-chat__brand-500 + ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */ + --str-chat__accent-neutral: var( + --str-chat__chrome-500 + ); /** A mid-tone gray for de-emphasized UI elements. */ + --str-chat__button-primary-bg: var(--str-chat__accent-primary); + --str-chat__button-primary-text: var(--str-chat__accent-primary); + --str-chat__button-primary-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__button-primary-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-primary-border-on-dark: var(--str-chat__border-core-on-inverse); + --str-chat__button-secondary-bg: var(--str-chat__background-core-surface-default); + --str-chat__button-secondary-bg-liquid-glass: var( + --str-chat__background-core-elevation-0 + ); + --str-chat__button-secondary-text: var(--str-chat__text-primary); + --str-chat__button-secondary-text-on-accent: var(--str-chat__text-primary); + --str-chat__button-secondary-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-secondary-border: var(--str-chat__border-core-default); + --str-chat__button-secondary-border-on-dark: var(--str-chat__border-core-on-inverse); + --str-chat__button-destructive-bg-liquid-glass: var( + --str-chat__background-core-elevation-0 + ); + --str-chat__button-destructive-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__button-destructive-text-on-dark: var(--str-chat__text-on-inverse); + --str-chat__button-destructive-border-on-dark: var(--str-chat__text-on-inverse); + --str-chat__border-utility-active: var( + --str-chat__accent-primary + ); /** Active input border. Used for focused text fields and selected form elements. */ + --str-chat__chat-bg-incoming: var( + --str-chat__background-core-surface-default + ); /** Incoming bubble background. */ + --str-chat__chat-bg-attachment-incoming: var( + --str-chat__background-core-surface-strong + ); /** Attachment card in incoming bubble. */ + --str-chat__chat-text-incoming: var(--str-chat__text-primary); /** Message body text. */ + --str-chat__chat-text-username: var(--str-chat__text-secondary); /** Username label. */ + --str-chat__chat-text-timestamp: var(--str-chat__text-tertiary); /** Time labels. */ + --str-chat__chat-text-read: var(--str-chat__accent-primary); + --str-chat__chat-text-mention: var(--str-chat__text-link); /** Mention styling. */ + --str-chat__chat-text-link: var( + --str-chat__text-link + ); /** Links inside message bubbles. */ + --str-chat__chat-text-reaction: var( + --str-chat__text-secondary + ); /** Reaction count text. */ + --str-chat__chat-text-system: var( + --str-chat__text-secondary + ); /** System messages like date separators. */ + --str-chat__chat-border-incoming: var(--str-chat__border-core-subtle); + --str-chat__chat-border-on-chat-incoming: var(--str-chat__border-core-strong); + --str-chat__chat-waveform-bar-playing: var(--str-chat__accent-primary); + --str-chat__chat-poll-progress-fill-outgoing: var(--str-chat__accent-primary); + --str-chat__chat-thread-connector-incoming: var(--str-chat__border-core-default); + --str-chat__input-text-default: var( + --str-chat__text-primary + ); /** Main text inside the chat input. */ + --str-chat__input-text-placeholder: var( + --str-chat__text-tertiary + ); /** Placeholder text for the input. Lower emphasis than main text. */ + --str-chat__input-text-disabled: var( + --str-chat__text-disabled + ); /** Placeholder text for the input. Lower emphasis than main text. */ + --str-chat__input-text-icon: var( + --str-chat__text-tertiary + ); /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */ + --str-chat__input-send-icon: var( + --str-chat__accent-primary + ); /** Default send icon color in the input. Uses the brand accent. */ + --str-chat__input-send-icon-disabled: var( + --str-chat__text-disabled + ); /** Send icon when disabled (e.g. empty input). */ + --str-chat__reaction-bg: var(--str-chat__background-core-elevation-3); + --str-chat__reaction-border: var(--str-chat__border-core-default); + --str-chat__reaction-text: var(--str-chat__text-primary); + --str-chat__reaction-emoji: var(--str-chat__text-primary); + --str-chat__presence-border: var( + --str-chat__border-core-inverse + ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --str-chat__presence-bg-offline: var( + --str-chat__accent-neutral + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__system-caret: var(--str-chat__accent-primary); + --str-chat__badge-bg-default: var(--str-chat__background-core-elevation-3); + --str-chat__badge-bg-primary: var(--str-chat__accent-primary); + --str-chat__badge-bg-neutral: var(--str-chat__accent-neutral); + --str-chat__badge-text: var(--str-chat__text-primary); + --str-chat__badge-text-on-inverse: var(--str-chat__text-on-inverse); + --str-chat__badge-text-on-accent: var(--str-chat__text-on-accent); + --str-chat__badge-border: var(--str-chat__border-core-on-inverse); + --str-chat__control-remove-control-bg: var(--str-chat__background-core-inverse); + --str-chat__control-remove-control-icon: var(--str-chat__text-on-inverse); + --str-chat__control-remove-control-border: var(--str-chat__border-core-on-inverse); + --str-chat__control-progress-bar-fill: var(--str-chat__accent-neutral); + --str-chat__control-progress-bar-track: var(--str-chat__background-core-surface-strong); + --str-chat__control-toggle-switch-bg: var(--str-chat__accent-neutral); + --str-chat__control-toggle-switch-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-toggle-switch-bg-disabled: var( + --str-chat__background-utility-disabled + ); + --str-chat__control-toggle-switch-knob: var(--str-chat__background-core-on-accent); + --str-chat__control-playback-toggle-text: var(--str-chat__text-primary); + --str-chat__control-playback-toggle-border: var(--str-chat__border-core-default); + --str-chat__control-checkbox-border: var(--str-chat__border-core-default); + --str-chat__control-checkbox-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-checkbox-icon: var(--str-chat__text-on-accent); + --str-chat__control-play-button-icon: var(--str-chat__text-on-accent); + --str-chat__control-playback-thumb-bg-default: var( + --str-chat__background-core-on-accent + ); + --str-chat__control-playback-thumb-bg-active: var(--str-chat__accent-primary); + --str-chat__control-playback-thumb-border-active: var( + --str-chat__border-core-on-accent + ); + --str-chat__control-radio-button-border: var(--str-chat__border-core-default); + --str-chat__control-radio-button-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-radio-button-indicator: var(--str-chat__text-on-accent); + --str-chat__control-radio-check-border: var(--str-chat__border-core-default); + --str-chat__control-radio-check-bg-selected: var(--str-chat__accent-primary); + --str-chat__control-radio-check-icon: var(--str-chat__text-on-accent); + --str-chat__control-chip-border: var(--str-chat__border-core-default); + --str-chat__control-chip-text: var(--str-chat__text-primary); + --str-chat__avatar-presence-bg-offline: var( + --str-chat__accent-neutral + ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */ + --str-chat__avatar-presence-border: var( + --str-chat__border-core-on-inverse + ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */ + --str-chat__chat-text-typing-indicator: var( + --str-chat__chat-text-incoming + ); /** Typing indicator chip. */ + --str-chat__chat-poll-progress-track-incoming: var( + --str-chat__control-progress-bar-track + ); + --str-chat__chat-poll-progress-fill-incoming: var( + --str-chat__control-progress-bar-fill + ); } diff --git a/src/styling/variables/font.scss b/src/styling/variables/font.scss index 508fb5a8cb..4b3436dd75 100644 --- a/src/styling/variables/font.scss +++ b/src/styling/variables/font.scss @@ -2,88 +2,88 @@ // ================================================================================= // @mixin text-heading-xs { font: var(--str-chat__font-heading-xs); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-sm { font: var(--str-chat__font-heading-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-md { font: var(--str-chat__font-heading-md); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-heading-lg { font: var(--str-chat__font-heading-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } // BODY // ================================================================================= // @mixin text-body-default { font: var(--str-chat__font-body-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-body-emphasis { font: var(--str-chat__font-body-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-body-link { font: var(--str-chat__font-body-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-body-link-emphasis { font: var(--str-chat__font-body-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // CAPTION // ================================================================================= // @mixin text-caption-default { font: var(--str-chat__font-caption-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-caption-emphasis { font: var(--str-chat__font-caption-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-caption-link { font: var(--str-chat__font-caption-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-caption-link-emphasis { font: var(--str-chat__font-caption-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // METADATA // ================================================================================= // @mixin text-metadata-default { font: var(--str-chat__font-metadata-default); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-metadata-emphasis { font: var(--str-chat__font-metadata-emphasis); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-metadata-link { font: var(--str-chat__font-metadata-link); - color: var(--text-link); + color: var(--str-chat__text-link); } @mixin text-metadata-link-emphasis { font: var(--str-chat__font-metadata-link-emphasis); - color: var(--text-link); + color: var(--str-chat__text-link); } // NUMERIC @@ -96,153 +96,160 @@ // ================================================================================= // @mixin text-numeric-sm { font: var(--str-chat__font-numeric-sm); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-md { font: var(--str-chat__font-numeric-md); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-lg { font: var(--str-chat__font-numeric-lg); - color: var(--text-primary); + color: var(--str-chat__text-primary); } @mixin text-numeric-xl { font: var(--str-chat__font-numeric-xl); - color: var(--text-primary); + color: var(--str-chat__text-primary); } .str-chat { /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */ --str-chat__font-family: - var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont, - Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; + var(--str-chat__typography-font-family-sans), system-ui, -apple-system, + BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, + sans-serif; // HEADING // ================================================================================= // - --str-chat__font-heading-xs: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-heading-xs: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-sm: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-heading-sm: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-md: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-lg) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); + --str-chat__font-heading-md: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-lg) / + var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family); // -------------------- - --str-chat__font-heading-lg: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xl) / var(--typography-line-height-relaxed) - var(--str-chat__font-family); + --str-chat__font-heading-lg: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xl) / + var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family); // -------------------- // BODY // ================================================================================= // - --str-chat__font-body-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-default: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-emphasis: normal var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-link: normal var(--typography-font-weight-regular) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-body-link-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-md) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-body-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-md) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- // CAPTION // ================================================================================= // - --str-chat__font-caption-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-caption-default: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-caption-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-caption-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-caption-link: normal var(--typography-font-weight-regular) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-caption-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- - --str-chat__font-caption-link-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-sm) / var(--typography-line-height-normal) - var(--str-chat__font-family); + --str-chat__font-caption-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-sm) / + var(--str-chat__typography-line-height-normal) var(--str-chat__font-family); // -------------------- // METADATA // ================================================================================= // - --str-chat__font-metadata-default: normal var(--typography-font-weight-regular) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-default: normal + var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-link: normal var(--typography-font-weight-regular) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-link: normal var(--str-chat__typography-font-weight-regular) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- - --str-chat__font-metadata-link-emphasis: normal var(--typography-font-weight-semi-bold) - var(--typography-font-size-xs) / var(--typography-line-height-tight) - var(--str-chat__font-family); + --str-chat__font-metadata-link-emphasis: normal + var(--str-chat__typography-font-weight-semi-bold) + var(--str-chat__typography-font-size-xs) / + var(--str-chat__typography-line-height-tight) var(--str-chat__font-family); // -------------------- // NUMERIC // ================================================================================= // - --str-chat__font-numeric-sm: normal var(--typography-font-weight-bold) - var(--typography-font-size-micro) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-sm: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-micro) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-md: normal var(--typography-font-weight-bold) - var(--typography-font-size-xxs) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-md: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-xxs) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-lg: normal var(--typography-font-weight-bold) - var(--typography-font-size-xs) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-lg: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-xs) / 100% var(--str-chat__font-family); // -------------------- - --str-chat__font-numeric-xl: normal var(--typography-font-weight-bold) - var(--typography-font-size-sm) / 100% var(--str-chat__font-family); + --str-chat__font-numeric-xl: normal var(--str-chat__typography-font-weight-bold) + var(--str-chat__typography-font-size-sm) / 100% var(--str-chat__font-family); // -------------------- } diff --git a/src/styling/variables/shadows.scss b/src/styling/variables/shadows.scss index 2957d4d628..b58653d2fb 100644 --- a/src/styling/variables/shadows.scss +++ b/src/styling/variables/shadows.scss @@ -13,18 +13,18 @@ to create clearer separation from the base surface. .str-chat, .str-chat__theme-light { - --str-chat__box-shadow-1: var(--light-elevation-1); - --str-chat__box-shadow-2: var(--light-elevation-2); - --str-chat__box-shadow-3: var(--light-elevation-3); - --str-chat__box-shadow-4: var(--light-elevation-4); + --str-chat__box-shadow-1: var(--str-chat__light-elevation-1); + --str-chat__box-shadow-2: var(--str-chat__light-elevation-2); + --str-chat__box-shadow-3: var(--str-chat__light-elevation-3); + --str-chat__box-shadow-4: var(--str-chat__light-elevation-4); } .str-chat__theme-dark, .str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse { - --str-chat__box-shadow-1: var(--dark-elevation-1); - --str-chat__box-shadow-2: var(--dark-elevation-2); - --str-chat__box-shadow-3: var(--dark-elevation-3); - --str-chat__box-shadow-4: var(--dark-elevation-4); + --str-chat__box-shadow-1: var(--str-chat__dark-elevation-1); + --str-chat__box-shadow-2: var(--str-chat__dark-elevation-2); + --str-chat__box-shadow-3: var(--str-chat__dark-elevation-3); + --str-chat__box-shadow-4: var(--str-chat__dark-elevation-4); }