Skip to content

Commit 597bc52

Browse files
arnautov-antonarnautov-anton
committed
Add variable namespacing
1 parent 938411d commit 597bc52

110 files changed

Lines changed: 2144 additions & 2316 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

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

66
.str-chat__ai-state-indicator-text {
7-
color: var(--text-primary);
7+
color: var(--str-chat__text-primary);
88
}

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

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.str-chat {
44
/* The margin applied to every attachment in the attachment list */
5-
--str-chat__attachment-margin: var(--spacing-xs);
5+
--str-chat__attachment-margin: var(--str-chat__spacing-xs);
66
}
77

88
.str-chat__attachment-list {
@@ -17,25 +17,27 @@
1717
display: flex;
1818
flex-direction: column;
1919
align-items: flex-start;
20-
gap: var(--spacing-xs);
20+
gap: var(--str-chat__spacing-xs);
2121
min-width: 0;
2222

2323
background: transparent;
24-
color: var(--text-primary);
24+
color: var(--str-chat__text-primary);
2525

2626
.str-chat__message-attachment--image,
2727
.str-chat__message-attachment--video {
2828
background: transparent;
29-
color: var(--text-primary);
29+
color: var(--str-chat__text-primary);
3030
border-radius: calc(
31-
var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)
31+
var(--str-chat__message-bubble-radius-group-bottom) - var(
32+
--str-chat__attachment-margin
33+
)
3234
);
3335
}
3436

3537
.str-chat__message-attachment {
3638
overflow: hidden;
3739
background-color: var(--chat-bg-attachment);
38-
border-radius: var(--message-bubble-radius-attachment);
40+
border-radius: var(--str-chat__message-bubble-radius-attachment);
3941

4042
// Many classes to increase selector specificity
4143
.str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
@@ -136,7 +138,7 @@
136138

137139
.str-chat__gallery .str-chat__message-attachment--svg-image,
138140
.str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
139-
$padding: var(--space-24);
141+
$padding: var(--str-chat__space-24);
140142
padding: $padding;
141143

142144
img {
@@ -150,8 +152,8 @@
150152
.str-chat__message-attachment-file--item,
151153
.str-chat__message-attachment-audio-widget {
152154
@include utils.flex-row-center;
153-
padding: var(--spacing-sm);
154-
column-gap: var(--spacing-sm);
155+
padding: var(--str-chat__spacing-sm);
156+
column-gap: var(--str-chat__spacing-sm);
155157

156158
.str-chat__message-attachment-file--item__info,
157159
.str-chat__message-attachment-audio-widget--text {
@@ -160,19 +162,19 @@
160162
flex-direction: column;
161163
align-items: flex-start;
162164
justify-content: center;
163-
row-gap: var(--space-2);
165+
row-gap: var(--str-chat__space-2);
164166
min-width: 0;
165-
line-height: var(--typography-line-height-tight);
167+
line-height: var(--str-chat__typography-line-height-tight);
166168

167169
.str-chat__message-attachment-file--item__first-row,
168170
.str-chat__message-attachment-audio-widget--text-first-row {
169171
width: 100%;
170172
display: flex;
171173
align-items: center;
172174
justify-content: space-between;
173-
column-gap: var(--space-8);
174-
font-weight: var(--typography-font-weight-semi-bold);
175-
font-size: var(--typography-font-size-sm);
175+
column-gap: var(--str-chat__space-8);
176+
font-weight: var(--str-chat__typography-font-weight-semi-bold);
177+
font-size: var(--str-chat__typography-font-size-sm);
176178

177179
.str-chat__message-attachment-file--item__name,
178180
.str-chat__message-attachment-audio-widget--title {
@@ -182,24 +184,26 @@
182184
}
183185

184186
.str-chat__message-attachment-file--item__data {
185-
font-size: var(--typography-font-size-xs);
187+
font-size: var(--str-chat__typography-font-size-xs);
186188
}
187189
}
188190
}
189191

190192
.str-chat__message-attachment-file--item {
191193
background: transparent;
192-
color: var(--text-primary);
194+
color: var(--str-chat__text-primary);
193195
border-radius: calc(
194-
var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)
196+
var(--str-chat__message-bubble-radius-group-bottom) - var(
197+
--str-chat__attachment-margin
198+
)
195199
);
196200
}
197201

198202
.str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
199203
}
200204

201205
.str-chat__message-attachment-download-icon {
202-
--str-chat-icon-height: var(--size-16);
206+
--str-chat-icon-height: var(--str-chat__size-16);
203207
}
204208
}
205209

