docs: rework React theming — capture harness + tutorial example (#3133)

## Summary

Two sets of changes that together bring the React SDK's theming story up
to date with v14:

1. **Rework the Playwright screenshot pipeline** used for the React
theming doc (`docs-content:
chat-sdk/react/v14-latest/02-ui-components/02-theming/01-themingv2.md`).
2. **Sync `examples/tutorial`** so its per-step `layout.css` + `App.tsx`
match the revised tutorial published in getstream.io-tutorials.

Companion doc-content PR: **GetStream/docs-content#1213** — rewrites the
theming doc with working v14 tokens and regenerates every screenshot
using the harness in this PR.

### 1. Capture-harness rework (`examples/vite/docs-playwright/`)

**Pipeline reliability**
- Shared capture context across all screenshots (previously each page
spun up a fresh context, racing an empty channel list on themed
variants).
- Viewport bumped to 1280×1200 at 1× DPR (portrait framing fits more of
the conversation).
- `scrollToLatest()` before every screenshot so both users' latest
bubbles are in frame.
- `waitForChatUI()` now also waits for at least one rendered
`.str-chat__li` before the capture fires.
- Explicit channel create with both members + friendly name + truncate
so reruns don't accumulate duplicate seed messages.
- Headless by default. Set `HEADED=1` to override.
- Fixed `ASSETS_DIR` — previous path (`../../docs/...`) resolved to a
non-existent directory.

**Content**
- Extracted CSS override blocks to
`docs-playwright/theming-variants.mjs` so the harness and the doc stay
in lockstep.
- Rewrote the seed conversation: two-user dialogue, markdown
(`**bold**`, `*italic*`, `` `code` ``), GitHub URL preview, images,
richer reaction variety.
- Dropped obsolete capture flows (link-attachment text color,
layout-only CSS) — neither applies to v14.

**Deps**
- Added `@playwright/test@^1.59.1` as a devDep of `examples/vite`.

### 2. `examples/tutorial` sync

The per-step tutorial example was still using tokens that have **zero
consumers** in v14's built CSS (`--brand-50..900`, `--radius-full`) and
scoped the custom theme to `.str-chat__theme-custom`, which colonizes
the SDK's `str-chat__` namespace for a user-defined class.

- `layout.css` for steps 3–7 (byte-identical before this change):
replaced the dead overrides with the semantic-token block used in the
published tutorial.
- `App.tsx` for steps 3/4/5: renamed `theme='str-chat__theme-custom'` →
`theme='custom-theme'`.

### Test plan

**Capture harness:**
```bash
cd examples/vite
yarn install
yarn dev
# in another shell
node docs-playwright/seed-channel-and-screenshot.mjs              # seed + capture
node docs-playwright/seed-channel-and-screenshot.mjs --skip-seed  # just recapture
```

Output lands in
`../../../../docs/data/docs/chat-sdk/react/v14-latest/_assets/`. Use
`HEADED=1 node ...` to watch the browser.

**Tutorial example:**
```bash
cd examples/tutorial
yarn install
yarn dev
# visit each step and confirm the themed screens render with the new
# deep-blue palette (navy outgoing bubbles, light-blue incoming,
# pale-blue panel tint)
```

Author: oliverlaz

examples/tutorial/.env.example

@@ -1,4 +1,14 @@
+# Required: your Stream app's public key.
 VITE_API_KEY=REPLACE_WITH_API_KEY
-VITE_USER_ID=REPLACE_WITH_USER_ID
-VITE_USER_NAME=REPLACE_WITH_USER_NAME
-VITE_USER_TOKEN=REPLACE_WITH_USER_TOKEN
+
+# Optional. If unset, the app defaults to user_id "react-tutorial" and
+# derives user_name from it. You can also override either value per-run
+# via URL params:  ?user_id=alice&user_name=Alice
+# VITE_USER_ID=react-tutorial
+# VITE_USER_NAME=React Tutorial
+
+# Optional. Token endpoint used to mint a fresh JWT for the active
+# user_id. Defaults to Stream's demo endpoint; override if you're
+# pointing at a different Stream app / token service.
+# VITE_TOKEN_ENDPOINT=https://pronto.getstream.io/api/auth/create-token
+# VITE_TOKEN_ENVIRONMENT=demo

examples/tutorial/src/1-client-setup/App.tsx

@@ -1,10 +1,10 @@
 import { Chat, useCreateChatClient } from 'stream-chat-react';
-import { apiKey, userId, userName, userToken } from './credentials';
+import { apiKey, userId, userName, tokenProvider } from './credentials';
 
 const App = () => {
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: { id: userId, name: userName },
   });
 

