From 0e457b6610be0584e3c549c2e00024698c7878b1 Mon Sep 17 00:00:00 2001
From: Tai Nguyen <tainguyen@Tais-MacBook-Pro-M4.local>
Date: Wed, 3 Jun 2026 14:27:24 -0600
Subject: [PATCH] docs(examples/tutorial): update theming tokens to
 --str-chat__ prefix

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.
---
 .../tutorial/src/3-channel-list/layout.css    | 26 +++++++++----------
 .../src/4-custom-ui-components/layout.css     | 26 +++++++++----------
 .../src/5-custom-attachment-type/layout.css   | 26 +++++++++----------
 .../tutorial/src/6-emoji-picker/layout.css    | 26 +++++++++----------
 examples/tutorial/src/7-livestream/layout.css | 26 +++++++++----------
 5 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/examples/tutorial/src/3-channel-list/layout.css b/examples/tutorial/src/3-channel-list/layout.css
index 3ee1c6ae5..2fd790e68 100644
--- a/examples/tutorial/src/3-channel-list/layout.css
+++ b/examples/tutorial/src/3-channel-list/layout.css
@@ -4,29 +4,29 @@
 @layer stream-overrides {
   .custom-theme {
     /* Accent */
-    --accent-primary: #0d47a1;
+    --str-chat__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;
+    --str-chat__chat-bg-outgoing: #1e3a8a;
+    --str-chat__chat-bg-attachment-outgoing: #0d47a1;
+    --str-chat__chat-bg-incoming: #dbeafe;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #93c5fd;
 
     /* Links */
-    --text-link: #1e40af;
-    --chat-text-link: #93c5fd;
+    --str-chat__text-link: #1e40af;
+    --str-chat__chat-text-link: #93c5fd;
 
     /* Panel backgrounds */
-    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --str-chat__background-core-app: #c7dafc;         /* message list background */
 
     /* Focus ring */
-    --border-utility-focused: #1e40af;
+    --str-chat__border-utility-focused: #1e40af;
 
     /* Radii */
-    --radius-max: 8px;
-    --button-radius-full: 6px;
+    --str-chat__radius-max: 8px;
+    --str-chat__button-radius-full: 6px;
   }
 }
 
diff --git a/examples/tutorial/src/4-custom-ui-components/layout.css b/examples/tutorial/src/4-custom-ui-components/layout.css
index 3ee1c6ae5..2fd790e68 100644
--- a/examples/tutorial/src/4-custom-ui-components/layout.css
+++ b/examples/tutorial/src/4-custom-ui-components/layout.css
@@ -4,29 +4,29 @@
 @layer stream-overrides {
   .custom-theme {
     /* Accent */
-    --accent-primary: #0d47a1;
+    --str-chat__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;
+    --str-chat__chat-bg-outgoing: #1e3a8a;
+    --str-chat__chat-bg-attachment-outgoing: #0d47a1;
+    --str-chat__chat-bg-incoming: #dbeafe;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #93c5fd;
 
     /* Links */
-    --text-link: #1e40af;
-    --chat-text-link: #93c5fd;
+    --str-chat__text-link: #1e40af;
+    --str-chat__chat-text-link: #93c5fd;
 
     /* Panel backgrounds */
-    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --str-chat__background-core-app: #c7dafc;         /* message list background */
 
     /* Focus ring */
-    --border-utility-focused: #1e40af;
+    --str-chat__border-utility-focused: #1e40af;
 
     /* Radii */
-    --radius-max: 8px;
-    --button-radius-full: 6px;
+    --str-chat__radius-max: 8px;
+    --str-chat__button-radius-full: 6px;
   }
 }
 
