feat(UI): update tokens

apps/design_system_gallery/lib/app/gallery_app.directories.g.dart

@@ -55,7 +55,7 @@ import 'package:design_system_gallery/components/message_composer/message_compos
 import 'package:design_system_gallery/components/message_composer/message_composer_attachment_reply.dart'
     as _design_system_gallery_components_message_composer_message_composer_attachment_reply;
 import 'package:design_system_gallery/components/reaction/stream_reactions.dart'
-    as _design_system_gallery_components_reaction_stream_reaction;
+    as _design_system_gallery_components_reaction_stream_reactions;
 import 'package:design_system_gallery/components/tiles/stream_list_tile.dart'
     as _design_system_gallery_components_tiles_stream_list_tile;
 import 'package:design_system_gallery/primitives/colors.dart'
@@ -579,13 +579,13 @@ final directories = <_widgetbook.WidgetbookNode>[
               _widgetbook.WidgetbookUseCase(
                 name: 'Playground',
                 builder:
-                    _design_system_gallery_components_reaction_stream_reaction
+                    _design_system_gallery_components_reaction_stream_reactions
                         .buildStreamReactionsPlayground,
               ),
               _widgetbook.WidgetbookUseCase(
                 name: 'Showcase',
                 builder:
-                    _design_system_gallery_components_reaction_stream_reaction
+                    _design_system_gallery_components_reaction_stream_reactions
                         .buildStreamReactionsShowcase,
               ),
             ],

apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart

@@ -83,6 +83,8 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
                     SizedBox(height: spacing.md),
                     _buildBrandSection(context),
                     SizedBox(height: spacing.md),
+                    _buildChromeSection(context),
+                    SizedBox(height: spacing.md),
                     _buildAccentColorsSection(context),
                     SizedBox(height: spacing.md),
                     _buildTextColorsSection(context),
@@ -224,6 +226,20 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
     );
   }
 
+  Widget _buildChromeSection(BuildContext context) {
+    final config = context.read<ThemeConfiguration>();
+    return SectionCard(
+      title: 'Chrome Color',
+      subtitle: 'chrome',
+      icon: Icons.circle_outlined,
+      child: ColorPickerTile(
+        label: 'chromePrimary',
+        color: config.chromePrimaryColor,
+        onColorChanged: config.setChromePrimaryColor,
+      ),
+    );
+  }
+
   Widget _buildAccentColorsSection(BuildContext context) {
     final config = context.read<ThemeConfiguration>();
     return SectionCard(
@@ -312,17 +328,62 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
 
   Widget _buildBackgroundColorsSection(BuildContext context) {
     final config = context.read<ThemeConfiguration>();
+    final spacing = context.streamSpacing;
     return SectionCard(
       title: 'Background Colors',
       subtitle: 'background*',
       icon: Icons.format_paint,
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           ColorPickerTile(
             label: 'backgroundApp',
             color: config.backgroundApp,
             onColorChanged: config.setBackgroundApp,
           ),
+          ColorPickerTile(
+            label: 'backgroundInverse',
+            color: config.backgroundInverse,
+            onColorChanged: config.setBackgroundInverse,
+          ),
+          ColorPickerTile(
+            label: 'backgroundOnAccent',
+            color: config.backgroundOnAccent,
+            onColorChanged: config.setBackgroundOnAccent,
+          ),
+          ColorPickerTile(
+            label: 'backgroundHighlight',
+            color: config.backgroundHighlight,
+            onColorChanged: config.setBackgroundHighlight,
+          ),
+          ColorPickerTile(
+            label: 'backgroundScrim',
+            color: config.backgroundScrim,
+            onColorChanged: config.setBackgroundScrim,
+          ),
+          ColorPickerTile(
+            label: 'backgroundOverlayLight',
+            color: config.backgroundOverlayLight,
+            onColorChanged: config.setBackgroundOverlayLight,
+          ),
+          ColorPickerTile(
+            label: 'backgroundOverlayDark',
+            color: config.backgroundOverlayDark,
+            onColorChanged: config.setBackgroundOverlayDark,
+          ),
+          ColorPickerTile(
+            label: 'backgroundDisabled',
+            color: config.backgroundDisabled,
+            onColorChanged: config.setBackgroundDisabled,
+          ),
+          SizedBox(height: spacing.xs),
+          Text(
+            'Surface',
+            style: context.streamTextTheme.captionEmphasis.copyWith(
+              color: context.streamColorScheme.textTertiary,
+            ),
+          ),
+          SizedBox(height: spacing.xs),
           ColorPickerTile(
             label: 'backgroundSurface',
             color: config.backgroundSurface,
@@ -339,14 +400,42 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
             onColorChanged: config.setBackgroundSurfaceStrong,
           ),
           ColorPickerTile(
-            label: 'backgroundOverlay',
-            color: config.backgroundOverlay,
-            onColorChanged: config.setBackgroundOverlay,
+            label: 'backgroundSurfaceCard',
+            color: config.backgroundSurfaceCard,
+            onColorChanged: config.setBackgroundSurfaceCard,
           ),
+          SizedBox(height: spacing.xs),
+          Text(
+            'Elevation',
+            style: context.streamTextTheme.captionEmphasis.copyWith(
+              color: context.streamColorScheme.textTertiary,
+            ),
+          ),
+          SizedBox(height: spacing.xs),
           ColorPickerTile(
-            label: 'backgroundDisabled',
-            color: config.backgroundDisabled,
-            onColorChanged: config.setBackgroundDisabled,
+            label: 'backgroundElevation0',
+            color: config.backgroundElevation0,
+            onColorChanged: config.setBackgroundElevation0,
+          ),
+          ColorPickerTile(
+            label: 'backgroundElevation1',
+            color: config.backgroundElevation1,
+            onColorChanged: config.setBackgroundElevation1,
+          ),
+          ColorPickerTile(
+            label: 'backgroundElevation2',
+            color: config.backgroundElevation2,
+            onColorChanged: config.setBackgroundElevation2,
+          ),
+          ColorPickerTile(
+            label: 'backgroundElevation3',
+            color: config.backgroundElevation3,
+            onColorChanged: config.setBackgroundElevation3,
+          ),
+          ColorPickerTile(
+            label: 'backgroundElevation4',
+            color: config.backgroundElevation4,
+            onColorChanged: config.setBackgroundElevation4,
           ),
         ],
       ),
@@ -377,24 +466,29 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
             onColorChanged: config.setBorderStrong,
           ),
           ColorPickerTile(
-            label: 'borderOnDark',
-            color: config.borderOnDark,
-            onColorChanged: config.setBorderOnDark,
+            label: 'borderInverse',
+            color: config.borderInverse,
+            onColorChanged: config.setBorderInverse,
           ),
           ColorPickerTile(
             label: 'borderOnAccent',
             color: config.borderOnAccent,
             onColorChanged: config.setBorderOnAccent,
           ),
           ColorPickerTile(
-            label: 'borderOpacity10',
-            color: config.borderOpacity10,
-            onColorChanged: config.setBorderOpacity10,
+            label: 'borderOnSurface',
+            color: config.borderOnSurface,
+            onColorChanged: config.setBorderOnSurface,
+          ),
+          ColorPickerTile(
+            label: 'borderOpacitySubtle',
+            color: config.borderOpacitySubtle,
+            onColorChanged: config.setBorderOpacitySubtle,
           ),
           ColorPickerTile(
-            label: 'borderOpacity25',
-            color: config.borderOpacity25,
-            onColorChanged: config.setBorderOpacity25,
+            label: 'borderOpacityStrong',
+            color: config.borderOpacityStrong,
+            onColorChanged: config.setBorderOpacityStrong,
           ),
         ],
       ),
