Transform same-file CSS variables use to SCSS variables

arnautov-anton · arnautov-anton · commit d8178ffb7970 · 2026-04-17T14:39:34.000+02:00
diff --git a/src/components/AIStateIndicator/styling/AIStateIndicator.scss b/src/components/AIStateIndicator/styling/AIStateIndicator.scss
@@ -1,6 +1,6 @@
 .str-chat__ai-state-indicator-container {
   padding: 0 8px;
-  background-color: var(--background-core-surface);
+  background-color: var(--background-core-surface-default);
 }
 
 .str-chat__ai-state-indicator-text {
diff --git 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);
   }
 }
@@ -54,10 +51,10 @@
 
 .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;
     }
   }
 
diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss
@@ -181,7 +181,7 @@
 }
 
 @mixin channel-loading-shimmer {
-  background-color: var(--background-core-surface);
+  background-color: var(--background-core-surface-default);
   background-image: linear-gradient(
     90deg,
     var(--skeleton-loading-base) 0%,
diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss
@@ -5,9 +5,6 @@
   --str-chat__chat-view-selector-mobile-width: calc(
     var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px
   );
-
-  --str-chat-selector-button-color-default: var(--text-tertiary);
-  --str-chat-selector-button-color-selected: var(--text-primary);
 }
 
 .str-chat__chat-view {
@@ -39,10 +36,7 @@
     }
 
     .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);
@@ -52,17 +46,16 @@
       position: relative;
 
       background: transparent;
-      color: var(--str-chat-selector-button-color-default);
+      color: var(--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(--background-core-surface);
+        color: var(--text-primary);
+        background: var(--background-core-surface-default);
       }
 
