Skip to content

Commit 6d04cdf

Browse files
arnautov-antonarnautov-anton
authored
fix: font & box shadow fixes (#3135)
Fixes: #3134 - moves Geist font import to the example application - adds `--str-chat__` prefix to example application variables (used from `{light,dark}.scss` files) - adjusts certain selectors to respect design-spec fonts/shadows - replaces individual `font-size`, `line-height`, `font-weight` with [pre-defined combinations](https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=6050-277245&m=dev)
1 parent 8c3fb34 commit 6d04cdf

38 files changed

Lines changed: 154 additions & 727 deletions

File tree

‎examples/vite/src/AppSettings/AppSettings.scss‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
gap: 16px;
88

99
.app__settings-group_button {
10-
color: var(--text-secondary);
10+
color: var(--str-chat__text-secondary);
1111
}
1212
}
1313

@@ -77,13 +77,13 @@
7777
}
7878

7979
.app__attachment-dialog__field-label {
80-
color: var(--text-primary);
80+
color: var(--str-chat__text-primary);
8181
font-size: 14px;
8282
font-weight: 600;
8383
}
8484

8585
.app__attachment-dialog__subsection {
86-
border-top: 1px solid var(--border-core-default);
86+
border-top: 1px solid var(--str-chat__border-core-default);
8787
display: flex;
8888
flex-direction: column;
8989
gap: 10px;
@@ -92,7 +92,7 @@
9292
}
9393

9494
.app__attachment-dialog__subsection-title {
95-
color: var(--text-primary);
95+
color: var(--str-chat__text-primary);
9696
font-size: 14px;
9797
font-weight: 700;
9898
margin: 0;
@@ -104,10 +104,10 @@
104104
}
105105

106106
.app__attachment-dialog__tab {
107-
border: 1px solid var(--border-core-default);
107+
border: 1px solid var(--str-chat__border-core-default);
108108
border-radius: 999px;
109-
background: var(--background-core-elevation-2);
110-
color: var(--text-secondary);
109+
background: var(--str-chat__background-core-elevation-2);
110+
color: var(--str-chat__text-secondary);
111111
cursor: pointer;
112112
font: inherit;
113113
font-size: 13px;
@@ -117,20 +117,20 @@
117117
}
118118

119119
.app__attachment-dialog__tab[aria-selected='true'] {
120-
background: var(--background-utility-selected);
121-
border-color: var(--border-utility-selected);
122-
color: var(--text-primary);
120+
background: var(--str-chat__background-utility-selected);
121+
border-color: var(--str-chat__border-utility-selected);
122+
color: var(--str-chat__text-primary);
123123
}
124124

125125
.app__attachment-dialog__textarea {
126126
width: 100%;
127127
min-height: 200px;
128128
resize: vertical;
129-
border: 1px solid var(--border-core-default);
129+
border: 1px solid var(--str-chat__border-core-default);
130130
border-radius: 10px;
131131
padding: 10px 12px;
132-
background: var(--background-core-elevation-2);
133-
color: var(--text-primary);
132+
background: var(--str-chat__background-core-elevation-2);
133+
color: var(--str-chat__text-primary);
134134
font-family:
135135
ui-monospace,
136136
SFMono-Regular,
@@ -142,7 +142,7 @@
142142
}
143143

144144
.app__attachment-dialog__textarea:focus-visible {
145-
outline: 2px solid var(--border-utility-selected);
145+
outline: 2px solid var(--str-chat__border-utility-selected);
146146
outline-offset: 1px;
147147
}
148148

@@ -199,18 +199,18 @@
199199
}
200200

201201
.app__notification-dialog__field-label {
202-
color: var(--text-primary);
202+
color: var(--str-chat__text-primary);
203203
font-size: 14px;
204204
font-weight: 600;
205205
}
206206

207207
.app__notification-dialog__select {
208208
min-height: 40px;
209209
padding: 0 12px;
210-
border: 1px solid var(--border-core-default);
210+
border: 1px solid var(--str-chat__border-core-default);
211211
border-radius: 10px;
212-
background: var(--background-core-elevation-2);
213-
color: var(--text-primary);
212+
background: var(--str-chat__background-core-elevation-2);
213+
color: var(--str-chat__text-primary);
214214
font: inherit;
215215
}
216216

@@ -260,7 +260,7 @@
260260
flex-shrink: 0;
261261
width: 32px;
262262
height: 32px;
263-
border: 1px solid var(--border-core-default);
263+
border: 1px solid var(--str-chat__border-core-default);
264264
border-radius: 999px;
265265
background: transparent;
266266
}
@@ -279,7 +279,7 @@
279279
}
280280