@@ -414,6 +508,21 @@ class _ThemeCustomizationPanelState extends State<ThemeCustomizationPanel> {
             color: config.borderFocus,
             onColorChanged: config.setBorderFocus,
           ),
+          ColorPickerTile(
+            label: 'borderActive',
+            color: config.borderActive,
+            onColorChanged: config.setBorderActive,
+          ),
+          ColorPickerTile(
+            label: 'borderHover',
+            color: config.borderHover,
+            onColorChanged: config.setBorderHover,
+          ),
+          ColorPickerTile(
+            label: 'borderPressed',
+            color: config.borderPressed,
+            onColorChanged: config.setBorderPressed,
+          ),
           ColorPickerTile(
             label: 'borderDisabled',
             color: config.borderDisabled,

packages/stream_core_flutter/lib/src/components/accessories/stream_audio_waveform.dart

@@ -127,7 +127,7 @@ class _StreamAudioWaveformSliderState extends State<StreamAudioWaveformSlider> {
     final activeThumbColor = widget.activeThumbColor ?? theme.activeThumbColor ?? colorScheme.accentPrimary;
     final idleThumbColor = widget.idleThumbColor ?? theme.idleThumbColor ?? colorScheme.accentNeutral;
     final thumbColor = widget.isActive ? activeThumbColor : idleThumbColor;
-    final thumbBorderColor = widget.thumbBorderColor ?? theme.thumbBorderColor ?? colorScheme.borderOnAccent;
+    final thumbBorderColor = widget.thumbBorderColor ?? theme.thumbBorderColor ?? colorScheme.borderInverse;
 
     return HorizontalSlider(
       onChangeStart: widget.onChangeStart,
@@ -285,7 +285,7 @@ class StreamAudioWaveform extends StatelessWidget {
     final theme = StreamAudioWaveformTheme.of(context);
     final colorScheme = context.streamColorScheme;
 
-    final color = this.color ?? theme.color ?? colorScheme.borderOpacity25;
+    final color = this.color ?? theme.color ?? colorScheme.borderOpacityStrong;
     final progressColor = this.progressColor ?? theme.progressColor ?? colorScheme.accentPrimary;
     final minBarHeight = this.minBarHeight ?? theme.minBarHeight ?? 2.0;
     final spacingRatio = this.spacingRatio ?? theme.spacingRatio ?? 0.3;

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart

@@ -172,7 +172,7 @@ class DefaultStreamAvatarGroup extends StatelessWidget {
             size: avatarSize,
             border: Border.all(
               width: avatarBorderWidth,
-              color: colorScheme.borderOnDark,
+              color: colorScheme.borderInverse,
               strokeAlign: BorderSide.strokeAlignOutside,
             ),
           ),

packages/stream_core_flutter/lib/src/components/badge/stream_badge_notification.dart

@@ -229,5 +229,5 @@ class _StreamBadgeNotificationThemeDefaults extends StreamBadgeNotificationTheme
   Color get textColor => _colorScheme.textOnAccent;
 
   @override
-  Color get borderColor => _colorScheme.borderOnDark;
+  Color get borderColor => _colorScheme.borderInverse;
 }

packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart

@@ -12,7 +12,7 @@ class StreamMediaBadge extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: context.streamColorScheme.backgroundInverse,
+        color: context.streamColorScheme.chrome[10000],
         borderRadius: BorderRadius.all(context.streamRadius.max),
       ),
       padding: EdgeInsets.symmetric(
@@ -28,13 +28,13 @@ class StreamMediaBadge extends StatelessWidget {
               MediaBadgeType.audio => context.streamIcons.microphoneSolid,
             },
             size: 12,
-            color: context.streamColorScheme.textOnDark,
+            color: context.streamColorScheme.textInverse,
           ),
 
           if (duration case final duration?)
             Text(
               duration.toReadableString(),
-              style: context.streamTextTheme.numericMd.copyWith(color: context.streamColorScheme.textOnDark),
+              style: context.streamTextTheme.numericMd.copyWith(color: context.streamColorScheme.textInverse),
             ),
         ],
       ),

