Skip to content

Commit 1a2a61f

Browse files
arnautov-antonarnautov-anton
authored
fix: drop unused/outdated CSS variables (#3128)
1 parent 4c5935f commit 1a2a61f

File tree

112 files changed

+2307
-3327
lines changed

Some content is hidden

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

112 files changed

+2307
-3327
lines changed

‎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);
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: 33 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -2,108 +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);
6-
/* The border radius used for the borders of the component */
7-
--str-chat__attachment-list-border-radius: 0;
8-
9-
/* The text/icon color of the component */
10-
--str-chat__attachment-list-color: var(--text-primary);
11-
12-
/* The background color of the component */
13-
--str-chat__attachment-list-background-color: transparent;
14-
15-
/* Top border of the component */
16-
--str-chat__attachment-list-border-block-start: none;
17-
18-
/* Bottom border of the component */
19-
--str-chat__attachment-list-border-block-end: none;
20-
21-
/* Left (right in RTL layout) border of the component */
22-
--str-chat__attachment-list-border-inline-start: none;
23-
24-
/* Right (left in RTL layout) border of the component */
25-
--str-chat__attachment-list-border-inline-end: none;
26-
27-
/* Box shadow applied to the component */
28-
--str-chat__attachment-list-box-shadow: none;
29-
30-
/* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
31-
--str-chat__image-attachment-border-radius: calc(
32-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
33-
);
34-
35-
/* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
36-
--str-chat__image-attachment-color: var(--text-primary);
37-
38-
/* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
39-
--str-chat__image-attachment-background-color: transparent;
40-
41-
/* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
42-
--str-chat__image-attachment-border-block-start: none;
43-
44-
/* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
45-
--str-chat__image-attachment-border-block-end: none;
46-
47-
/* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
48-
--str-chat__image-attachment-border-inline-start: none;
49-
50-
/* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
51-
--str-chat__image-attachment-border-inline-end: none;
52-
53-
/* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
54-
--str-chat__image-attachment-box-shadow: none;
55-
56-
/* The border radius used for the borders of image gallery attachments */
57-
--str-chat__image-gallery-attachment-border-radius: calc(
58-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
59-
);
60-
61-
/* The text/icon color of image gallery attachments */
62-
--str-chat__image-gallery-attachment-color: var(--text-primary);
63-
64-
/* The background color of image gallery attachments */
65-
--str-chat__image-gallery-attachment-background-color: transparent;
66-
67-
/* Top border of image gallery attachments */
68-
--str-chat__image-gallery-attachment-border-block-start: none;
69-
70-
/* Bottom border of image gallery attachments */
71-
--str-chat__image-gallery-attachment-border-block-end: none;
72-
73-
/* Left (right in RTL layout) border of image gallery attachments */
74-
--str-chat__image-gallery-attachment-border-inline-start: none;
75-
76-
/* Right (left in RTL layout) border of image gallery attachments */
77-
--str-chat__image-gallery-attachment-border-inline-end: none;
78-
79-
/* Box shadow applied to image gallery attachments */
80-
--str-chat__image-gallery-attachment-box-shadow: none;
81-
82-
/* The border radius used for the borders of file attachments */
83-
--str-chat__file-attachment-border-radius: calc(
84-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
85-
);
86-
87-
/* The text/icon color of file attachments */
88-
--str-chat__file-attachment-color: var(--text-primary);
89-
90-
/* The background color of file attachments */
91-
--str-chat__file-attachment-background-color: transparent;
92-
93-
/* Top border of file attachments */
94-
--str-chat__file-attachment-border-block-start: none;
95-
96-
/* Bottom border of file attachments */
97-
--str-chat__file-attachment-border-block-end: none;
98-
99-
/* Left (right in RTL layout) border of file attachments */
100-
--str-chat__file-attachment-border-inline-start: none;
101-
102-
/* Right (left in RTL layout) border of file attachments */
103-
--str-chat__file-attachment-border-inline-end: none;
104-
105-
/* Box shadow applied to file attachments */
106-
--str-chat__file-attachment-box-shadow: none;
5+
--str-chat__attachment-margin: var(--str-chat__spacing-xs);
1076
}
1087

