Another set of changes

Author: arnautov-anton

src/components/Attachment/styling/Attachment.scss

@@ -2,10 +2,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
-
-  /* The border radius used for the borders of the component */
-  --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--space-2)
+    /* 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(--str-chat__text-color);
@@ -328,7 +327,7 @@
 
   .str-chat__gallery .str-chat__message-attachment--svg-image,
   .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
-    $padding: var(--str-chat__spacing-6);
+    $padding: var(--space-24);
     padding: $padding;
 
     img {
@@ -344,8 +343,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--str-chat__spacing-2);
-    column-gap: var(--str-chat__spacing-4);
+    padding: var(--space-8);
+    column-gap: var(--space-16);
     //margin: var(--str-chat__attachment-margin);
 
     .str-chat__file-icon {
@@ -380,7 +379,7 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-      row-gap: var(--str-chat__spacing-0_5);
+      row-gap: var(--space-2);
       min-width: 0;
       line-height: var(--typography-line-height-tight);
 
@@ -390,7 +389,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        column-gap: var(--str-chat__spacing-2);
+        column-gap: var(--space-8);
         font-weight: var(--typography-font-weight-semi-bold);
         font-size: var(--typography-font-size-sm);
 

src/components/Attachment/styling/Geolocation.scss

@@ -93,7 +93,7 @@
 
       .str-chat__message-attachment-geolocation__status--active-until {
         text-transform: lowercase;
-        font: var(--str-chat__caption-text);
+        font: var(--str-chat__metadata-emphasis-text);
       }
     }
   }

src/components/Attachment/styling/ModalGallery.scss

@@ -23,7 +23,7 @@
       grid-template-rows: 50% 50%;
       overflow: hidden;
       border-radius: var(--radius-lg);
-      gap: var(--str-chat__spacing-0_5);
+      gap: var(--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

src/components/ChannelList/styling/ChannelList.scss

@@ -126,7 +126,7 @@
   .str-chat__channel-list-inner {
     height: 100%;
     overflow: hidden;
-    padding-bottom: var(--str-chat__spacing-2_5);
+    padding-bottom: calc(var(--space-8) + var(--space-2));
 
     .str-chat__channel-list-inner__main {
       height: 100%;
@@ -138,7 +138,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: var(--str-chat__spacing-3);
+        padding: calc(var(--space-8) + var(--space-4));
 
         p {
           color: var(--text-secondary);
@@ -151,7 +151,7 @@
   .str-chat__load-more-button {
     display: flex;
     justify-content: center;
-    margin: var(--str-chat__spacing-2) 0;
+    margin: var(--space-8) 0;
 
     .str-chat__load-more-button__button {
       @include utils.flex-row-center;

src/components/Dialog/styling/Alert.scss

@@ -33,7 +33,7 @@
       }
 
       .str-chat__alert-header__description {
-        font: var(--str-chat__caption-default-tex);
+        font: var(--str-chat__caption-default-text);
       }
     }
   }

src/components/Dialog/styling/Prompt.scss

@@ -25,7 +25,7 @@
     }
 
     .str-chat__prompt__header__description {
-      font: var(--str-chat__body-text);
+      font: var(--str-chat__caption-default-text);
       color: var(--text-secondary);
     }
 

src/components/Dialog/styling/Viewer.scss

@@ -30,7 +30,7 @@
     }
 
     .str-chat__viewer__header__description {
-      font: var(--str-chat__body-text);
+      font: var(--str-chat__caption-default-text);
       color: var(--text-secondary);
     }