packages/stream_core_flutter/lib/src/components/badge/stream_online_indicator.dart

@@ -240,7 +240,7 @@ class _StreamOnlineIndicatorThemeDefaults extends StreamOnlineIndicatorThemeData
   Color get backgroundOffline => _colorScheme.accentNeutral;
 
   @override
-  Color get borderColor => _colorScheme.borderOnDark;
+  Color get borderColor => _colorScheme.borderInverse;
 
   @override
   AlignmentGeometry get alignment => AlignmentDirectional.topEnd;

packages/stream_core_flutter/lib/src/components/common/stream_checkbox.dart

@@ -237,7 +237,7 @@ class _StreamCheckboxStyleDefaults extends StreamCheckboxStyle {
   WidgetStateProperty<Color?> get checkColor => WidgetStateProperty.resolveWith((states) {
     if (states.contains(WidgetState.selected)) {
       if (states.contains(WidgetState.disabled)) return _colorScheme.textDisabled;
-      return _colorScheme.textOnDark;
+      return _colorScheme.textOnAccent;
     }
     return StreamColors.transparent;
   });

packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart

@@ -18,9 +18,9 @@ class StreamRemoveControl extends StatelessWidget {
       onTap: onPressed,
       child: Container(
         decoration: BoxDecoration(
-          color: colorScheme.accentBlack,
+          color: colorScheme.backgroundInverse,
           shape: BoxShape.circle,
-          border: Border.all(color: colorScheme.borderOnDark, width: 2),
+          border: Border.all(color: colorScheme.borderInverse, width: 2),
         ),
         alignment: Alignment.center,
         height: 20,

packages/stream_core_flutter/lib/src/theme/components/stream_audio_waveform_theme.dart

@@ -116,7 +116,7 @@ class StreamAudioWaveformThemeData with _$StreamAudioWaveformThemeData {
 
   /// The color of the waveform bars.
   ///
-  /// Falls back to [StreamColorScheme.borderOpacity25].
+  /// Falls back to [StreamColorScheme.borderOpacityStrong].
   final Color? color;
 
   /// The color of the progressed waveform bars.

packages/stream_core_flutter/lib/src/theme/primitives/stream_color_swatch_helper.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/painting.dart';
 
+import '../../../stream_core_flutter.dart';
+
 class StreamColorSwatchHelper {
   const StreamColorSwatchHelper._();
 
@@ -21,13 +23,16 @@ class StreamColorSwatchHelper {
     final centerLightness = hslBase.lightness;
 
     final shades = [50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900];
+    final isLight = brightness == Brightness.light;
 
     return {
+      0: isLight ? StreamColors.white : StreamColors.black,
       for (final shade in shades)
         shade: _adjustLightness(
           hslBase,
           _calculateLightness(shade, centerLightness, brightness: brightness),
         ),
+      1000: isLight ? StreamColors.black : StreamColors.white,
     };
   }