diff --git a/examples/tutorial/src/5-custom-attachment-type/layout.css b/examples/tutorial/src/5-custom-attachment-type/layout.css
index 3ee1c6ae5..2fd790e68 100644
--- a/examples/tutorial/src/5-custom-attachment-type/layout.css
+++ b/examples/tutorial/src/5-custom-attachment-type/layout.css
@@ -4,29 +4,29 @@
 @layer stream-overrides {
   .custom-theme {
     /* Accent */
-    --accent-primary: #0d47a1;
+    --str-chat__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;
+    --str-chat__chat-bg-outgoing: #1e3a8a;
+    --str-chat__chat-bg-attachment-outgoing: #0d47a1;
+    --str-chat__chat-bg-incoming: #dbeafe;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #93c5fd;
 
     /* Links */
-    --text-link: #1e40af;
-    --chat-text-link: #93c5fd;
+    --str-chat__text-link: #1e40af;
+    --str-chat__chat-text-link: #93c5fd;
 
     /* Panel backgrounds */
-    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --str-chat__background-core-app: #c7dafc;         /* message list background */
 
     /* Focus ring */
-    --border-utility-focused: #1e40af;
+    --str-chat__border-utility-focused: #1e40af;
 
     /* Radii */
-    --radius-max: 8px;
-    --button-radius-full: 6px;
+    --str-chat__radius-max: 8px;
+    --str-chat__button-radius-full: 6px;
   }
 }
 
diff --git a/examples/tutorial/src/6-emoji-picker/layout.css b/examples/tutorial/src/6-emoji-picker/layout.css
index 3ee1c6ae5..2fd790e68 100644
--- a/examples/tutorial/src/6-emoji-picker/layout.css
+++ b/examples/tutorial/src/6-emoji-picker/layout.css
@@ -4,29 +4,29 @@
 @layer stream-overrides {
   .custom-theme {
     /* Accent */
-    --accent-primary: #0d47a1;
+    --str-chat__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;
+    --str-chat__chat-bg-outgoing: #1e3a8a;
+    --str-chat__chat-bg-attachment-outgoing: #0d47a1;
+    --str-chat__chat-bg-incoming: #dbeafe;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #93c5fd;
 
     /* Links */
-    --text-link: #1e40af;
-    --chat-text-link: #93c5fd;
+    --str-chat__text-link: #1e40af;
+    --str-chat__chat-text-link: #93c5fd;
 
     /* Panel backgrounds */
-    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --str-chat__background-core-app: #c7dafc;         /* message list background */
 
     /* Focus ring */
-    --border-utility-focused: #1e40af;
+    --str-chat__border-utility-focused: #1e40af;
 
     /* Radii */
-    --radius-max: 8px;
-    --button-radius-full: 6px;
+    --str-chat__radius-max: 8px;
+    --str-chat__button-radius-full: 6px;
   }
 }
 
diff --git a/examples/tutorial/src/7-livestream/layout.css b/examples/tutorial/src/7-livestream/layout.css
index 3ee1c6ae5..2fd790e68 100644
--- a/examples/tutorial/src/7-livestream/layout.css
+++ b/examples/tutorial/src/7-livestream/layout.css
@@ -4,29 +4,29 @@
 @layer stream-overrides {
   .custom-theme {
     /* Accent */
-    --accent-primary: #0d47a1;
+    --str-chat__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;
+    --str-chat__chat-bg-outgoing: #1e3a8a;
+    --str-chat__chat-bg-attachment-outgoing: #0d47a1;
+    --str-chat__chat-bg-incoming: #dbeafe;
+    --str-chat__chat-text-outgoing: #ffffff;
+    --str-chat__chat-reply-indicator-outgoing: #93c5fd;
 
     /* Links */
-    --text-link: #1e40af;
-    --chat-text-link: #93c5fd;
+    --str-chat__text-link: #1e40af;
+    --str-chat__chat-text-link: #93c5fd;
 
     /* Panel backgrounds */
-    --background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
+    --str-chat__background-core-app: #c7dafc;         /* message list background */
 
     /* Focus ring */
-    --border-utility-focused: #1e40af;
+    --str-chat__border-utility-focused: #1e40af;
 
     /* Radii */
-    --radius-max: 8px;
-    --button-radius-full: 6px;
+    --str-chat__radius-max: 8px;
+    --str-chat__button-radius-full: 6px;
   }
 }