Introduce StreamDesign tokens in the Compose Video SDK

Replace the video token layer (StreamColors, StreamDimens,
StreamTypography, StreamShapes) with the shared StreamDesign token
system, vendored like the chat SDK does.

Token source: the core and video namespaces of design-system-tokens
after the namespace restructure (PR #66, commit 8ad91b47). The classes
in theme/design are generated from that source; the JSON snapshot is
kept locally in .figma-tokens and not versioned, as in chat:
- StreamDesign.Colors: 60 public semantic tokens (accent, text,
  background, border, avatar, system) derived from the brand and chrome
  scales at construction, plus internal component tokens (button, badge,
  control, input, label, tab). default() and defaultDark() take the
  scales as parameters; ColorScale.from(brandColor) re-brands from one
  color.
- StreamDesign.Typography: the design system text styles.
- StreamPrimitiveColors and StreamTokens (internal): raw palette,
  spacing, radius, sizes, strokes, font primitives and component sizes.
Video-only tokens (indicator and accept-call colors) are internal
extensions in the theme package, so the design package can move to a
shared module unchanged.

VideoTheme: isInDarkMode selects the light or dark palette; the ripple
derives from the colors; LocalContentColor is textPrimary because the
new typography carries no color. The text style providers set the role
colors explicitly.

Usages across the SDK, the demo app and the tutorials are migrated. The
SDK uses StreamTokens; the apps use literal values because StreamTokens
is internal. Labels drawn over video overlays use textOnAccent (white in
both modes) and the moderation warning takes its colors from the theme.
GenericContainer.roundness is a CornerSize now. The unused
textSizeResource helper is removed.

Goldens are re-recorded once: the new palette applies immediately and
light and dark now render differently. apiDump updated.

Author: andremion

demo-app/src/main/kotlin/io/getstream/video/android/DeeplinkingActivity.kt

@@ -66,11 +66,11 @@ class DeeplinkingActivity : ComponentActivity() {
                 Box(
                     modifier = Modifier
                         .fillMaxSize()
-                        .background(VideoTheme.colors.baseSheetPrimary),
+                        .background(VideoTheme.colors.backgroundCoreApp),
                 ) {
                     CircularProgressIndicator(
                         modifier = Modifier.align(Alignment.Center),
-                        color = VideoTheme.colors.brandPrimary,
+                        color = VideoTheme.colors.accentPrimary,
                     )
                 }
             }

demo-app/src/main/kotlin/io/getstream/video/android/DemoAudioCallContent.kt

@@ -26,6 +26,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.getstream.video.android.compose.theme.VideoTheme
 import io.getstream.video.android.compose.ui.components.base.styling.StreamFixedSizeButtonStyle
@@ -54,7 +55,7 @@ fun DemoAudioCallContent(
             AudioOnlyCallControls(
                 modifier = Modifier
                     .align(Alignment.BottomCenter)
-                    .padding(bottom = VideoTheme.dimens.genericXxl),
+                    .padding(bottom = 44.dp),
                 isMicrophoneEnabled = micEnabled,
                 isSpeakerEnabled = isSpeakerEnabled,
                 onCallAction = onCallAction,

demo-app/src/main/kotlin/io/getstream/video/android/DemoOutgoingCallContent.kt

@@ -27,6 +27,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.getstream.video.android.compose.theme.VideoTheme
 import io.getstream.video.android.compose.ui.components.call.controls.actions.CancelCallAction
@@ -65,7 +66,7 @@ fun DemoOutgoingCallContent(
             OutgoingCallControls(
                 modifier = Modifier
                     .align(Alignment.BottomCenter)
-                    .padding(bottom = VideoTheme.dimens.genericXxl),
+                    .padding(bottom = 44.dp),
                 isVideoType,
                 isCameraEnabled,
                 micEnabled,

demo-app/src/main/kotlin/io/getstream/video/android/MainActivity.kt

@@ -90,7 +90,7 @@ class MainActivity : ComponentActivity() {
                 VideoTheme {
                     AppNavHost(
                         modifier = Modifier
-                            .background(VideoTheme.colors.baseSheetPrimary)
+                            .background(VideoTheme.colors.backgroundCoreApp)
                             .systemBarsPadding(),
                         startDestination = if (!isLoggedIn) {
                             AppScreens.Login.routeWithArg(true) // Pass true for autoLogIn

demo-app/src/main/kotlin/io/getstream/video/android/tooling/ui/ExceptionTraceScreen.kt

@@ -58,7 +58,7 @@ internal fun ExceptionTraceScreen(packageName: String, message: String) {
         modifier =
         Modifier
             .verticalScroll(scrollState)
-            .background(VideoTheme.colors.baseSheetPrimary)
+            .background(VideoTheme.colors.backgroundCoreApp)
             .padding(16.dp),
     ) {
         val context: Context = LocalContext.current
@@ -75,7 +75,7 @@ internal fun ExceptionTraceScreen(packageName: String, message: String) {
             Text(
                 modifier = Modifier.align(Alignment.CenterStart),
                 text = stringResource(id = R.string.stream_video_tooling_exception_log),
-                color = VideoTheme.colors.basePrimary,
+                color = VideoTheme.colors.textPrimary,
                 fontWeight = FontWeight.Bold,
                 fontSize = 16.sp,
             )
@@ -90,7 +90,7 @@ internal fun ExceptionTraceScreen(packageName: String, message: String) {
                         context.toast(R.string.stream_video_tooling_copy_into_clipboard)
                     },
                 imageVector = Icons.Filled.ContentCopy,
-                tint = VideoTheme.colors.basePrimary,
+                tint = VideoTheme.colors.textPrimary,
                 contentDescription = null,
             )
         }
@@ -101,12 +101,12 @@ internal fun ExceptionTraceScreen(packageName: String, message: String) {
             modifier =
             Modifier
                 .border(
-                    border = BorderStroke(2.dp, VideoTheme.colors.brandPrimary),
+                    border = BorderStroke(2.dp, VideoTheme.colors.accentPrimary),
                     shape = RoundedCornerShape(6.dp),
                 )
                 .padding(12.dp),
             text = message,
-            color = VideoTheme.colors.basePrimary,
+            color = VideoTheme.colors.textPrimary,
             fontSize = 14.sp,
         )
     }

demo-app/src/main/kotlin/io/getstream/video/android/ui/CallSettingsUi.kt

@@ -155,26 +155,26 @@ private fun CallSettingsContent(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(VideoTheme.colors.baseSheetPrimary),
+            .background(VideoTheme.colors.backgroundCoreApp),
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(VideoTheme.colors.baseSheetSecondary)
+                .background(VideoTheme.colors.backgroundCoreElevation1)
                 .padding(horizontal = 16.dp, vertical = 14.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(
                 text = "Call Settings",
-                style = VideoTheme.typography.subtitleM,
-                color = VideoTheme.colors.basePrimary,
+                style = VideoTheme.typography.headingSmall,
+                color = VideoTheme.colors.textPrimary,
             )
 
             Box(
                 modifier = Modifier
                     .background(
-                        color = VideoTheme.colors.baseSheetTertiary,
+                        color = VideoTheme.colors.backgroundCoreSurfaceDefault,
                         shape = RoundedCornerShape(999.dp),
                     )
                     .clickable(onClick = onClose)
@@ -183,7 +183,7 @@ private fun CallSettingsContent(
                 Icon(
                     imageVector = Icons.Default.Close,
                     contentDescription = "Close",
-                    tint = VideoTheme.colors.basePrimary,
+                    tint = VideoTheme.colors.textPrimary,
                 )
             }
         }
@@ -193,8 +193,8 @@ private fun CallSettingsContent(
                 text = "Call service config registry is not available yet. " +
                     "Sign in / start the SDK first.",
                 modifier = Modifier.padding(16.dp),
-                style = VideoTheme.typography.bodyM,
-                color = VideoTheme.colors.baseSecondary,
+                style = VideoTheme.typography.bodyDefault,
+                color = VideoTheme.colors.textSecondary,
             )
             return@Column
         }
@@ -233,27 +233,27 @@ private fun CallTypeConfigCard(
         modifier = Modifier
             .fillMaxWidth()
             .background(
-                color = VideoTheme.colors.baseSheetSecondary,
+                color = VideoTheme.colors.backgroundCoreElevation1,
                 shape = RoundedCornerShape(16.dp),
             )
             .padding(16.dp),
     ) {
         Text(
             text = item.label,
-            style = VideoTheme.typography.labelL,
-            color = VideoTheme.colors.basePrimary,
+            style = VideoTheme.typography.headingLarge,
+            color = VideoTheme.colors.textPrimary,
         )
         Text(
             text = "type: ${item.callType.name}",
             modifier = Modifier.padding(top = 2.dp),
-            style = VideoTheme.typography.labelM,
-            color = VideoTheme.colors.baseSecondary,
+            style = VideoTheme.typography.bodyEmphasis,
+            color = VideoTheme.colors.textSecondary,
         )
         Text(
             text = "service: ${item.config.serviceClass.simpleName}",
             modifier = Modifier.padding(top = 2.dp, bottom = 8.dp),
-            style = VideoTheme.typography.labelM,
-            color = VideoTheme.colors.baseSecondary,
+            style = VideoTheme.typography.bodyEmphasis,
+            color = VideoTheme.colors.textSecondary,
         )
 
         ToggleRow(
@@ -270,8 +270,8 @@ private fun CallTypeConfigCard(
         Text(
             text = "Audio usage",
             modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
-            style = VideoTheme.typography.bodyS,
-            color = VideoTheme.colors.basePrimary,
+            style = VideoTheme.typography.captionDefault,
+            color = VideoTheme.colors.textPrimary,
         )
         AudioUsageSelector(
             selected = item.config.audioUsage,
@@ -295,17 +295,17 @@ private fun ToggleRow(
     ) {
         Text(
             text = label,
-            style = VideoTheme.typography.bodyS,
-            color = VideoTheme.colors.basePrimary,
+            style = VideoTheme.typography.captionDefault,
+            color = VideoTheme.colors.textPrimary,
         )
         Switch(
             checked = checked,
             onCheckedChange = onCheckedChange,
             colors = SwitchDefaults.colors(
-                checkedThumbColor = VideoTheme.colors.brandPrimary,
-                checkedTrackColor = VideoTheme.colors.brandPrimary,
-                uncheckedThumbColor = VideoTheme.colors.baseSecondary,
-                uncheckedTrackColor = VideoTheme.colors.baseSheetTertiary,
+                checkedThumbColor = VideoTheme.colors.accentPrimary,
+                checkedTrackColor = VideoTheme.colors.accentPrimary,
+                uncheckedThumbColor = VideoTheme.colors.textSecondary,
+                uncheckedTrackColor = VideoTheme.colors.backgroundCoreSurfaceDefault,
             ),
         )
     }
@@ -329,19 +329,19 @@ private fun AudioUsageSelector(
                 modifier = Modifier
                     .background(
                         color = if (isSelected) {
-                            VideoTheme.colors.brandPrimary
+                            VideoTheme.colors.accentPrimary
                         } else {
-                            VideoTheme.colors.baseSheetTertiary
+                            VideoTheme.colors.backgroundCoreSurfaceDefault
                         },
                         shape = RoundedCornerShape(999.dp),
                     )
                     .clickable { onSelected(option.value) }
                     .padding(horizontal = 12.dp, vertical = 8.dp),
-                style = VideoTheme.typography.bodyS,
+                style = VideoTheme.typography.captionDefault,
                 color = if (isSelected) {
-                    VideoTheme.colors.baseSheetPrimary
+                    VideoTheme.colors.backgroundCoreApp
                 } else {
-                    VideoTheme.colors.basePrimary
+                    VideoTheme.colors.textPrimary
                 },
             )
         }

demo-app/src/main/kotlin/io/getstream/video/android/ui/Dialog.kt

@@ -58,7 +58,7 @@ fun SingleButtonDialog(
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
                 Text(
-                    color = VideoTheme.colors.baseSheetPrimary,
+                    color = VideoTheme.colors.backgroundCoreApp,
                     fontWeight = FontWeight.Bold,
                     text = title,
                     fontSize = 18.sp,

demo-app/src/main/kotlin/io/getstream/video/android/ui/LogFileUi.kt

@@ -101,20 +101,20 @@ fun LogFilesScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(VideoTheme.colors.baseSheetPrimary),
+            .background(VideoTheme.colors.backgroundCoreApp),
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(VideoTheme.colors.baseSheetSecondary)
+                .background(VideoTheme.colors.backgroundCoreElevation1)
                 .padding(horizontal = 16.dp, vertical = 14.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(
                 text = "Log Files",
-                style = VideoTheme.typography.subtitleM,
-                color = VideoTheme.colors.basePrimary,
+                style = VideoTheme.typography.headingSmall,
+                color = VideoTheme.colors.textPrimary,
             )
 
             Row(
@@ -131,14 +131,14 @@ fun LogFilesScreen(
                             reloadFiles()
                         }
                     },
-                    style = VideoTheme.typography.bodyS,
-                    color = VideoTheme.colors.brandPrimary,
+                    style = VideoTheme.typography.captionDefault,
+                    color = VideoTheme.colors.accentPrimary,
                 )
 
                 Box(
                     modifier = Modifier
                         .background(
-                            color = VideoTheme.colors.baseSheetTertiary,
+                            color = VideoTheme.colors.backgroundCoreSurfaceDefault,
                             shape = RoundedCornerShape(999.dp),
                         )
                         .clickable(onClick = onClose)
@@ -147,7 +147,7 @@ fun LogFilesScreen(
                     Icon(
                         imageVector = Icons.Default.Close,
                         contentDescription = "Close",
-                        tint = VideoTheme.colors.basePrimary,
+                        tint = VideoTheme.colors.textPrimary,
                     )
                 }
             }
@@ -182,8 +182,8 @@ private fun LogFileRow(
     ) {
         Text(
             text = item.file.name,
-            style = VideoTheme.typography.labelL,
-            color = VideoTheme.colors.basePrimary,
+            style = VideoTheme.typography.headingLarge,
+            color = VideoTheme.colors.textPrimary,
         )
 
         Row(
@@ -200,8 +200,8 @@ private fun LogFileRow(
         Text(
             text = item.file.absolutePath,
             modifier = Modifier.padding(top = 10.dp),
-            style = VideoTheme.typography.labelM,
-            color = VideoTheme.colors.baseSecondary,
+            style = VideoTheme.typography.bodyEmphasis,
+            color = VideoTheme.colors.textSecondary,
         )
     }
 }
@@ -212,12 +212,12 @@ private fun LogMetaChip(text: String) {
         text = text,
         modifier = Modifier
             .background(
-                color = VideoTheme.colors.baseSheetTertiary,
+                color = VideoTheme.colors.backgroundCoreSurfaceDefault,
                 shape = RoundedCornerShape(999.dp),
             )
             .padding(horizontal = 10.dp, vertical = 6.dp),
-        style = VideoTheme.typography.bodyS,
-        color = VideoTheme.colors.basePrimary,
+        style = VideoTheme.typography.captionDefault,
+        color = VideoTheme.colors.textPrimary,
     )
 }
 

demo-app/src/main/kotlin/io/getstream/video/android/ui/call/AvailableDeviceMenu.kt

@@ -66,8 +66,8 @@ fun AvailableDeviceMenu(
         Card(
             modifier = Modifier.width(140.dp),
             shape = RoundedCornerShape(12.dp),
-            contentColor = VideoTheme.colors.basePrimary,
-            backgroundColor = VideoTheme.colors.baseSheetPrimary,
+            contentColor = VideoTheme.colors.textPrimary,
+            backgroundColor = VideoTheme.colors.backgroundCoreApp,
             elevation = 6.dp,
         ) {
             LazyColumn(
@@ -90,7 +90,7 @@ fun AvailableDeviceMenu(
                                     .show()
                             },
                         text = audioDevice.name,
-                        color = VideoTheme.colors.basePrimary,
+                        color = VideoTheme.colors.textPrimary,
                     )
                 }
             }