Skip to content

Commit e3cfd8d

Browse files
arnautov-antonarnautov-anton
committed
Reviewed variable removals
1 parent f8c9600 commit e3cfd8d

27 files changed

Lines changed: 143 additions & 909 deletions

File tree

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

Lines changed: 8 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,107 +3,6 @@
33
.str-chat {
44
/* The margin applied to every attachment in the attachment list */
55
--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;
1076
}
1087

1098
.str-chat__attachment-list {
@@ -121,11 +20,14 @@
12120
gap: var(--spacing-xs);
12221
min-width: 0;
12322

124-
@include utils.component-layer-overrides('attachment-list');
23+
background: transparent;
24+
color: var(--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(--text-primary);
30+
border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
12931
}
13032

13133
.str-chat__message-attachment {
@@ -284,7 +186,9 @@
284186
}
285187

286188
.str-chat__message-attachment-file--item {
287-
@include utils.component-layer-overrides('file-attachment');
189+
background: transparent;
190+
color: var(--text-primary);
191+
border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
288192
}
289193

290194
.str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {

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

Lines changed: 6 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,15 @@
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(--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(--button-secondary-text);
6913
width: 100%;
7014
padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm);
7115
white-space: nowrap;
@@ -77,11 +21,11 @@
7721

7822
&.str-chat__button {
7923
&:active {
80-
color: var(--str-chat__attachment-action-active-color);
24+
color: var(--accent-primary);
8125
}
8226

8327
&:focus-visible {
84-
color: var(--str-chat__attachment-action-focus-color);
28+
color: var(--accent-primary);
8529
outline: none;
8630
}
8731
}

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

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
11
@use '../../../styling/utils';
22

3-
.str-chat {
4-
/* Border radius applied audio widget */
5-
--str-chat__audio-attachment-widget-border-radius: calc(
6-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
7-
);
8-
9-
/* Text color used in audio widget */
10-
--str-chat__audio-attachment-widget-color: var(--text-primary);
11-
12-
/* The text/icon color for low emphasis texts (for example file size) in audio widget */
13-
--str-chat__audio-attachment-widget-background-color: transparent;
14-
15-
/* Top border of audio widget */
16-
--str-chat__audio-attachment-widget-border-block-start: none;
17-
18-
/* Bottom border of audio widget */
19-
--str-chat__audio-attachment-widget-border-block-end: none;
20-
21-
/* Left (right in RTL layout) border of audio widget */
22-
--str-chat__audio-attachment-widget-border-inline-start: none;
23-
24-
/* Right (left in RTL layout) border of audio widget */
25-
--str-chat__audio-attachment-widget-border-inline-end: none;
26-
27-
/* Box shadow applied to audio widget */
28-
--str-chat__audio-attachment-widget-box-shadow: none;
29-
}
30-
313
.str-chat__message-attachment-audio-widget {
32-
@include utils.component-layer-overrides('audio-attachment-widget');
4+
background: transparent;
5+
color: var(--text-primary);
6+
border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
337
flex: 1 1 auto;
348
width: 100%;
359
min-width: 0;

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

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
11
@use '../../../styling/utils';
22

3-
.str-chat {
4-
/* The border radius used for the borders of file attachments */
5-
--str-chat__geolocation-attachment-border-radius: calc(
6-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
7-
);
8-
9-
/* The text/icon color of geolocation attachments */
10-
--str-chat__geolocation-attachment-color: var(--chat-text);
11-
12-
/* The background color of geolocation attachments */
13-
--str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment);
14-
15-
/* Top border of geolocation attachments */
16-
--str-chat__geolocation-attachment-border-block-start: none;
17-
18-
/* Bottom border of geolocation attachments */
19-
--str-chat__geolocation-attachment-border-block-end: none;
20-
21-
/* Left (right in RTL layout) border of geolocation attachments */
22-
--str-chat__geolocation-attachment-border-inline-start: none;
23-
24-
/* Right (left in RTL layout) border of geolocation attachments */
25-
--str-chat__geolocation-attachment-border-inline-end: none;
26-
27-
/* Box shadow applied to geolocation attachments */
28-
--str-chat__geolocation-attachment-box-shadow: none;
29-
}
30-
313
.str-chat__message-attachment-geolocation {
32-
@include utils.component-layer-overrides('geolocation-attachment');
4+
background: var(--chat-bg-attachment);
5+
color: var(--chat-text);
6+
border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
337
display: flex;
348
flex-direction: column;
359
height: 200px;

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

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

3-
.str-chat__message {
4-
--str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
5-
--str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse);
6-
--str-chat__modal-gallery-loading-background: var(--chat-bg);
7-
--str-chat__modal-gallery-loading-base: var(--skeleton-loading-base);
8-
--str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight);
9-
}
10-
113
.str-chat__attachment-list {
124
.str-chat__message-attachment--gallery {
135
$max-width: var(--str-chat__attachment-max-width);
146

157
.str-chat__modal-gallery {
16-
@include utils.component-layer-overrides('image-gallery-attachment');
8+
background: transparent;
9+
color: var(--text-primary);
10+
border-radius: calc(
11+
var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin)
12+
);
1713
display: grid;
1814
grid-template-columns: 50% 50%;
1915
grid-template-rows: 50% 50%;
@@ -141,12 +137,12 @@
141137
display: flex;
142138
align-items: center;
143139
justify-content: center;
144-
background-color: var(--str-chat__modal-gallery-loading-background);
140+
background-color: var(--chat-bg);
145141
background-image: linear-gradient(
146142
90deg,
147-
var(--str-chat__modal-gallery-loading-base) 0%,
148-
var(--str-chat__modal-gallery-loading-highlight) 50%,
149-
var(--str-chat__modal-gallery-loading-base) 100%
143+
var(--skeleton-loading-base) 0%,
144+
var(--skeleton-loading-highlight) 50%,
145+
var(--skeleton-loading-base) 100%
150146
);
151147
background-repeat: no-repeat;
152148
background-size: 200% 100%;
@@ -168,8 +164,8 @@
168164
width: 2.75rem;
169165
height: 2.75rem;
170166
border-radius: var(--radius-max);
171-
background-color: var(--str-chat__modal-gallery-load-failed-indicator-background);
172-
color: var(--str-chat__modal-gallery-load-failed-indicator-color);
167+
background-color: var(--accent-error);
168+
color: var(--text-on-inverse);
173169

174170
svg {
175171
width: 1.125rem;

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

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,10 @@
11
@use '../../../styling/utils';
22
@use '../../../styling/variables/font' as font;
33

4-
.str-chat {
5-
/* The border radius used for the borders of file attachments */
6-
--str-chat__unsupported-attachment-border-radius: calc(
7-
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
8-
);
9-
10-
/* The text/icon color of file attachments */
11-
--str-chat__unsupported-attachment-color: var(--text-primary);
12-
13-
/* The background color of file attachments */
14-
--str-chat__unsupported-attachment-background-color: transparent;
15-
16-
/* Top border of file attachments */
17-
--str-chat__unsupported-attachment-border-block-start: none;
18-
19-
/* Bottom border of file attachments */
20-
--str-chat__unsupported-attachment-border-block-end: none;
21-
22-
/* Left (right in RTL layout) border of file attachments */
23-
--str-chat__unsupported-attachment-border-inline-start: none;
24-
25-
/* Right (left in RTL layout) border of file attachments */
26-
--str-chat__unsupported-attachment-border-inline-end: none;
27-
28-
/* Box shadow applied to file attachments */
29-
--str-chat__unsupported-attachment-box-shadow: none;
30-
}
31-
324
.str-chat__message-attachment-unsupported {
33-
@include utils.component-layer-overrides('unsupported-attachment');
5+
background: transparent;
6+
color: var(--text-primary);
7+
border-radius: calc(var(--message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
348
display: flex;
359
align-items: center;
3610
justify-content: center;

0 commit comments

Comments
 (0)