-      svg {
-        height: var(--str-chat-icon-height);
-        width: var(--str-chat-icon-height);
+      .str-chat__icon {
+        height: var(--icon-size-md);
+        width: var(--icon-size-md);
       }
 
       .str-chat__button__content {
diff --git a/src/components/DragAndDrop/styling/DragAndDropContainer.scss b/src/components/DragAndDrop/styling/DragAndDropContainer.scss
@@ -1,18 +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;
-
-  /* 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;
@@ -30,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: 2px solid var(--accent-primary);
+    border-block-end: 2px solid var(--accent-primary);
   }
 
   &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
-    border-top: 2px solid var(--accent-primary);
+    border-block-start: 2px solid var(--accent-primary);
   }
 }
diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss
@@ -2,12 +2,13 @@
 // 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(--base-white, #ffffff);
+$switch-field-track-radius: var(--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-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__form__switch-fieldset {
     width: 100%;
@@ -50,18 +51,18 @@
       align-items: center;
       flex-shrink: 0;
       width: 44px;
-      height: var(--str-chat__switch-field__track-height);
+      height: $switch-field-track-height;
       padding: var(--spacing-xxs);
       cursor: pointer;
       background-color: var(--control-toggle-switch-bg);
-      border-radius: var(--str-chat__switch-field__track-radius);
+      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;
       }
 
@@ -70,7 +71,7 @@
         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;
         }
       }
     }
diff --git a/src/components/Loading/styling/LoadingChannels.scss b/src/components/Loading/styling/LoadingChannels.scss
@@ -1,5 +1,5 @@
 @mixin channel-list-item-shimmer {
-  background-color: var(--background-core-surface);
+  background-color: var(--background-core-surface-default);
   background-image: linear-gradient(
     90deg,
     var(--skeleton-loading-base) 0%,
diff --git 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;
@@ -30,8 +32,6 @@
   .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;
-
     .str-chat__live-location-sharing-duration-selector__button {
       @include utils.button-reset;
       align-items: center;
@@ -41,12 +41,12 @@
       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/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
@@ -1,10 +1,11 @@
 @use '../../../styling/utils';
 
+$message-active-background-color: transparent;
+$message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);
+
 .str-chat {
   /* The width/height of the message options button(s) */
   --str-chat__message-options-button-size: var(--size-32);
-  --str-chat__message-active-background-color: transparent;
-  --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);
   /* 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 */
@@ -273,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
@@ -318,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
@@ -534,13 +533,13 @@
 
 /* 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;
   }
 }
 
diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss
@@ -1,7 +1,8 @@
 @use '../../../styling/utils';
 
+$attachment-preview-row-height: 72px;
+
 .str-chat {
-  --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-border-color: var(
@@ -59,8 +60,8 @@
     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;
@@ -82,7 +83,7 @@
     padding: var(--spacing-md);
     padding-inline-end: var(--spacing-sm);
     width: 290px;
-    height: var(--str-chat__attachment-preview-row-height);
+    height: $attachment-preview-row-height;
   }
 
   .str-chat__attachment-preview-audio {
@@ -108,8 +109,8 @@
     border-radius: var(--message-bubble-radius-attachment);
     border: 1px solid var(--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 {
diff --git a/src/components/Notifications/styling/NotificationList.scss b/src/components/Notifications/styling/NotificationList.scss
@@ -1,28 +1,28 @@
+$notification-list-inset: 16px;
+
 .str-chat__notification-list {
-  --str-chat__notification-list-inset: 16px;
-  --str-chat__notification-list-gap: 8px;
   background: transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  inline-size: min(100%, calc(100% - (var(--str-chat__notification-list-inset) * 2)));
+  inline-size: min(100%, calc(100% - ($notification-list-inset * 2)));
   max-width: 100%;
   min-width: 0;
-  max-height: calc(100% - (var(--str-chat__notification-list-inset) * 2));
+  max-height: calc(100% - ($notification-list-inset * 2));
   padding-inline: var(--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/PollOptionList.scss b/src/components/Poll/styling/PollOptionList.scss
@@ -1,6 +1,4 @@
-.str-chat {
-  --str-chat__poll-checkmark-size: 24px;
-}
+$poll-checkmark-size: var(--size-24);
 
 .str-chat__poll-option-list {
   display: flex;
@@ -25,8 +23,8 @@
     .str-chat__checkmark {
       grid-column: 1;
       grid-row: span 2;
-      height: var(--str-chat__poll-checkmark-size);
-      width: var(--str-chat__poll-checkmark-size);
+      height: $poll-checkmark-size;
+      width: $poll-checkmark-size;
       border-radius: var(--radius-max);
       border: 1px solid var(--chat-border-on-chat, var(--chat-border-on-chat-incoming));
     }
diff --git 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};
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`.str-chat__ai-state-indicator-container {`
`2`	`2`	`padding: 0 8px;`
`3`		`- background-color: var(--background-core-surface);`
	`3`	`+ background-color: var(--background-core-surface-default);`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.str-chat__ai-state-indicator-text {`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`@use '../../../styling/utils' as utils;`
`2`	`2`
`3`		`-.str-chat {`
`4`		`- /* The height of GIFs */`
`5`		`- --str-chat__gif-height: 200px;`
`6`		`-}`
	`3`	`+$gif-height: 200px;`
`7`	`4`
`8`	`5`	`.str-chat__message-attachment-giphy {`
`9`	`6`	`position: relative;`
`@@ -26,7 +23,7 @@`
`26`	`23`	`}`
`27`	`24`
`28`	`25`	`.str-chat__image-placeholder {`
`29`		`- height: var(--str-chat__gif-height);`
	`26`	`+ height: $gif-height;`
`30`	`27`	`width: var(--str-chat__attachment-max-width);`
`31`	`28`	`}`
`32`	`29`	`}`
`@@ -54,10 +51,10 @@`
`54`	`51`
`55`	`52`	`.str-chat__message-attachment--giphy--actions {`
`56`	`53`	`.str-chat__message-attachment-giphy {`
`57`		`- height: var(--str-chat__gif-height);`
	`54`	`+ height: $gif-height;`
`58`	`55`
`59`	`56`	`img.str-chat__base-image {`
`60`		`- height: var(--str-chat__gif-height);`
	`57`	`+ height: $gif-height;`
`61`	`58`	`}`
`62`	`59`	`}`
`63`	`60`
Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`@mixin channel-loading-shimmer {`
`184`		`- background-color: var(--background-core-surface);`
	`184`	`+ background-color: var(--background-core-surface-default);`
`185`	`185`	`background-image: linear-gradient(`
`186`	`186`	`90deg,`
`187`	`187`	`var(--skeleton-loading-base) 0%,`