Skip to content

Commit 4c057bb

Browse files
ndhuutaiTai Nguyen
ndhuutai
and
Tai Nguyen
authored
docs(examples/tutorial): update theming tokens to --str-chat__ prefix (#3207)
PR #3128 renamed all SDK CSS custom properties with a --str-chat__ prefix immediately after PR #3133 synced the tutorial examples to the semantic token names. Update all five tutorial layout.css files accordingly. ### 🎯 Goal PR #3128 added the `--str-chat__` prefix to all SDK CSS custom properties, but the tutorial examples (steps 3–7) were not updated at the same time. As a result, the `stream-overrides` layer in each tutorial's `layout.css` sets properties that no longer exist, making the custom blue theme have no visible effect. ### 🛠 Implementation details Renamed all 13 CSS custom properties in the `.custom-theme` block across the five byte-identical `layout.css` files (tutorial steps 3–7) to match the current `--str-chat__` prefix convention (e.g. `--chat-bg-outgoing` → `--str-chat__chat-bg-outgoing`). ### 🎨 UI Changes CSS-only rename — no visual change intended. The theming was already broken before this fix; after the fix it renders as originally designed (navy outgoing bubbles, light-blue incoming bubbles, pale-blue panel backgrounds). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Updated tutorial example files across multiple sections to use standardized CSS variable naming conventions for theming and styling consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Tai Nguyen <tainguyen@Tais-MacBook-Pro-M4.local>
1 parent 4c934ae commit 4c057bb

5 files changed

Lines changed: 65 additions & 65 deletions

File tree

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
@layer stream-overrides {
55
.custom-theme {
66
/* Accent */
7-
--accent-primary: #0d47a1;
7+
--str-chat__accent-primary: #0d47a1;
88

99
/* 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;
10+
--str-chat__chat-bg-outgoing: #1e3a8a;
11+
--str-chat__chat-bg-attachment-outgoing: #0d47a1;
12+
--str-chat__chat-bg-incoming: #dbeafe;
13+
--str-chat__chat-text-outgoing: #ffffff;
14+
--str-chat__chat-reply-indicator-outgoing: #93c5fd;
1515

1616
/* Links */
17-
--text-link: #1e40af;
18-
--chat-text-link: #93c5fd;
17+
--str-chat__text-link: #1e40af;
18+
--str-chat__chat-text-link: #93c5fd;
1919

2020
/* Panel backgrounds */
21-
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22-
--background-core-app: #c7dafc; /* message list background */
21+
--str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--str-chat__background-core-app: #c7dafc; /* message list background */
2323

2424
/* Focus ring */
25-
--border-utility-focused: #1e40af;
25+
--str-chat__border-utility-focused: #1e40af;
2626

2727
/* Radii */
28-
--radius-max: 8px;
29-
--button-radius-full: 6px;
28+
--str-chat__radius-max: 8px;
29+
--str-chat__button-radius-full: 6px;
3030
}
3131
}
3232

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
@layer stream-overrides {
55
.custom-theme {
66
/* Accent */
7-
--accent-primary: #0d47a1;
7+
--str-chat__accent-primary: #0d47a1;
88

99
/* 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;
10+
--str-chat__chat-bg-outgoing: #1e3a8a;
11+
--str-chat__chat-bg-attachment-outgoing: #0d47a1;
12+
--str-chat__chat-bg-incoming: #dbeafe;
13+
--str-chat__chat-text-outgoing: #ffffff;
14+
--str-chat__chat-reply-indicator-outgoing: #93c5fd;
1515

1616
/* Links */
17-
--text-link: #1e40af;
18-
--chat-text-link: #93c5fd;
17+
--str-chat__text-link: #1e40af;
18+
--str-chat__chat-text-link: #93c5fd;
1919

2020
/* Panel backgrounds */
21-
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22-
--background-core-app: #c7dafc; /* message list background */
21+
--str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--str-chat__background-core-app: #c7dafc; /* message list background */
2323

2424
/* Focus ring */
25-
--border-utility-focused: #1e40af;
25+
--str-chat__border-utility-focused: #1e40af;
2626

2727
/* Radii */
28-
--radius-max: 8px;
29-
--button-radius-full: 6px;
28+
--str-chat__radius-max: 8px;
29+
--str-chat__button-radius-full: 6px;
3030
}
3131
}
3232

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
@layer stream-overrides {
55
.custom-theme {
66
/* Accent */
7-
--accent-primary: #0d47a1;
7+
--str-chat__accent-primary: #0d47a1;
88

99
/* 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;
10+
--str-chat__chat-bg-outgoing: #1e3a8a;
11+
--str-chat__chat-bg-attachment-outgoing: #0d47a1;
12+
--str-chat__chat-bg-incoming: #dbeafe;
13+
--str-chat__chat-text-outgoing: #ffffff;
14+
--str-chat__chat-reply-indicator-outgoing: #93c5fd;
1515

1616
/* Links */
17-
--text-link: #1e40af;
18-
--chat-text-link: #93c5fd;
17+
--str-chat__text-link: #1e40af;
18+
--str-chat__chat-text-link: #93c5fd;
1919

2020
/* Panel backgrounds */
21-
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22-
--background-core-app: #c7dafc; /* message list background */
21+
--str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--str-chat__background-core-app: #c7dafc; /* message list background */
2323

2424
/* Focus ring */
25-
--border-utility-focused: #1e40af;
25+
--str-chat__border-utility-focused: #1e40af;
2626

2727
/* Radii */
28-
--radius-max: 8px;
29-
--button-radius-full: 6px;
28+
--str-chat__radius-max: 8px;
29+
--str-chat__button-radius-full: 6px;
3030
}
3131
}
3232

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
@layer stream-overrides {
55
.custom-theme {
66
/* Accent */
7-
--accent-primary: #0d47a1;
7+
--str-chat__accent-primary: #0d47a1;
88

99
/* 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;
10+
--str-chat__chat-bg-outgoing: #1e3a8a;
11+
--str-chat__chat-bg-attachment-outgoing: #0d47a1;
12+
--str-chat__chat-bg-incoming: #dbeafe;
13+
--str-chat__chat-text-outgoing: #ffffff;
14+
--str-chat__chat-reply-indicator-outgoing: #93c5fd;
1515

1616
/* Links */
17-
--text-link: #1e40af;
18-
--chat-text-link: #93c5fd;
17+
--str-chat__text-link: #1e40af;
18+
--str-chat__chat-text-link: #93c5fd;
1919

2020
/* Panel backgrounds */
21-
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22-
--background-core-app: #c7dafc; /* message list background */
21+
--str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--str-chat__background-core-app: #c7dafc; /* message list background */
2323

2424
/* Focus ring */
25-
--border-utility-focused: #1e40af;
25+
--str-chat__border-utility-focused: #1e40af;
2626

2727
/* Radii */
28-
--radius-max: 8px;
29-
--button-radius-full: 6px;
28+
--str-chat__radius-max: 8px;
29+
--str-chat__button-radius-full: 6px;
3030
}
3131
}
3232

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@
44
@layer stream-overrides {
55
.custom-theme {
66
/* Accent */
7-
--accent-primary: #0d47a1;
7+
--str-chat__accent-primary: #0d47a1;
88

99
/* 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;
10+
--str-chat__chat-bg-outgoing: #1e3a8a;
11+
--str-chat__chat-bg-attachment-outgoing: #0d47a1;
12+
--str-chat__chat-bg-incoming: #dbeafe;
13+
--str-chat__chat-text-outgoing: #ffffff;
14+
--str-chat__chat-reply-indicator-outgoing: #93c5fd;
1515

1616
/* Links */
17-
--text-link: #1e40af;
18-
--chat-text-link: #93c5fd;
17+
--str-chat__text-link: #1e40af;
18+
--str-chat__chat-text-link: #93c5fd;
1919

2020
/* Panel backgrounds */
21-
--background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22-
--background-core-app: #c7dafc; /* message list background */
21+
--str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
22+
--str-chat__background-core-app: #c7dafc; /* message list background */
2323

2424
/* Focus ring */
25-
--border-utility-focused: #1e40af;
25+
--str-chat__border-utility-focused: #1e40af;
2626

2727
/* Radii */
28-
--radius-max: 8px;
29-
--button-radius-full: 6px;
28+
--str-chat__radius-max: 8px;
29+
--str-chat__button-radius-full: 6px;
3030
}
3131
}
3232

0 commit comments

Comments
 (0)