Skip to content

Commit 8dd71b3

Browse files
arnautov-antonarnautov-anton
committed
Transform same-file CSS variables use to SCSS variables
1 parent 69963c1 commit 8dd71b3

15 files changed

Lines changed: 108 additions & 140 deletions

File tree

‎src/components/AIStateIndicator/styling/AIStateIndicator.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.str-chat__ai-state-indicator-container {
22
padding: 0 8px;
3-
background-color: var(--background-core-surface);
3+
background-color: var(--background-core-surface-default);
44
}
55

66
.str-chat__ai-state-indicator-text {

‎src/components/Attachment/styling/Giphy.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
@use '../../../styling/utils' as utils;
22

3-
.str-chat {
4-
/* The height of GIFs */
5-
--str-chat__gif-height: 200px;
6-
}
3+
$gif-height: 200px;
74

85
.str-chat__message-attachment-giphy {
96
position: relative;
@@ -26,7 +23,7 @@
2623
}
2724

2825
.str-chat__image-placeholder {
29-
height: var(--str-chat__gif-height);
26+
height: $gif-height;
3027
width: var(--str-chat__attachment-max-width);
3128
}
3229
}
@@ -54,10 +51,10 @@
5451

5552
.str-chat__message-attachment--giphy--actions {
5653
.str-chat__message-attachment-giphy {
57-
height: var(--str-chat__gif-height);
54+
height: $gif-height;
5855

5956
img.str-chat__base-image {
60-
height: var(--str-chat__gif-height);
57+
height: $gif-height;
6158
}
6259
}
6360

‎src/components/Channel/styling/Channel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
}
182182