281281
.app__notification-dialog__queue-hint {
282-
color: var(--text-secondary);
282+
color: var(--str-chat__text-secondary);
283283
font-size: 13px;
284284
}
285285

@@ -303,7 +303,7 @@
303303
gap: 8px;
304304
max-width: 100%;
305305
padding: 6px 8px 6px 10px;
306-
border: 1px solid var(--border-core-default);
306+
border: 1px solid var(--str-chat__border-core-default);
307307
border-radius: 999px;
308308
background: var(--background-core-surface);
309309
}
@@ -324,7 +324,7 @@
324324
display: inline-flex;
325325
align-items: center;
326326
gap: 8px;
327-
color: var(--text-secondary);
327+
color: var(--str-chat__text-secondary);
328328
font-size: 12px;
329329
white-space: nowrap;
330330
}
@@ -346,7 +346,7 @@
346346
}
347347

348348
.app__notification-dialog__chip-remove {
349-
color: var(--text-secondary);
349+
color: var(--str-chat__text-secondary);
350350
}
351351

352352
.app__notification-dialog__footer {
@@ -378,9 +378,9 @@
378378
flex-direction: column;
379379
width: min(920px, 90vw);
380380
height: min(80vh, 760px);
381-
background: var(--background-core-elevation-2);
382-
color: var(--text-primary);
383-
border: 1px solid var(--border-core-default);
381+
background: var(--str-chat__background-core-elevation-2);
382+
color: var(--str-chat__text-primary);
383+
border: 1px solid var(--str-chat__border-core-default);
384384
border-radius: 14px;
385385
}
386386

@@ -391,7 +391,7 @@
391391
padding: 16px 20px;
392392
font-size: 1.5rem;
393393
font-weight: 700;
394-
border-bottom: 1px solid var(--border-core-default);
394+
border-bottom: 1px solid var(--str-chat__border-core-default);
395395

396396
svg.str-chat__icon--cog {
397397
height: 1.75rem;
@@ -409,7 +409,7 @@
409409
.app__settings-modal__tabs {
410410
overflow-y: auto;
411411
overscroll-behavior: contain;
412-
border-inline-end: 1px solid var(--border-core-default);
412+
border-inline-end: 1px solid var(--str-chat__border-core-default);
413413
padding: 10px;
414414
}
415415

@@ -419,14 +419,14 @@
419419
justify-content: flex-start;
420420
font-weight: 500;
421421
margin-bottom: 6px;
422-
color: var(--text-secondary);
422+
color: var(--str-chat__text-secondary);
423423
}
424424

425425
.app__settings-modal__tab[aria-selected='true'],
426426
.app__settings-modal__tab.app__settings-modal__tab--active {
427-
background: var(--background-utility-selected);
428-
border-color: var(--border-utility-selected);
429-
color: var(--text-primary);
427+
background: var(--str-chat__background-utility-selected);
428+
border-color: var(--str-chat__border-utility-selected);
429+
color: var(--str-chat__text-primary);
430430
font-weight: 600;
431431
}
432432

@@ -450,17 +450,17 @@
450450

451451
.app__settings-modal__field-label {
452452
font-weight: 600;
453-
color: var(--text-primary);
453+
color: var(--str-chat__text-primary);
454454
}
455455

456456
.app__settings-modal__field .str-chat__form__switch-field {
457-
border: 1px solid var(--border-core-default);
457+
border: 1px solid var(--str-chat__border-core-default);
458458
border-radius: 10px;
459459
padding: 10px 12px;
460460
}
461461

462462
.app__settings-modal__field-comment {
463-
color: var(--text-secondary);
463+
color: var(--str-chat__text-secondary);
464464
font-size: 13px;
465465
line-height: 1.4;
466466
}
@@ -472,8 +472,8 @@
472472
}
473473

474474
.app__settings-modal__option-button[aria-pressed='true'] {
475-
border-color: var(--border-utility-selected);
476-
background: var(--background-utility-selected);
475+
border-color: var(--str-chat__border-utility-selected);
476+
background: var(--str-chat__background-utility-selected);
477477
font-weight: 600;
478478
}
479479

@@ -485,7 +485,7 @@
485485
}
486486

487487
.app__settings-modal__preview {
488-
border: 1px solid var(--border-core-default);
488+
border: 1px solid var(--str-chat__border-core-default);
489489
border-radius: 12px;
490490
padding: 12px;
491491
background: var(--background-core-surface);
@@ -524,7 +524,7 @@
524524
}
525525

