chore: various styling fixes (#3111)

- fix Gallery paddings
- fix prompt icon size
- adjust ChannelListItemActionButtons

Author: arnautov-anton

examples/vite/src/index.scss

@@ -143,6 +143,7 @@ body {
     min-width: 1px;
     height: 100%;
     z-index: 1;
+    background: var(--border-core-default);
   }
 
   .app-chat-resize-handle__hitbox {
@@ -164,7 +165,7 @@ body {
   .app-chat-resize-handle__line {
     width: 1px;
     height: 100%;
-    background: var(--str-chat__surface-color);
+    background: transparent;
   }
 
   .app-chat-resize-handle--thread {

src/components/AIStateIndicator/styling/AIStateIndicator.scss

@@ -1,8 +1,8 @@
 .str-chat__ai-state-indicator-container {
   padding: 0 8px;
-  background-color: var(--str-chat__grey300);
+  background-color: var(--background-core-surface);
 }
 
 .str-chat__ai-state-indicator-text {
-  color: var(--str-chat__text-color);
+  color: var(--text-primary);
 }

src/components/Attachment/styling/Attachment.scss

@@ -7,7 +7,7 @@
   --str-chat__attachment-list-border-radius: 0;
 
   /* The text/icon color of the component */
-  --str-chat__attachment-list-color: var(--str-chat__text-color);
+  --str-chat__attachment-list-color: var(--text-primary);
 
   /* The background color of the component */
   --str-chat__attachment-list-background-color: transparent;
@@ -33,7 +33,7 @@
   );
 
   /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
-  --str-chat__image-attachment-color: var(--str-chat__text-color);
+  --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;
@@ -59,7 +59,7 @@
   );
 
   /* The text/icon color of image gallery attachments */
-  --str-chat__image-gallery-attachment-color: var(--str-chat__text-color);
+  --str-chat__image-gallery-attachment-color: var(--text-primary);
 
   /* The background color of image gallery attachments */
   --str-chat__image-gallery-attachment-background-color: transparent;
@@ -79,51 +79,13 @@
   /* Box shadow applied to image gallery attachments */
   --str-chat__image-gallery-attachment-box-shadow: none;
 
-  /* Overlay color applied to image gallery attachments */
-  --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color);
-
-  /* Text colors used on overlay applied to image gallery attachments */
-  --str-chat__image-gallery-attachment-overlay-text-color: var(
-    --str-chat__secondary-overlay-text-color
-  );
-
-  /* The border radius used for the borders of card attachments */
-  --str-chat__card-attachment-border-radius: 0;
-
-  /* The text/icon color of card attachments */
-  --str-chat__card-attachment-color: var(--str-chat__text-color);
-
-  /* The text color of links inside card attachments */
-  --str-chat__card-attachment-link-color: var(--str-chat__primary-color);
-
-  /* The background color of card attachments */
-  --str-chat__card-attachment-background-color: transparent;
-
-  /* Top border of card attachments */
-  --str-chat__card-attachment-border-block-start: none;
-
-  /* Bottom border of card attachments */
-  --str-chat__card-attachment-border-block-end: none;
-
-  /* Left (right in RTL layout) border of card attachments */
-  --str-chat__card-attachment-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of card attachments */
-  --str-chat__card-attachment-border-inline-end: none;
-
-  /* Box shadow applied to card attachments */
-  --str-chat__card-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(--str-chat__text-color);
-
-  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
-  --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__file-attachment-color: var(--text-primary);
 
   /* The background color of file attachments */
   --str-chat__file-attachment-background-color: transparent;
@@ -142,42 +104,6 @@
 
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
-
-  /* Border radius applied to the play / pause button of audio widget */
-  --str-chat__audio-attachment-controls-button-border-radius: var(
-    --str-chat__border-radius-circle
-  );
-
-  /* Text color applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color);
-
-  /* Background color applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-background-color: var(
-    --str-chat__secondary-background-color
-  );
-
-  /* Background color applied to audio widget's play / pause button when in pressed (active) state */
-  --str-chat__audio-attachment-controls-button-pressed-background-color: var(
-    --str-chat__surface-color
-  );
-
-  /* Top border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-block-start: none;
-
-  /* Bottom border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-block-end: none;
-
-  /* Left (right in RTL layout) border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-inline-end: none;
-
-  // todo: we need to solve whether we want to keep the CSS variables. E.g. --str-chat__circle-fab-box-shadow is not declared.
-  /* Box shadow applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-box-shadow: var(
-    --str-chat__circle-fab-box-shadow
-  );
 }
 
 .str-chat__attachment-list {
@@ -204,12 +130,12 @@
 
   .str-chat__message-attachment {
     overflow: hidden;
-    background-color: var(--chat-bg-attachment-incoming);
+    background-color: var(--chat-bg-attachment);
     border-radius: var(--message-bubble-radius-attachment);
 
     // Many classes to increase selector specificity
     .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
-      border-color: var(--chat-border-on-chat-incoming);
+      border-color: var(--chat-border-on-chat);
       background-color: transparent;
     }
   }
@@ -365,7 +291,7 @@
   }
 
   .str-chat__message-attachment-download-icon {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
+    --str-chat-icon-height: var(--size-16);
   }
 }
 
@@ -383,39 +309,19 @@
   }
 
   .str-chat__message-bubble {
-    border: 1px solid var(--chat-border-incoming);
+    border: 1px solid var(--chat-border);
     box-shadow: var(--background-core-elevation-0);
   }
 
   .str-chat__message-attachment {
-    background-color: var(--chat-bg-incoming);
+    background-color: var(--chat-bg);
   }
 }
 
 .str-chat__message--me {
   .str-chat__attachment-list {
     align-items: flex-end;
   }
-
-  .str-chat__message-attachment {
-    background-color: var(--chat-bg-attachment-outgoing);
-    border-radius: var(--message-bubble-radius-attachment);
-
-    .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
-      border-color: var(--chat-border-on-chat-outgoing);
-    }
-  }
-
-  &.str-chat__message--has-single-attachment.str-chat__message--has-no-text {
-    .str-chat__message-bubble {
-      border: 1px solid var(--chat-border-outgoing);
-      box-shadow: var(--background-core-elevation-0);
-    }
-
-    .str-chat__message-attachment {
-      background-color: var(--chat-bg-outgoing);
-    }
-  }
 }
 
 .str-chat__li--single,

src/components/Attachment/styling/AttachmentActions.scss

@@ -50,10 +50,10 @@
   --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(--str-chat__primary-color);
+  --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(--str-chat__primary-color);
+  --str-chat__attachment-action-focus-color: var(--accent-primary);
 }
 
 .str-chat__message-attachment-actions {

src/components/Attachment/styling/Audio.scss

@@ -7,12 +7,7 @@
   );
 
   /* Text color used in audio widget */
-  --str-chat__audio-attachment-widget-color: var(--str-chat__text-color);
-
-  /* Border radius applied audio widget */
-  --str-chat__audio-attachment-widget-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --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;
@@ -52,7 +47,7 @@
   }
 
   .str-chat__message-attachment-audio-widget--progress-track {
-    //max-width: calc(var(--str-chat__spacing-px) * 120);
+    //max-width: 120px
   }
 
   .str-chat__message-attachment-audio-widget--text-first-row {
@@ -67,7 +62,7 @@
   }
 
   .str-chat__message-attachment-audio-widget--title {
-    font: var(--str-chat__caption-emphasis-text);
+    font: var(--str-chat__font-caption-emphasis);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -79,7 +74,7 @@
 
   .str-chat__duration-display {
     width: 40px;
-    font: var(--str-chat__metadata-default-text);
+    font: var(--str-chat__font-metadata-default);
     color: var(--text-secondary);
   }
 
@@ -90,7 +85,6 @@
     gap: var(--spacing-xs);
 
     .str-chat__message-attachment-file--item-size {
-      line-height: calc(var(--str-chat__spacing-px) * 14);
       font: var(--str-chat__font-metadata-default);
     }
   }