examples/tutorial/src/1-client-setup/credentials.ts

@@ -1,5 +1,45 @@
-// your Stream app information
+// Stream Chat credentials for the tutorial example.
+//
+// The example fetches a fresh JWT from pronto.getstream.io for whichever
+// user_id is active, so the app stays runnable without pasting a token
+// that expires, and you can switch users via URL params at runtime:
+//
+//   ?user_id=alice                           // different user
+//   ?user_id=alice&user_name=Alice           // + display name override
+//
+// Notes:
+// - apiKey is the one thing you still need to set (via VITE_API_KEY).
+// - The token endpoint and environment default to the values shared with
+//   the other example apps in this repo; override with VITE_TOKEN_ENDPOINT
+//   and VITE_TOKEN_ENVIRONMENT if you're pointing at a different Stream
+//   app.
+
+const searchParams = new URLSearchParams(window.location.search);
+
 export const apiKey = import.meta.env.VITE_API_KEY;
-export const userId = import.meta.env.VITE_USER_ID;
-export const userName = import.meta.env.VITE_USER_NAME;
-export const userToken = import.meta.env.VITE_USER_TOKEN;
+
+export const userId =
+  searchParams.get('user_id') || import.meta.env.VITE_USER_ID || 'react-tutorial';
+
+export const userName =
+  searchParams.get('user_name') || import.meta.env.VITE_USER_NAME || userId;
+
+const tokenEndpoint =
+  import.meta.env.VITE_TOKEN_ENDPOINT ||
+  'https://pronto.getstream.io/api/auth/create-token';
+const tokenEnvironment = import.meta.env.VITE_TOKEN_ENVIRONMENT || 'demo';
+
+// Stream's `useCreateChatClient` accepts either a token string or a provider
+// function. A provider lets the SDK refresh the token on reconnect, which is
+// what we want for a long-running example session.
+export const tokenProvider = async (): Promise<string> => {
+  const url = `${tokenEndpoint}?environment=${encodeURIComponent(
+    tokenEnvironment,
+  )}&user_id=${encodeURIComponent(userId)}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to mint token from ${tokenEndpoint} (${response.status})`);
+  }
+  const data = (await response.json()) as { token: string };
+  return data.token;
+};

examples/tutorial/src/2-core-component-setup/App.tsx