@@ -218,7 +222,7 @@
218222

219223
.str-chat__message-bubble {
220224
border: 1px solid var(--chat-border);
221-
box-shadow: var(--background-core-elevation-0);
225+
box-shadow: var(--str-chat__background-core-elevation-0);
222226
}
223227

224228
.str-chat__message-attachment {
@@ -237,14 +241,14 @@
237241
.str-chat__message--other {
238242
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
239243
.str-chat__message-attachment {
240-
border-end-start-radius: var(--message-bubble-radius-tail);
244+
border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
241245
}
242246
}
243247

244248
.str-chat__message--me {
245249
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
246250
.str-chat__message-attachment {
247-
border-end-end-radius: var(--message-bubble-radius-tail);
251+
border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
248252
}
249253
}
250254
}
@@ -253,7 +257,7 @@
253257
.str-chat__li--middle {
254258
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
255259
.str-chat__message-attachment {
256-
border-radius: var(--message-bubble-radius-group-middle);
260+
border-radius: var(--str-chat__message-bubble-radius-group-middle);
257261
}
258262
}
259263

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.str-chat__message-attachment-actions {
22
background: transparent;
3-
color: var(--button-secondary-text);
3+
color: var(--str-chat__button-secondary-text);
44

55
.str-chat__message-attachment-actions-form {
66
display: flex;
@@ -9,23 +9,24 @@
99

1010
.str-chat__message-attachment-actions-button {
1111
background: transparent;
12-
color: var(--button-secondary-text);
12+
color: var(--str-chat__button-secondary-text);
1313
width: 100%;
14-
padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm);
14+
padding: var(--str-chat__button-padding-y-sm)
15+
var(--str-chat__button-padding-x-with-label-sm);
1516
white-space: nowrap;
1617
border-collapse: collapse;
1718

18-
font-size: var(--typography-font-size-md);
19-
font-weight: var(--typography-font-weight-semi-bold);
20-
line-height: var(--typography-line-height-normal);
19+
font-size: var(--str-chat__typography-font-size-md);
20+
font-weight: var(--str-chat__typography-font-weight-semi-bold);
21+
line-height: var(--str-chat__typography-line-height-normal);
2122

2223
&.str-chat__button {
2324
&:active {
24-
color: var(--accent-primary);
25+
color: var(--str-chat__accent-primary);
2526
}
2627

2728
&:focus-visible {
28-
color: var(--accent-primary);
29+
color: var(--str-chat__accent-primary);
2930
outline: none;
3031
}
3132
}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22

33
.str-chat__message-attachment-audio-widget {
44
background: transparent;
5-
color: var(--text-primary);
5+
color: var(--str-chat__text-primary);
66
border-radius: calc(
7-
var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)
7+
var(--str-chat__message-bubble-radius-group-bottom) - var(
8+
--str-chat__attachment-margin
9+
)
810
);
911
flex: 1 1 auto;
1012
width: 100%;
@@ -19,14 +21,14 @@
1921
min-width: 0;
2022
display: flex;
2123
flex-direction: column;
22-
gap: var(--spacing-xxs);
24+
gap: var(--str-chat__spacing-xxs);
2325
}
2426

2527
.str-chat__message-attachment-audio-widget--text-first-row {
2628
display: flex;
2729
justify-content: space-between;
2830
align-items: start;
29-
gap: var(--spacing-xs);
31+
gap: var(--str-chat__spacing-xs);
3032

3133
svg {
3234
flex-shrink: 0;
@@ -47,14 +49,14 @@
4749
.str-chat__duration-display {
4850
width: 40px;
4951
font: var(--str-chat__font-metadata-default);
50-
color: var(--text-secondary);
52+
color: var(--str-chat__text-secondary);
5153
}
5254

5355
.str-chat__message-attachment-audio-widget--text-second-row {
5456
display: flex;
5557
align-items: center;
5658
width: 100%;
57-
gap: var(--spacing-xs);
59+
gap: var(--str-chat__spacing-xs);
5860

5961
.str-chat__message-attachment-file--item-size {
6062
font: var(--str-chat__font-metadata-default);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: flex;
77
flex-direction: column;
88
width: 100%;
9-
padding: var(--spacing-md);
9+
padding: var(--str-chat__spacing-md);
1010
}
1111
}
1212
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.str-chat__button.str-chat__button--secondary.str-chat__button--outline.str-chat__audio-attachment-download-button {
2-
border-color: var(--chat-border-on-chat-incoming);
2+
border-color: var(--str-chat__chat-border-on-chat-incoming);
33
flex-shrink: 0;
44

55
.str-chat__attachment-download-button__icon {
@@ -10,5 +10,5 @@
1010

1111
.str-chat__message--me
1212
.str-chat__button.str-chat__button--outline.str-chat__audio-attachment-download-button {
13-
border-color: var(--chat-border-on-chat-outgoing);
13+
border-color: var(--str-chat__chat-border-on-chat-outgoing);
1414
}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
background: var(--chat-bg-attachment);
55
color: var(--chat-text);
66
border-radius: calc(
7-
var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)
7+
var(--str-chat__message-bubble-radius-group-bottom) - var(
8+
--str-chat__attachment-margin
9+
)
810
);
911
display: flex;
1012
flex-direction: column;
@@ -26,10 +28,10 @@
2628
min-width: 0;
2729
min-height: 0;
2830
@include utils.flex-col-center;
29-
background-color: var(--background-core-overlay-light);
31+
background-color: var(--str-chat__background-core-overlay-light);
3032

3133
.str-chat__icon {
32-
fill: var(--accent-neutral);
34+
fill: var(--str-chat__accent-neutral);
3335
height: 40px;
3436
width: 40px;
3537
}
@@ -40,15 +42,15 @@
4042
inset-block: 0.5rem;
4143
height: 12px;
4244
width: 12px;
43-
color: var(--accent-neutral);
45+
color: var(--str-chat__accent-neutral);
4446
}
4547
}
4648

4749
.str-chat__message-attachment-geolocation__status {
4850
display: flex;
4951
justify-content: center;
5052
padding: 0.5rem;
51-
background-color: var(--background-core-surface-subtle);
53+
background-color: var(--str-chat__background-core-surface-subtle);
5254
font: var(--str-chat__font-caption-default);
5355

5456
.str-chat__message-attachment-geolocation__status--active {
@@ -58,7 +60,7 @@
5860
gap: 0.375rem;
5961

6062
.str-chat__message-attachment-geolocation__status--active-status {
61-
color: var(--accent-success);
63+
color: var(--str-chat__accent-success);
6264
}
6365

6466
.str-chat__message-attachment-geolocation__status--active-until {

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,21 @@ $gif-height: 200px;
3131
.str-chat__giphy-badge {
3232
display: inline-flex;
3333
height: 24px;
34-
padding: var(--spacing-xxxs, 2px) var(--spacing-xs, 8px);
34+
padding: var(--str-chat__spacing-xxxs, 2px) var(--str-chat__spacing-xs, 8px);
3535
justify-content: center;
3636
align-items: center;
37-
gap: var(--spacing-xxs, 4px);
37+
gap: var(--str-chat__spacing-xxs, 4px);
3838
position: absolute;
3939
inset-inline-start: 8px;
4040
bottom: 8px;
4141

42-
border-radius: var(--radius-lg, 12px);
43-
background-color: var(--badge-bg-overlay, rgba(0, 0, 0, 0.75));
44-
color: var(--badge-text-on-accent, #fff);
42+
border-radius: var(--str-chat__radius-lg, 12px);
43+
background-color: var(--str-chat__badge-bg-overlay, rgba(0, 0, 0, 0.75));
44+
color: var(--str-chat__badge-text-on-accent, #fff);
4545

46-
font-size: var(--typography-font-size-xs, 12px);
47-
font-weight: var(--typography-font-weight-semi-bold, 600);
48-
line-height: var(--typography-line-height-tight, 16px);
46+
font-size: var(--str-chat__typography-font-size-xs, 12px);
47+
font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
48+
line-height: var(--str-chat__typography-line-height-tight, 16px);
4949
text-transform: uppercase;
5050
}
5151

@@ -60,14 +60,14 @@ $gif-height: 200px;
6060

6161
.str-chat__visibility-disclaimer {
6262
display: flex;
63-
padding: var(--spacing-sm, 12px);
63+
padding: var(--str-chat__spacing-sm, 12px);
6464
align-items: center;
65-
gap: var(--spacing-xs, 8px);
65+
gap: var(--str-chat__spacing-xs, 8px);
6666
align-self: stretch;
6767

6868
color: var(--chat-text);
69-
font-size: var(--typography-font-size-sm);
70-
font-weight: var(--typography-font-weight-semi-bold);
71-
line-height: var(--typography-line-height-tight);
69+
font-size: var(--str-chat__typography-font-size-sm);
70+
font-weight: var(--str-chat__typography-font-weight-semi-bold);
71+
line-height: var(--str-chat__typography-line-height-tight);
7272
}
7373
}

0 commit comments

Comments
 (0)