Skip to content

Commit 756ac6d

Browse files
oliverlazoliverlaz
committed
docs(examples/tutorial): sync with published v14 theming tokens
Align the step-by-step tutorial example with the React chat tutorial that now ships in docs-content and getstream.io-tutorials: - layout.css (steps 3-7, previously byte-identical): replace dead --brand-* palette + --radius-full with the semantic tokens v14 actually consumes (--accent-primary, --chat-bg-*, --text-link, --background-core-*, --border-utility-focused, --radius-max, --button-radius-full). - App.tsx (steps 3/4/5): rename theme='str-chat__theme-custom' → theme='custom-theme'. The str-chat__ prefix is reserved for SDK-owned classes and the SDK does no wildcard matching on str-chat__theme-*, so the prefix added nothing. Both changes mirror the companion doc-content PR (GetStream/docs-content#1213).
1 parent 7ecf787 commit 756ac6d

8 files changed

Lines changed: 128 additions & 73 deletions

File tree

‎examples/tutorial/src/3-channel-list/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const App = () => {
3939
if (!client) return <div>Setting up client & connection...</div>;
4040

4141
return (
42-
<Chat client={client} theme='str-chat__theme-custom'>
42+
<Chat client={client} theme='custom-theme'>
4343
<ChannelList filters={filters} sort={sort} options={options} />
4444
<Channel>
4545
<Window>

‎examples/tutorial/src/3-channel-list/layout.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
@import 'stream-chat-react/dist/css/index.css' layer(stream);
33

44
@layer stream-overrides {
5-
.str-chat__theme-custom {
6-
--brand-50: #edf7f7;
7-
--brand-100: #e0f2f1;
8-
--brand-150: #b2dfdb;
9-
--brand-200: #80cbc4;
10-
--brand-300: #4db6ac;
11-
--brand-400: #26a69a;
12-
--brand-500: #009688;
13-
--brand-600: #00897b;
14-
--brand-700: #00796b;
15-
--brand-800: #00695c;
16-
--brand-900: #004d40;
17-
--accent-primary: var(--brand-500);
18-
--radius-full: 6px;
5+
.custom-theme {
6+
/* Accent */
7+
--accent-primary: #0d47a1;
8+
9+
/* Message bubble colors */
10+
--chat-bg-outgoing: #1e3a8a;
11+
--chat-bg-attachment-outgoing: #0d47a1;
12+
--chat-bg-incoming: #dbeafe;
13+
--chat-text-outgoing: #ffffff;
14+
--chat-reply-indicator-outgoing: #93c5fd;
15+
16+
/* Links */
17+
--text-link: #1e40af;
18+
--chat-text-link: #93c5fd;
19+
20+
/* Panel backgrounds */
21+
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--background-core-app: #c7dafc; /* message list background */
23+
24+
/* Focus ring */
25+
--border-utility-focused: #1e40af;
26+
27+
/* Radii */
28+
--radius-max: 8px;
29+
--button-radius-full: 6px;
1930
}
2031
}
2132

‎examples/tutorial/src/4-custom-ui-components/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ const App = () => {
151151
Message: CustomMessage,
152152
}}
153153
>
154-
<Chat client={client} theme='str-chat__theme-custom'>
154+
<Chat client={client} theme='custom-theme'>
155155
<ChannelList filters={filters} sort={sort} options={options} />
156156
<Channel>
157157
<Window>

‎examples/tutorial/src/4-custom-ui-components/layout.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
@import 'stream-chat-react/dist/css/index.css' layer(stream);
33

44
@layer stream-overrides {
5-
.str-chat__theme-custom {
6-
--brand-50: #edf7f7;
7-
--brand-100: #e0f2f1;
8-
--brand-150: #b2dfdb;
9-
--brand-200: #80cbc4;
10-
--brand-300: #4db6ac;
11-
--brand-400: #26a69a;
12-
--brand-500: #009688;
13-
--brand-600: #00897b;
14-
--brand-700: #00796b;
15-
--brand-800: #00695c;
16-
--brand-900: #004d40;
17-
--accent-primary: var(--brand-500);
18-
--radius-full: 6px;
5+
.custom-theme {
6+
/* Accent */
7+
--accent-primary: #0d47a1;
8+
9+
/* Message bubble colors */
10+
--chat-bg-outgoing: #1e3a8a;
11+
--chat-bg-attachment-outgoing: #0d47a1;
12+
--chat-bg-incoming: #dbeafe;
13+
--chat-text-outgoing: #ffffff;
14+
--chat-reply-indicator-outgoing: #93c5fd;
15+
16+
/* Links */
17+
--text-link: #1e40af;
18+
--chat-text-link: #93c5fd;
19+
20+
/* Panel backgrounds */
21+
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--background-core-app: #c7dafc; /* message list background */
23+
24+
/* Focus ring */
25+
--border-utility-focused: #1e40af;
26+
27+
/* Radii */
28+
--radius-max: 8px;
29+
--button-radius-full: 6px;
1930
}
2031
}
2132

‎examples/tutorial/src/5-custom-attachment-type/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const App = () => {
118118

119119
return (
120120
<WithComponents overrides={{ Attachment: CustomAttachment }}>
121-
<Chat client={client} theme='str-chat__theme-custom'>
121+
<Chat client={client} theme='custom-theme'>
122122
<Channel channel={channel}>
123123
<Window>
124124
<ChannelHeader />

‎examples/tutorial/src/5-custom-attachment-type/layout.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
@import 'stream-chat-react/dist/css/index.css' layer(stream);
33

44
@layer stream-overrides {
5-
.str-chat__theme-custom {
6-
--brand-50: #edf7f7;
7-
--brand-100: #e0f2f1;
8-
--brand-150: #b2dfdb;
9-
--brand-200: #80cbc4;
10-
--brand-300: #4db6ac;
11-
--brand-400: #26a69a;
12-
--brand-500: #009688;
13-
--brand-600: #00897b;
14-
--brand-700: #00796b;
15-
--brand-800: #00695c;
16-
--brand-900: #004d40;
17-
--accent-primary: var(--brand-500);
18-
--radius-full: 6px;
5+
.custom-theme {
6+
/* Accent */
7+
--accent-primary: #0d47a1;
8+
9+
/* Message bubble colors */
10+
--chat-bg-outgoing: #1e3a8a;
11+
--chat-bg-attachment-outgoing: #0d47a1;
12+
--chat-bg-incoming: #dbeafe;
13+
--chat-text-outgoing: #ffffff;
14+
--chat-reply-indicator-outgoing: #93c5fd;
15+
16+
/* Links */
17+
--text-link: #1e40af;
18+
--chat-text-link: #93c5fd;
19+
20+
/* Panel backgrounds */
21+
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--background-core-app: #c7dafc; /* message list background */
23+
24+
/* Focus ring */
25+
--border-utility-focused: #1e40af;
26+
27+
/* Radii */
28+
--radius-max: 8px;
29+
--button-radius-full: 6px;
1930
}
2031
}
2132

‎examples/tutorial/src/6-emoji-picker/layout.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
@import 'stream-chat-react/dist/css/index.css' layer(stream);
33

44
@layer stream-overrides {
5-
.str-chat__theme-custom {
6-
--brand-50: #edf7f7;
7-
--brand-100: #e0f2f1;
8-
--brand-150: #b2dfdb;
9-
--brand-200: #80cbc4;
10-
--brand-300: #4db6ac;
11-
--brand-400: #26a69a;
12-
--brand-500: #009688;
13-
--brand-600: #00897b;
14-
--brand-700: #00796b;
15-
--brand-800: #00695c;
16-
--brand-900: #004d40;
17-
--accent-primary: var(--brand-500);
18-
--radius-full: 6px;
5+
.custom-theme {
6+
/* Accent */
7+
--accent-primary: #0d47a1;
8+
9+
/* Message bubble colors */
10+
--chat-bg-outgoing: #1e3a8a;
11+
--chat-bg-attachment-outgoing: #0d47a1;
12+
--chat-bg-incoming: #dbeafe;
13+
--chat-text-outgoing: #ffffff;
14+
--chat-reply-indicator-outgoing: #93c5fd;
15+
16+
/* Links */
17+
--text-link: #1e40af;
18+
--chat-text-link: #93c5fd;
19+
20+
/* Panel backgrounds */
21+
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--background-core-app: #c7dafc; /* message list background */
23+
24+
/* Focus ring */
25+
--border-utility-focused: #1e40af;
26+
27+
/* Radii */
28+
--radius-max: 8px;
29+
--button-radius-full: 6px;
1930
}
2031
}
2132

‎examples/tutorial/src/7-livestream/layout.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@
22
@import 'stream-chat-react/dist/css/index.css' layer(stream);
33

44
@layer stream-overrides {
5-
.str-chat__theme-custom {
6-
--brand-50: #edf7f7;
7-
--brand-100: #e0f2f1;
8-
--brand-150: #b2dfdb;
9-
--brand-200: #80cbc4;
10-
--brand-300: #4db6ac;
11-
--brand-400: #26a69a;
12-
--brand-500: #009688;
13-
--brand-600: #00897b;
14-
--brand-700: #00796b;
15-
--brand-800: #00695c;
16-
--brand-900: #004d40;
17-
--accent-primary: var(--brand-500);
18-
--radius-full: 6px;
5+
.custom-theme {
6+
/* Accent */
7+
--accent-primary: #0d47a1;
8+
9+
/* Message bubble colors */
10+
--chat-bg-outgoing: #1e3a8a;
11+
--chat-bg-attachment-outgoing: #0d47a1;
12+
--chat-bg-incoming: #dbeafe;
13+
--chat-text-outgoing: #ffffff;
14+
--chat-reply-indicator-outgoing: #93c5fd;
15+
16+
/* Links */
17+
--text-link: #1e40af;
18+
--chat-text-link: #93c5fd;
19+
20+
/* Panel backgrounds */
21+
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--background-core-app: #c7dafc; /* message list background */
23+
24+
/* Focus ring */
25+
--border-utility-focused: #1e40af;
26+
27+
/* Radii */
28+
--radius-max: 8px;
29+
--button-radius-full: 6px;
1930
}
2031
}
2132

0 commit comments

Comments
 (0)