1098
.str-chat__attachment-list {
@@ -118,20 +17,27 @@
11817
display: flex;
11918
flex-direction: column;
12019
align-items: flex-start;
121-
gap: var(--spacing-xs);
20+
gap: var(--str-chat__spacing-xs);
12221
min-width: 0;
12322

124-
@include utils.component-layer-overrides('attachment-list');
23+
background: transparent;
24+
color: var(--str-chat__text-primary);
12525

12626
.str-chat__message-attachment--image,
12727
.str-chat__message-attachment--video {
128-
@include utils.component-layer-overrides('image-attachment');
28+
background: transparent;
29+
color: var(--str-chat__text-primary);
30+
border-radius: calc(
31+
var(--str-chat__message-bubble-radius-group-bottom) - var(
32+
--str-chat__attachment-margin
33+
)
34+
);
12935
}
13036

13137
.str-chat__message-attachment {
13238
overflow: hidden;
13339
background-color: var(--chat-bg-attachment);
134-
border-radius: var(--message-bubble-radius-attachment);
40+
border-radius: var(--str-chat__message-bubble-radius-attachment);
13541

13642
// Many classes to increase selector specificity
13743
.str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
@@ -232,7 +138,7 @@
232138

233139
.str-chat__gallery .str-chat__message-attachment--svg-image,
234140
.str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
235-
$padding: var(--space-24);
141+
$padding: var(--str-chat__space-24);
236142
padding: $padding;
237143

238144
img {
@@ -246,8 +152,8 @@
246152
.str-chat__message-attachment-file--item,
247153
.str-chat__message-attachment-audio-widget {
248154
@include utils.flex-row-center;
249-
padding: var(--spacing-sm);
250-
column-gap: var(--spacing-sm);
155+
padding: var(--str-chat__spacing-sm);
156+
column-gap: var(--str-chat__spacing-sm);
251157

252158
.str-chat__message-attachment-file--item__info,
253159
.str-chat__message-attachment-audio-widget--text {
@@ -256,19 +162,19 @@
256162
flex-direction: column;
257163
align-items: flex-start;
258164
justify-content: center;
259-
row-gap: var(--space-2);
165+
row-gap: var(--str-chat__space-2);
260166
min-width: 0;
261-
line-height: var(--typography-line-height-tight);
167+
line-height: var(--str-chat__typography-line-height-tight);
262168

263169
.str-chat__message-attachment-file--item__first-row,
264170
.str-chat__message-attachment-audio-widget--text-first-row {
265171
width: 100%;
266172
display: flex;
267173
align-items: center;
268174
justify-content: space-between;
269-
column-gap: var(--space-8);
270-
font-weight: var(--typography-font-weight-semi-bold);
271-
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);
272178

273179
.str-chat__message-attachment-file--item__name,
274180
.str-chat__message-attachment-audio-widget--title {
@@ -278,20 +184,26 @@
278184
}
279185

280186
.str-chat__message-attachment-file--item__data {
281-
font-size: var(--typography-font-size-xs);
187+
font-size: var(--str-chat__typography-font-size-xs);
282188
}
283189
}
284190
}
285191

286192
.str-chat__message-attachment-file--item {
287-
@include utils.component-layer-overrides('file-attachment');
193+
background: transparent;
194+
color: var(--str-chat__text-primary);
195+
border-radius: calc(
196+
var(--str-chat__message-bubble-radius-group-bottom) - var(
197+
--str-chat__attachment-margin
198+
)
199+
);
288200
}
289201

290202
.str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
291203
}
292204

293205
.str-chat__message-attachment-download-icon {
294-
--str-chat-icon-height: var(--size-16);
206+
--str-chat-icon-height: var(--str-chat__size-16);
295207
}
296208
}
297209

@@ -310,7 +222,7 @@
310222

311223
.str-chat__message-bubble {
312224
border: 1px solid var(--chat-border);
313-
box-shadow: var(--background-core-elevation-0);
225+
box-shadow: var(--str-chat__background-core-elevation-0);
314226
}
315227

316228
.str-chat__message-attachment {
@@ -329,14 +241,14 @@
329241
.str-chat__message--other {
330242
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
331243
.str-chat__message-attachment {
332-
border-end-start-radius: var(--message-bubble-radius-tail);
244+
border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
333245
}
334246
}
335247

336248
.str-chat__message--me {
337249
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
338250
.str-chat__message-attachment {
339-
border-end-end-radius: var(--message-bubble-radius-tail);
251+
border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
340252
}
341253
}
342254
}
@@ -345,7 +257,7 @@
345257
.str-chat__li--middle {
346258
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
347259
.str-chat__message-attachment {
348-
border-radius: var(--message-bubble-radius-group-middle);
260+
border-radius: var(--str-chat__message-bubble-radius-group-middle);
349261
}
350262
}
351263

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

Lines changed: 11 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,32 @@
1-
@use '../../../styling/utils';
2-
3-
.str-chat {
4-
/* The border radius used for attachment actions */
5-
--str-chat__attachment-actions-border-radius: 0;
6-
7-
/* The text/icon color of attachment actions */
8-
--str-chat__attachment-actions-color: var(--button-secondary-text);
9-
10-
/* The background color of attachment actions */
11-
--str-chat__attachment-actions-background-color: transparent;
12-
13-
/* Top border of attachment actions */
14-
--str-chat__attachment-actions-border-block-start: none;
15-
16-
/* Bottom border of attachment actions */
17-
--str-chat__attachment-actions-border-block-end: none;
18-
19-
/* Left (right in RTL layout) border of attachment actions */
20-
--str-chat__attachment-actions-border-inline-start: none;
21-
22-
/* Right (left in RTL layout) border of attachment actions */
23-
--str-chat__attachment-actions-border-inline-end: none;
24-
25-
/* Box shadow applied to attachment actions */
26-
--str-chat__attachment-actions-box-shadow: none;
27-
28-
/* The border radius used for an attachment action */
29-
--str-chat__attachment-action-border-radius: 0;
30-
31-
/* The text/icon color of an attachment action */
32-
--str-chat__attachment-action-color: var(--button-secondary-text);
33-
34-
/* The background color of an attachment action */
35-
--str-chat__attachment-action-background-color: transparent;
36-
37-
/* Top border of an attachment action */
38-
--str-chat__attachment-action-border-block-start: none;
39-
40-
/* Bottom border of an attachment action */
41-
--str-chat__attachment-action-border-block-end: none;
42-
43-
/* Left (right in RTL layout) border of an attachment action */
44-
--str-chat__attachment-action-border-inline-start: none;
45-
46-
/* Right (left in RTL layout) border of an attachment action */
47-
--str-chat__attachment-action-border-inline-end: none;
48-
49-
/* Box shadow applied to an attachment action */
50-
--str-chat__attachment-action-box-shadow: none;
51-
52-
/* The text/icon color of an attachment action while in pressed state */
53-
--str-chat__attachment-action-active-color: var(--accent-primary);
54-
55-
/* The text/icon color of an attachment action while in pressed state */
56-
--str-chat__attachment-action-focus-color: var(--accent-primary);
57-
}
58-
591
.str-chat__message-attachment-actions {
60-
@include utils.component-layer-overrides('attachment-actions');
2+
background: transparent;
3+
color: var(--str-chat__button-secondary-text);
614

625
.str-chat__message-attachment-actions-form {
636
display: flex;
647
justify-content: stretch;
658
height: 48px;
669

6710
.str-chat__message-attachment-actions-button {
68-
@include utils.component-layer-overrides('attachment-action');
11+
background: transparent;
12+
color: var(--str-chat__button-secondary-text);
6913
width: 100%;
70-
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);
7116
white-space: nowrap;
7217
border-collapse: collapse;
7318

74-
font-size: var(--typography-font-size-md);
75-
font-weight: var(--typography-font-weight-semi-bold);
76-
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);
7722

7823
&.str-chat__button {
7924
&:active {
80-
color: var(--str-chat__attachment-action-active-color);
25+
color: var(--str-chat__accent-primary);
8126
}
8227

8328
&:focus-visible {
84-
color: var(--str-chat__attachment-action-focus-color);
29+
color: var(--str-chat__accent-primary);
8530
outline: none;
8631
}
8732
}

0 commit comments

Comments
 (0)