docs(examples/tutorial): update theming tokens to --str-chat__ prefix

[ndhuutai]

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).

Summary by CodeRabbit

• Chores
  • Updated tutorial example files across multiple sections to use standardized CSS variable naming conventions for theming and styling consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fe412bca-cc96-4962-a29b-921e23dde0be

📥 Commits

Reviewing files that changed from the base of the PR and between 4c934ae and 0e457b6.

📒 Files selected for processing (5)

• examples/tutorial/src/3-channel-list/layout.css
• examples/tutorial/src/4-custom-ui-components/layout.css
• examples/tutorial/src/5-custom-attachment-type/layout.css
• examples/tutorial/src/6-emoji-picker/layout.css
• examples/tutorial/src/7-livestream/layout.css

---

📝 Walkthrough

Walkthrough

Five tutorial example CSS files systematically rename custom property declarations from unprefixed/generic names to --str-chat__*-prefixed design tokens within @layer stream-overrides blocks, standardizing the namespace across accent, bubble, background, link, focus ring, and radius variables.

Changes

CSS Design Token Namespace Migration in Tutorial Examples

Layer / File(s)	Summary
Tutorial Examples CSS Variable Migration examples/tutorial/src/3-channel-list/layout.css, examples/tutorial/src/4-custom-ui-components/layout.css, examples/tutorial/src/5-custom-attachment-type/layout.css, examples/tutorial/src/6-emoji-picker/layout.css, examples/tutorial/src/7-livestream/layout.css	Five tutorial example files migrate .custom-theme CSS custom properties to the --str-chat__*-prefixed namespace for accent, outgoing/incoming bubble and attachment backgrounds, link colors, panel backgrounds, focus ring, and border/button radii, preserving the original color and radius values.

Estimated Code Review Effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 Five stylesheets hop in line,
CSS tokens now align,
--str-chat__ the names now shine,
Colors stay the same, by design!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: updating theming tokens to use the --str-chat__ prefix across tutorial examples.
Description check	✅ Passed	The description includes all required sections (Goal, Implementation details, and UI Changes) with thorough context about the prior PR changes and the rationale for the update.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/fix-tutorial-theming-tokens

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Change: +8 B (0%)

Total Size: 656 kB

📦 View Changed

Filename	Size	Change
dist/es/emojis.mjs	2.47 kB	+2 B (+0.08%)
dist/es/index.mjs	251 kB	+3 B (0%)
dist/es/useNotificationApi.mjs	48.5 kB	+3 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.74 kB
dist/cjs/emojis.js	2.54 kB
dist/cjs/index.js	255 kB
dist/cjs/mp3-encoder.js	814 B
dist/cjs/ReactPlayerWrapper.js	546 B
dist/cjs/useNotificationApi.js	49.8 kB
dist/css/emoji-picker.css	178 B
dist/css/emoji-replacement.css	456 B
dist/css/index.css	39.7 kB
dist/es/audioProcessing.mjs	1.65 kB
dist/es/mp3-encoder.mjs	768 B
dist/es/ReactPlayerWrapper.mjs	485 B

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.83%. Comparing base (4c934ae) to head (0e457b6).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3207      +/-   ##
==========================================
- Coverage   83.85%   83.83%   -0.02%     
==========================================
  Files         439      439              
  Lines       13203    13203              
  Branches     4280     4280              
==========================================
- Hits        11071    11069       -2     
- Misses       2132     2134       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[stream-ci-bot]

🎉 This PR is included in version 14.4.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