chore: post-review (post-cleanup) fixes (#3123)

Author: arnautov-anton

src/components/Channel/styling/Channel.scss

@@ -186,7 +186,7 @@
   --str-chat__channel-color: var(--text-primary);
 
   /* The background color of the component */
-  --str-chat__channel-background-color: transparent;
+  --str-chat__channel-background-color: var(--background-core-app);
 
   /* Box shadow applied to the component */
   --str-chat__channel-box-shadow: none;

src/components/ChannelHeader/styling/ChannelHeader.scss

@@ -42,6 +42,7 @@
 
   .str-chat__channel-header__data {
     @include utils.header-text-layout;
+    width: unset;
   }
 
   .str-chat__channel-header__end {

src/components/ChatView/styling/ChatView.scss

@@ -20,7 +20,7 @@
   height: 100%;
   min-height: 0;
   position: relative;
-  background-color: var(--str-chat__background-color);
+  background-color: var(--background-core-app);
 
   .str-chat__chat-view__selector {
     display: flex;

src/components/Form/styling/SwitchField.scss

@@ -3,10 +3,7 @@
 // CSS variables aligned with Figma tokens; fallbacks from get_variable_defs.
 
 .str-chat {
-  --str-chat__switch-field-background-color: var(
-    --input-cards-bg,
-    var(--background-core-surface-subtle)
-  );
+  --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,

src/components/MessageComposer/styling/CommandChip.scss

@@ -8,8 +8,8 @@
   gap: var(--spacing-xxs);
   border-radius: var(--radius-max);
 
-  color: var(--text-inverse);
-  background-color: var(--background-core-inverse, var(--slate-900));
+  color: var(--text-on-inverse);
+  background-color: var(--background-core-inverse);
   text-transform: uppercase;
   font: var(--str-chat__font-metadata-emphasis);
 
@@ -19,6 +19,6 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    color: var(--text-inverse);
+    color: inherit;
   }
 }

src/components/Reactions/styling/MessageReactionsDetail.scss

@@ -66,6 +66,8 @@
         @include common.reaction-button;
         box-shadow: unset;
         min-width: var(--size-48);
+        background: none;
+        border: 1px solid var(--control-chip-border);
 
         .str-chat__message-reactions-detail__reaction-type-list-item-icon {
           font-family: system-ui;

src/components/Reactions/styling/common.scss

@@ -64,7 +64,7 @@
     background: linear-gradient(
       to bottom,
       transparent 5%,
-      var(--background-core-elevation-0) 95%
+      var(--background-core-elevation-2) 95%
     );
   }
 
@@ -77,7 +77,7 @@
     background: linear-gradient(
       to top,
       transparent 5%,
-      var(--background-core-elevation-0) 95%
+      var(--background-core-elevation-2) 95%
     );
   }
 }