183183
@mixin channel-loading-shimmer {
184-
background-color: var(--background-core-surface);
184+
background-color: var(--background-core-surface-default);
185185
background-image: linear-gradient(
186186
90deg,
187187
var(--skeleton-loading-base) 0%,

‎src/components/ChatView/styling/ChatView.scss‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
$selector-button-color-default: var(--text-tertiary);
2+
$selector-button-color-selected: var(--text-primary);
3+
14
.str-chat {
25
--str-chat__chat-view-selector-transition-duration: 180ms;
36
--str-chat__chat-view-selector-transition-easing: ease;
47
--str-chat__chat-view-selector-transition-offset: 8px;
58
--str-chat__chat-view-selector-mobile-width: calc(
69
var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px
710
);
8-
9-
--str-chat-selector-button-color-default: var(--text-tertiary);
10-
--str-chat-selector-button-color-selected: var(--text-primary);
1111
}
1212

1313
.str-chat__chat-view {
@@ -39,10 +39,7 @@
3939
}
4040

4141
.str-chat__chat-view__selector-button {
42-
--str-chat-icon-height: 20px;
43-
--str-chat-icon-width: 20px;
4442
--str-chat-unread-count-badge-absolute-offset-vertical: 25%;
45-
--str-chat-icon-color: var(--str-chat-selector-button-color-default);
4643

4744
gap: 4px;
4845
padding: var(--spacing-xs);
@@ -52,17 +49,16 @@
5249
position: relative;
5350

5451
background: transparent;
55-
color: var(--str-chat-selector-button-color-default);
52+
color: $selector-button-color-default;
5653

5754
&[aria-selected='true'] {
58-
--str-chat-icon-color: var(--str-chat-selector-button-color-selected);
59-
color: var(--str-chat-selector-button-color-selected);
60-
background: var(--background-core-surface);
55+
color: $selector-button-color-selected;
56+
background: var(--background-core-surface-default);
6157
}
6258

63-
svg {
64-
height: var(--str-chat-icon-height);
65-
width: var(--str-chat-icon-height);
59+
.str-chat__icon {
60+
height: var(--icon-size-md);
61+
width: var(--icon-size-md);
6662
}
6763

6864
.str-chat__button__content {

‎src/components/Dialog/styling/ContextMenu.scss‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@use '../../../styling/utils';
22

3+
$menu-roll-duration: 170ms;
4+
$menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
5+
36
@keyframes str-chat-context-menu-roll-in-from-left {
47
from {
58
opacity: 0.12;
@@ -74,8 +77,6 @@
7477

7578
.str-chat {
7679
--str-chat__dialog-menu-button-hover-background-color: var(--background-utility-hover);
77-
--str-chat__menu-roll-duration: 170ms;
78-
--str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
7980

8081
.str-chat__context-menu {
8182
background: var(--background-core-elevation-2);
@@ -236,58 +237,52 @@
236237
}
237238

238239
[data-str-chat-placement^='right'] > .str-chat__context-menu {
239-
animation: str-chat-context-menu-roll-in-from-left
240-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
240+
animation: str-chat-context-menu-roll-in-from-left $menu-roll-duration $menu-roll-ease;
241241
transform-origin: left center;
242242
}
243243

244244
[data-str-chat-placement^='left'] > .str-chat__context-menu {
245-
animation: str-chat-context-menu-roll-in-from-right
246-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
245+
animation: str-chat-context-menu-roll-in-from-right $menu-roll-duration
246+
$menu-roll-ease;
247247
transform-origin: right center;
248248
}
249249

250250
[data-str-chat-placement^='bottom'] > .str-chat__context-menu {
251-
animation: str-chat-context-menu-roll-in-from-bottom
252-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
251+
animation: str-chat-context-menu-roll-in-from-bottom $menu-roll-duration
252+
$menu-roll-ease;
253253
transform-origin: center top;
254254
}
255255

256256
[data-str-chat-placement^='top'] > .str-chat__context-menu {
257-
animation: str-chat-context-menu-roll-in-from-top
258-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
257+
animation: str-chat-context-menu-roll-in-from-top $menu-roll-duration $menu-roll-ease;
259258
transform-origin: center bottom;
260259
}
261260

262261
[data-str-chat-dialog-state='closing'][data-str-chat-placement^='right']
263262
> .str-chat__context-menu {
264-
animation: str-chat-context-menu-roll-in-from-left
265-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse
266-
forwards;
263+
animation: str-chat-context-menu-roll-in-from-left $menu-roll-duration $menu-roll-ease
264+
reverse forwards;
267265
transform-origin: left center;
268266
}
269267

270268
[data-str-chat-dialog-state='closing'][data-str-chat-placement^='left']
271269
> .str-chat__context-menu {
272-
animation: str-chat-context-menu-roll-in-from-right
273-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse
274-
forwards;
270+
animation: str-chat-context-menu-roll-in-from-right $menu-roll-duration
271+
$menu-roll-ease reverse forwards;
275272
transform-origin: right center;
276273
}
277274

278275
[data-str-chat-dialog-state='closing'][data-str-chat-placement^='bottom']
279276
> .str-chat__context-menu {
280-
animation: str-chat-context-menu-roll-in-from-bottom
281-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse
282-
forwards;
277+
animation: str-chat-context-menu-roll-in-from-bottom $menu-roll-duration
278+
$menu-roll-ease reverse forwards;
283279
transform-origin: center top;
284280
}
285281

286282
[data-str-chat-dialog-state='closing'][data-str-chat-placement^='top']
287283
> .str-chat__context-menu {
288-
animation: str-chat-context-menu-roll-in-from-top
289-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse
290-
forwards;
284+
animation: str-chat-context-menu-roll-in-from-top $menu-roll-duration $menu-roll-ease
285+
reverse forwards;
291286
transform-origin: center bottom;
292287
}
293288

@@ -297,45 +292,42 @@
297292
[data-str-chat-roll-from]
298293
)[data-str-chat-roll-axis='x'][data-str-chat-placement^='left']
299294
> .str-chat__context-menu {
300-
animation: str-chat-context-menu-roll-in-from-right
301-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
295+
animation: str-chat-context-menu-roll-in-from-right $menu-roll-duration
296+
$menu-roll-ease;
302297
transform-origin: right center;
303298
}
304299

305300
.str-chat__context-menu__submenu-container:not(
306301
[data-str-chat-roll-from]
307302
)[data-str-chat-roll-axis='x']:not([data-str-chat-placement^='left'])
308303
> .str-chat__context-menu {
309-
animation: str-chat-context-menu-roll-in-from-left
310-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
304+
animation: str-chat-context-menu-roll-in-from-left $menu-roll-duration $menu-roll-ease;
311305
transform-origin: left center;
312306
}
313307

314308
.str-chat__context-menu__submenu-container[data-str-chat-roll-from='left']
315309
> .str-chat__context-menu {
316-
animation: str-chat-context-menu-roll-in-from-left
317-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
310+
animation: str-chat-context-menu-roll-in-from-left $menu-roll-duration $menu-roll-ease;
318311
transform-origin: left center;
319312
}
320313

321314
.str-chat__context-menu__submenu-container[data-str-chat-roll-from='right']
322315
> .str-chat__context-menu {
323-
animation: str-chat-context-menu-roll-in-from-right
324-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
316+
animation: str-chat-context-menu-roll-in-from-right $menu-roll-duration
317+
$menu-roll-ease;
325318
transform-origin: right center;
326319
}
327320

328321
.str-chat__context-menu__submenu-container[data-str-chat-roll-from='top']
329322
> .str-chat__context-menu {
330-
animation: str-chat-context-menu-roll-in-from-top
331-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
323+
animation: str-chat-context-menu-roll-in-from-top $menu-roll-duration $menu-roll-ease;
332324
transform-origin: center top;
333325
}
334326

335327
.str-chat__context-menu__submenu-container[data-str-chat-roll-from='bottom']
336328
> .str-chat__context-menu {
337-
animation: str-chat-context-menu-roll-in-from-bottom
338-
var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
329+
animation: str-chat-context-menu-roll-in-from-bottom $menu-roll-duration
330+
$menu-roll-ease;
339331
transform-origin: center bottom;
340332
}
341333

‎src/components/DragAndDrop/styling/DragAndDropContainer.scss‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
// Ported from stream-chat-css DragAndDropContainer (layout + theme)
22

3-
.str-chat {
4-
/* Top border of the component */
5-
--str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
6-
7-
/* Bottom border of the component */
8-
--str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
9-
10-
/* Left (right in RTL layout) border of the component on dragover */
11-
--str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
12-
13-
/* Right (left in RTL layout) border of the component on dragover */
14-
--str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
15-
}
3+
$drag-and-drop-container-border-block-start: 2px solid transparent;
164

175
.str-chat__drag-and-drop-container--dragging {
186
cursor: grabbing;
@@ -30,14 +18,14 @@
3018
display: flex;
3119
width: 100%;
3220
padding-block: 0.25rem;
33-
border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
34-
border-top: var(--str-chat__drag-and-drop-container-border-block-start);
21+
border-block-start: $drag-and-drop-container-border-block-start;
22+
border-block-end: $drag-and-drop-container-border-block-start;
3523

3624
&.str-chat__drag-and-drop-container__item--dragged-over-from-top {
37-
border-bottom: 2px solid var(--accent-primary);
25+
border-block-end: 2px solid var(--accent-primary);
3826
}
3927

4028
&.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
41-
border-top: 2px solid var(--accent-primary);
29+
border-block-start: 2px solid var(--accent-primary);
4230
}
4331
}

‎src/components/Form/styling/SwitchField.scss‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
// Single row: [label / title+description] [optional expanded content] [toggle]
33
// CSS variables aligned with Figma tokens; fallbacks from get_variable_defs.
44

5+
$switch-field-track-height: 24px;
6+
$switch-field-track-thumb-bg: var(--base-white, #ffffff);
7+
$switch-field-track-radius: var(--button-radius-full, 9999px);
8+
59
.str-chat {
610
--str-chat__switch-field-background-color: var(--background-core-surface-card);
711
--str-chat__switch-field-border-radius: var(--radius-md);
8-
--str-chat__switch-field__track-thumb-bg: var(--base-white, #ffffff);
9-
--str-chat__switch-field__track-height: 24px;
10-
--str-chat__switch-field__track-radius: var(--button-radius-full, 9999px);
1112

1213
.str-chat__form__switch-fieldset {
1314
width: 100%;
@@ -50,18 +51,18 @@
5051
align-items: center;
5152
flex-shrink: 0;
5253
width: 44px;
53-
height: var(--str-chat__switch-field__track-height);
54+
height: $switch-field-track-height;
5455
padding: var(--spacing-xxs);
5556
cursor: pointer;
5657
background-color: var(--control-toggle-switch-bg);
57-
border-radius: var(--str-chat__switch-field__track-radius);
58+
border-radius: $switch-field-track-radius;
5859
transition: background-color 0.2s ease;
5960

6061
&-handle {
61-
width: calc(var(--str-chat__switch-field__track-height) - 8px);
62-
height: calc(var(--str-chat__switch-field__track-height) - 8px);
63-
border-radius: var(--str-chat__switch-field__track-radius);
64-
background-color: var(--str-chat__switch-field__track-thumb-bg);
62+
width: calc($switch-field-track-height - 8px);
63+
height: calc($switch-field-track-height - 8px);
64+
border-radius: $switch-field-track-radius;
65+
background-color: $switch-field-track-thumb-bg;
6566
transition: transform 0.2s ease;
6667
}
6768

@@ -70,7 +71,7 @@
7071
justify-content: flex-end;
7172

7273
.str-chat__form__switch-field__switch-handle {
73-
background-color: var(--str-chat__switch-field__track-thumb-bg);
74+
background-color: $switch-field-track-thumb-bg;
7475
}
7576
}
7677
}

‎src/components/Loading/styling/LoadingChannels.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@mixin channel-list-item-shimmer {
2-
background-color: var(--background-core-surface);
2+
background-color: var(--background-core-surface-default);
33
background-image: linear-gradient(
44
90deg,
55
var(--skeleton-loading-base) 0%,

‎src/components/Location/styling/ShareLocationDialog.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use '../../../styling/utils';
22

3+
$duration-selector-min-width: 120px;
4+
35
.str-chat__share-location-dialog {
46
width: 100%;
57
max-width: 520px;
@@ -30,8 +32,6 @@
3032
.str-chat__live-location-sharing-duration-selector {
3133
padding-inline: calc(var(--spacing-md) - var(--spacing-xs));
3234
padding-bottom: var(--spacing-xs);
33-
--str-chat__duration-selector-min-width: 120px;
34-
3535
.str-chat__live-location-sharing-duration-selector__button {
3636
@include utils.button-reset;
3737
align-items: center;
@@ -41,12 +41,12 @@
4141
cursor: pointer;
4242
display: flex;
4343
justify-content: space-between;
44-
min-width: var(--str-chat__duration-selector-min-width);
44+
min-width: $duration-selector-min-width;
4545
font: var(--str-chat__font-caption-default);
4646
}
4747

4848
.str-chat__context-menu {
49-
min-width: var(--str-chat__duration-selector-min-width);
49+
min-width: $duration-selector-min-width;
5050
}
5151
.str-chat__live-location-sharing-duration-option {
5252
width: 100%;

0 commit comments

Comments
 (0)