@@ -13,7 +13,7 @@ import {
 
 import 'stream-chat-react/dist/css/index.css';
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -25,7 +25,7 @@ const App = () => {
   const [channel, setChannel] = useState<StreamChannel>();
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 

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

@@ -12,7 +12,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -32,14 +32,14 @@ const options: ChannelOptions = {
 const App = () => {
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 
   if (!client) return <div>Setting up client & connection...</div>;
 
   return (
-    <Chat client={client} theme='str-chat__theme-custom'>
+    <Chat client={client} theme='custom-theme'>
       <ChannelList filters={filters} sort={sort} options={options} />
       <Channel>
         <Window>

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

@@ -2,20 +2,31 @@
 @import 'stream-chat-react/dist/css/index.css' layer(stream);
 
 @layer stream-overrides {
-  .str-chat__theme-custom {
-    --brand-50: #edf7f7;
-    --brand-100: #e0f2f1;
-    --brand-150: #b2dfdb;
-    --brand-200: #80cbc4;
-    --brand-300: #4db6ac;
-    --brand-400: #26a69a;
-    --brand-500: #009688;
-    --brand-600: #00897b;
-    --brand-700: #00796b;
-    --brand-800: #00695c;
-    --brand-900: #004d40;
-    --accent-primary: var(--brand-500);
-    --radius-full: 6px;
+  .custom-theme {
+    /* Accent */
+    --accent-primary: #0d47a1;
+
+    /* Message bubble colors */
+    --chat-bg-outgoing: #1e3a8a;
+    --chat-bg-attachment-outgoing: #0d47a1;
+    --chat-bg-incoming: #dbeafe;
+    --chat-text-outgoing: #ffffff;
+    --chat-reply-indicator-outgoing: #93c5fd;
+
+    /* Links */
+    --text-link: #1e40af;
+    --chat-text-link: #93c5fd;
+
+    /* Panel backgrounds */
+    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --background-core-app: #c7dafc;         /* message list background */
+
+    /* Focus ring */
+    --border-utility-focused: #1e40af;
+
+    /* Radii */
+    --radius-max: 8px;
+    --button-radius-full: 6px;
   }
 }
 

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

@@ -17,7 +17,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -118,7 +118,7 @@ const App = () => {
   const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 
@@ -151,7 +151,7 @@ const App = () => {
         Message: CustomMessage,
       }}
     >
-      <Chat client={client} theme='str-chat__theme-custom'>
+      <Chat client={client} theme='custom-theme'>
         <ChannelList filters={filters} sort={sort} options={options} />
         <Channel>
           <Window>

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

@@ -2,20 +2,31 @@
 @import 'stream-chat-react/dist/css/index.css' layer(stream);
 
 @layer stream-overrides {
-  .str-chat__theme-custom {
-    --brand-50: #edf7f7;
-    --brand-100: #e0f2f1;
-    --brand-150: #b2dfdb;
-    --brand-200: #80cbc4;
-    --brand-300: #4db6ac;
-    --brand-400: #26a69a;
-    --brand-500: #009688;
-    --brand-600: #00897b;
-    --brand-700: #00796b;
-    --brand-800: #00695c;
-    --brand-900: #004d40;
-    --accent-primary: var(--brand-500);
-    --radius-full: 6px;
+  .custom-theme {
+    /* Accent */
+    --accent-primary: #0d47a1;
+
+    /* Message bubble colors */
+    --chat-bg-outgoing: #1e3a8a;
+    --chat-bg-attachment-outgoing: #0d47a1;
+    --chat-bg-incoming: #dbeafe;
+    --chat-text-outgoing: #ffffff;
+    --chat-reply-indicator-outgoing: #93c5fd;
+
+    /* Links */
+    --text-link: #1e40af;
+    --chat-text-link: #93c5fd;
+
+    /* Panel backgrounds */
+    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --background-core-app: #c7dafc;         /* message list background */
+
+    /* Focus ring */
+    --border-utility-focused: #1e40af;
+
+    /* Radii */
+    --radius-max: 8px;
+    --button-radius-full: 6px;
   }
 }
 

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

@@ -19,7 +19,7 @@ import {
 } from 'stream-chat-react';
 
 import './layout.css';
-import { apiKey, userId, userName, userToken } from '../1-client-setup/credentials';
+import { apiKey, userId, userName, tokenProvider } from '../1-client-setup/credentials';
 
 const user: User = {
   id: userId,
@@ -76,7 +76,7 @@ const App = () => {
   const [channel, setChannel] = useState<StreamChannel>();
   const client = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: user,
   });
 
@@ -118,7 +118,7 @@ const App = () => {
 
   return (
     <WithComponents overrides={{ Attachment: CustomAttachment }}>
-      <Chat client={client} theme='str-chat__theme-custom'>
+      <Chat client={client} theme='custom-theme'>
         <Channel channel={channel}>
           <Window>
             <ChannelHeader />

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

@@ -2,20 +2,31 @@
 @import 'stream-chat-react/dist/css/index.css' layer(stream);
 
 @layer stream-overrides {
-  .str-chat__theme-custom {
-    --brand-50: #edf7f7;
-    --brand-100: #e0f2f1;
-    --brand-150: #b2dfdb;
-    --brand-200: #80cbc4;
-    --brand-300: #4db6ac;
-    --brand-400: #26a69a;
-    --brand-500: #009688;
-    --brand-600: #00897b;
-    --brand-700: #00796b;
-    --brand-800: #00695c;
-    --brand-900: #004d40;
-    --accent-primary: var(--brand-500);
-    --radius-full: 6px;
+  .custom-theme {
+    /* Accent */
+    --accent-primary: #0d47a1;
+
+    /* Message bubble colors */
+    --chat-bg-outgoing: #1e3a8a;
+    --chat-bg-attachment-outgoing: #0d47a1;
+    --chat-bg-incoming: #dbeafe;
+    --chat-text-outgoing: #ffffff;
+    --chat-reply-indicator-outgoing: #93c5fd;
+
+    /* Links */
+    --text-link: #1e40af;
+    --chat-text-link: #93c5fd;
+
+    /* Panel backgrounds */
+    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --background-core-app: #c7dafc;         /* message list background */
+
+    /* Focus ring */
+    --border-utility-focused: #1e40af;
+
+    /* Radii */
+    --radius-max: 8px;
+    --button-radius-full: 6px;
   }
 }