src/components/Attachment/styling/Geolocation.scss

@@ -7,17 +7,10 @@
   );
 
   /* The text/icon color of geolocation attachments */
-  --str-chat__geolocation-attachment-color: var(--str-chat__text-color);
-
-  /* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */
-  --str-chat__geolocation-attachment-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__geolocation-attachment-color: var(--chat-text);
 
   /* The background color of geolocation attachments */
-  --str-chat__geolocation-attachment-background-color: var(
-    --str-chat__secondary-background-color
-  );
+  --str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment);
 
   /* Top border of geolocation attachments */
   --str-chat__geolocation-attachment-border-block-start: none;
@@ -79,8 +72,8 @@
     display: flex;
     justify-content: center;
     padding: 0.5rem;
-    background-color: var(--str-chat__tertiary-surface-color);
-    font: var(--str-chat__caption-default-text);
+    background-color: var(--background-core-surface-subtle);
+    font: var(--str-chat__font-caption-default);
 
     .str-chat__message-attachment-geolocation__status--active {
       display: flex;
@@ -89,12 +82,12 @@
       gap: 0.375rem;
 
       .str-chat__message-attachment-geolocation__status--active-status {
-        color: var(--str-chat__info-color);
+        color: var(--accent-success);
       }
 
       .str-chat__message-attachment-geolocation__status--active-until {
         text-transform: lowercase;
-        font: var(--str-chat__metadata-emphasis-text);
+        font: var(--str-chat__font-metadata-emphasis);
       }
     }
   }