526526
.app__settings-modal__tabs {
527-
border-inline-end: 1px solid var(--border-core-default);
527+
border-inline-end: 1px solid var(--str-chat__border-core-default);
528528
border-bottom: 0;
529529
display: block;
530530
gap: 0;

‎examples/vite/src/CustomMessageActions/CustomMessageActions.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
.app__custom-delete-message-alert__options .str-chat__form__switch-field {
1111
display: flex;
1212
justify-content: space-between;
13-
border: 1px solid var(--border-core-default);
13+
border: 1px solid var(--str-chat__border-core-default);
1414
border-radius: 10px;
1515
padding: 6px 8px;
1616
font: var(--str-chat__metadata-emphasis-text);

‎examples/vite/src/SystemNotification/SystemNotification.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
flex-shrink: 0;
44
align-items: center;
55
justify-content: center;
6-
gap: var(--spacing-xs, 8px);
7-
padding-block: var(--spacing-xs, 8px);
8-
padding-inline: var(--spacing-sm, 12px);
9-
background: var(--background-core-surface-default, #ebeef1);
10-
color: var(--chat-text-system, #414552);
6+
gap: var(--str-chat__spacing-xs, 8px);
7+
padding-block: var(--str-chat__spacing-xs, 8px);
8+
padding-inline: var(--str-chat__spacing-sm, 12px);
9+
background: var(--str-chat__background-core-surface-default, #ebeef1);
10+
color: var(--str-chat__chat-text-system, #414552);
1111
font-feature-settings:
1212
'liga' off,
1313
'clig' off;
14-
font-size: var(--typography-font-size-xs, 12px);
14+
font-size: var(--str-chat__typography-font-size-xs, 12px);
1515
font-style: normal;
16-
font-weight: var(--typography-font-weight-semi-bold, 600);
17-
line-height: var(--typography-line-height-tight, 16px);
16+
font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
17+
line-height: var(--str-chat__typography-line-height-tight, 16px);
1818
animation: str-chat__system-notification-slide-in 300ms ease-out both;
1919
overflow: hidden;
2020
width: 100%;

‎examples/vite/src/index.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
22

3+
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
4+
35
// v3 CSS import
46
@import url('stream-chat-react/dist/css/index.css') layer(stream-new);
57
@import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
@@ -143,7 +145,7 @@ body {
143145
min-width: 1px;
144146
height: 100%;
145147
z-index: 1;
146-
background: var(--border-core-default);
148+
background: var(--str-chat__border-core-default);
147149
}
148150

149151
.app-chat-resize-handle__hitbox {

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,7 @@
173173
align-items: center;
174174
justify-content: space-between;
175175
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);
176+
font: var(--str-chat__font-caption-emphasis);
178177

179178
.str-chat__message-attachment-file--item__name,
180179
.str-chat__message-attachment-audio-widget--title {
@@ -184,7 +183,7 @@
184183
}
185184

186185
.str-chat__message-attachment-file--item__data {
187-
font-size: var(--str-chat__typography-font-size-xs);
186+
font: var(--str-chat__font-metadata-default);
188187
}
189188
}
190189
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@
1616
white-space: nowrap;
1717
border-collapse: collapse;
1818

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);
19+
font: var(--str-chat__font-body-emphasis);
2220

2321
&.str-chat__button {
2422
&:active {

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

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

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);
42+
border-radius: var(--str-chat__radius-lg);
43+
background-color: var(--str-chat__badge-bg-overlay);
44+
color: var(--str-chat__badge-text-on-accent);
4545

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);
46+
font: var(--str-chat__font-metadata-emphasis);
4947
text-transform: uppercase;
5048
}
5149

@@ -66,8 +64,6 @@ $gif-height: 200px;
6664
align-self: stretch;
6765

6866
color: var(--chat-text);
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);
67+
font: var(--str-chat__font-caption-emphasis);
7268
}
7369
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,12 @@
5252
}
5353

5454
.str-chat__message-attachment-card--title {
55-
@include utils.ellipsis-text;
56-
font-size: var(--str-chat__typography-font-size-sm);
57-
font-weight: var(--str-chat__typography-font-weight-semi-bold);
55+
font: var(--str-chat__font-caption-emphasis);
5856
}
5957

6058
.str-chat__message-attachment-card--source-link,
6159
.str-chat__message-attachment-card--text {
62-
font-size: var(--str-chat__typography-font-size-xs);
60+
font: var(--str-chat__font-metadata-default);
6361
}
6462

6563
.str-chat__message-attachment-card--title,
@@ -69,6 +67,7 @@
6967

7068
.str-chat__message-attachment-card--text {
7169
@include utils.ellipsis-text-clamp-lines();
70+
font: var(--str-chat__font-metadata-default);
7271
}
7372

7473
.str-chat__message-attachment-card--source-link {

0 commit comments

Comments
 (0)