src/components/Attachment/styling/Giphy.scss

@@ -2,7 +2,7 @@
 
 .str-chat {
   /* The height of GIFs */
-  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+  --str-chat__gif-height: 200px;
 }
 
 .str-chat__message-attachment-giphy {
@@ -68,7 +68,7 @@
     gap: var(--spacing-xs, 8px);
     align-self: stretch;
 
-    color: var(--chat-text-outgoing);
+    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);

src/components/Attachment/styling/LinkPreview.scss

@@ -20,7 +20,7 @@
   line-height: var(--typography-line-height-tight);
 
   * {
-    color: var(--chat-text-incoming);
+    color: var(--chat-text);
   }
 
   .str-chat__message-attachment-card--header {

src/components/Attachment/styling/ModalGallery.scss

@@ -3,15 +3,11 @@
 .str-chat__message {
   --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
   --str-chat__modal-gallery-load-failed-indicator-color: var(--text-inverse);
-  --str-chat__modal-gallery-loading-background: var(--chat-bg-incoming);
+  --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__message--me {
-  --str-chat__modal-gallery-loading-background: var(--chat-bg-outgoing);
-}
-
 .str-chat__attachment-list {
   .str-chat__message-attachment--gallery {
     $max-width: var(--str-chat__attachment-max-width);

src/components/Attachment/styling/UnsupportedAttachment.scss

@@ -8,12 +8,7 @@
   );
 
   /* The text/icon color of file attachments */
-  --str-chat__unsupported-attachment-color: var(--str-chat__text-color);
-
-  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
-  --str-chat__unsupported-attachment-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__unsupported-attachment-color: var(--text-primary);
 
   /* The background color of file attachments */
   --str-chat__unsupported-attachment-background-color: transparent;
@@ -43,8 +38,8 @@
   column-gap: var(--spacing-xs);
 
   .str-chat__icon {
-    height: calc(var(--str-chat__spacing-px) * 20);
-    width: calc(var(--str-chat__spacing-px) * 20);
+    height: var(--size-20);
+    width: var(--size-20);
   }
 
   .str-chat__message-attachment-unsupported__metadata {