feat(repo): Add design system primitives showcase to gallery

apps/design_system_gallery/lib/app/gallery_app.dart

@@ -39,16 +39,16 @@ class _StreamDesignSystemGalleryState extends State<StreamDesignSystemGallery> {
       ],
       child: Consumer<ThemeConfiguration>(
         builder: (context, themeConfig, _) {
+          final isDark = themeConfig.brightness == .dark;
           final materialTheme = themeConfig.buildMaterialTheme();
-          final isDark = themeConfig.brightness == Brightness.dark;
 
           return MaterialApp(
             title: 'Stream Design System',
             debugShowCheckedModeBanner: false,
             // Use Stream-themed Material theme for all regular widgets
             theme: materialTheme,
             darkTheme: materialTheme,
-            themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
+            themeMode: isDark ? .dark : .light,
             home: GalleryShell(
               showThemePanel: _showThemePanel,
               onToggleThemePanel: () => setState(() => _showThemePanel = !_showThemePanel),

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

@@ -10,14 +10,18 @@
 // **************************************************************************
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:design_system_gallery/components/button.dart'
-    as _design_system_gallery_components_button;
 import 'package:design_system_gallery/components/stream_avatar.dart'
     as _design_system_gallery_components_stream_avatar;
 import 'package:design_system_gallery/components/stream_avatar_stack.dart'
     as _design_system_gallery_components_stream_avatar_stack;
 import 'package:design_system_gallery/components/stream_online_indicator.dart'
     as _design_system_gallery_components_stream_online_indicator;
+import 'package:design_system_gallery/primitives/colors.dart'
+    as _design_system_gallery_primitives_colors;
+import 'package:design_system_gallery/primitives/radius.dart'
+    as _design_system_gallery_primitives_radius;
+import 'package:design_system_gallery/primitives/spacing.dart'
+    as _design_system_gallery_primitives_spacing;
 import 'package:design_system_gallery/semantics/elevations.dart'
     as _design_system_gallery_semantics_elevations;
 import 'package:design_system_gallery/semantics/typography.dart'
@@ -29,30 +33,85 @@ final directories = <_widgetbook.WidgetbookNode>[
     name: 'App Foundation',
     children: [
       _widgetbook.WidgetbookFolder(
-        name: 'Elevations',
+        name: 'Primitives',
         children: [
-          _widgetbook.WidgetbookComponent(
-            name: 'StreamBoxShadow',
-            useCases: [
-              _widgetbook.WidgetbookUseCase(
-                name: 'All Elevations',
-                builder: _design_system_gallery_semantics_elevations
-                    .buildStreamBoxShadowShowcase,
+          _widgetbook.WidgetbookFolder(
+            name: 'Colors',
+            children: [
+              _widgetbook.WidgetbookComponent(
+                name: 'StreamColors',
+                useCases: [
+                  _widgetbook.WidgetbookUseCase(
+                    name: 'All Colors',
+                    builder: _design_system_gallery_primitives_colors
+                        .buildStreamColorsShowcase,
+                  ),
+                ],
+              ),
+            ],
+          ),
+          _widgetbook.WidgetbookFolder(
+            name: 'Radius',
+            children: [
+              _widgetbook.WidgetbookComponent(
+                name: 'StreamRadius',
+                useCases: [
+                  _widgetbook.WidgetbookUseCase(
+                    name: 'All Values',
+                    builder: _design_system_gallery_primitives_radius
+                        .buildStreamRadiusShowcase,
+                  ),
+                ],
+              ),
+            ],
+          ),
+          _widgetbook.WidgetbookFolder(
+            name: 'Spacing',
+            children: [
+              _widgetbook.WidgetbookComponent(
+                name: 'StreamSpacing',
+                useCases: [
+                  _widgetbook.WidgetbookUseCase(
+                    name: 'All Values',
+                    builder: _design_system_gallery_primitives_spacing
+                        .buildStreamSpacingShowcase,
+                  ),
+                ],
               ),
             ],
           ),
         ],
       ),
       _widgetbook.WidgetbookFolder(
-        name: 'Typography',
+        name: 'Semantics',
         children: [
-          _widgetbook.WidgetbookComponent(
-            name: 'StreamTextTheme',
-            useCases: [
-              _widgetbook.WidgetbookUseCase(
-                name: 'All Styles',
-                builder: _design_system_gallery_semantics_typography
-                    .buildStreamTextThemeShowcase,
+          _widgetbook.WidgetbookFolder(
+            name: 'Elevations',
+            children: [
+              _widgetbook.WidgetbookComponent(
+                name: 'StreamBoxShadow',
+                useCases: [
+                  _widgetbook.WidgetbookUseCase(
+                    name: 'All Elevations',
+                    builder: _design_system_gallery_semantics_elevations
+                        .buildStreamBoxShadowShowcase,
+                  ),
+                ],
+              ),
+            ],
+          ),
+          _widgetbook.WidgetbookFolder(
+            name: 'Typography',
+            children: [
+              _widgetbook.WidgetbookComponent(
+                name: 'StreamTextTheme',
+                useCases: [
+                  _widgetbook.WidgetbookUseCase(
+                    name: 'All Styles',
+                    builder: _design_system_gallery_semantics_typography
+                        .buildStreamTextThemeShowcase,
+                  ),
+                ],
               ),
             ],
           ),
@@ -69,25 +128,15 @@ final directories = <_widgetbook.WidgetbookNode>[
           _widgetbook.WidgetbookComponent(
             name: 'StreamAvatar',
             useCases: [
-              _widgetbook.WidgetbookUseCase(
-                name: 'Color Palette',
-                builder: _design_system_gallery_components_stream_avatar
-                    .buildStreamAvatarPalette,
-              ),
               _widgetbook.WidgetbookUseCase(
                 name: 'Playground',
                 builder: _design_system_gallery_components_stream_avatar
                     .buildStreamAvatarPlayground,
               ),
               _widgetbook.WidgetbookUseCase(
-                name: 'Real-world Example',
+                name: 'Showcase',
                 builder: _design_system_gallery_components_stream_avatar
-                    .buildStreamAvatarExample,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'Size Variants',
-                builder: _design_system_gallery_components_stream_avatar
-                    .buildStreamAvatarSizes,
+                    .buildStreamAvatarShowcase,
               ),
             ],
           ),
@@ -100,44 +149,9 @@ final directories = <_widgetbook.WidgetbookNode>[
                     .buildStreamAvatarStackPlayground,
               ),
               _widgetbook.WidgetbookUseCase(
-                name: 'Real-world Example',
+                name: 'Showcase',
                 builder: _design_system_gallery_components_stream_avatar_stack
-                    .buildStreamAvatarStackExample,
-              ),
-            ],
-          ),
-        ],
-      ),
-      _widgetbook.WidgetbookFolder(
-        name: 'Button',
-        children: [
-          _widgetbook.WidgetbookComponent(
-            name: 'StreamButton',
-            useCases: [
-              _widgetbook.WidgetbookUseCase(
-                name: 'Playground',
-                builder: _design_system_gallery_components_button
-                    .buildStreamButtonPlayground,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'Real-world Example',
-                builder: _design_system_gallery_components_button
-                    .buildStreamButtonExample,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'Size Variants',
-                builder: _design_system_gallery_components_button
-                    .buildStreamButtonSizes,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'Type Variants',
-                builder: _design_system_gallery_components_button
-                    .buildStreamButtonTypes,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'With Icons',
-                builder: _design_system_gallery_components_button
-                    .buildStreamButtonWithIcons,
+                    .buildStreamAvatarStackShowcase,
               ),
             ],
           ),
@@ -156,16 +170,10 @@ final directories = <_widgetbook.WidgetbookNode>[
                         .buildStreamOnlineIndicatorPlayground,
               ),
               _widgetbook.WidgetbookUseCase(
-                name: 'Real-world Example',
-                builder:
-                    _design_system_gallery_components_stream_online_indicator
-                        .buildStreamOnlineIndicatorExample,
-              ),
-              _widgetbook.WidgetbookUseCase(
-                name: 'Size Variants',
+                name: 'Showcase',
                 builder:
                     _design_system_gallery_components_stream_online_indicator
-                        .buildStreamOnlineIndicatorSizes,
+                        .buildStreamOnlineIndicatorShowcase,
               ),
             ],
           ),

apps/design_system_gallery/lib/app/gallery_shell.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:stream_core_flutter/stream_core_flutter.dart';
 import 'package:widgetbook/widgetbook.dart';
 
-import '../config/theme_configuration.dart';
 import '../core/preview_wrapper.dart';
 import '../widgets/theme_studio/theme_customization_panel.dart';
 import '../widgets/toolbar/toolbar.dart';
 import 'gallery_app.directories.g.dart';
+import 'home.dart';
 
 /// The main shell that wraps the widgetbook with custom Stream branding.
 ///
@@ -26,11 +26,11 @@ class GalleryShell extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final themeConfig = context.watch<ThemeConfiguration>();
-    final isDark = themeConfig.brightness == Brightness.dark;
+    final materialTheme = Theme.of(context);
+    final isDark = materialTheme.brightness == .dark;
 
     return Scaffold(
-      backgroundColor: _getShellBackground(themeConfig.brightness),
+      backgroundColor: context.streamColorScheme.backgroundApp,
       body: Column(
         children: [
           // Toolbar spans across the entire width
@@ -45,30 +45,26 @@ class GalleryShell extends StatelessWidget {
                 // Widgetbook area
                 Expanded(
                   child: Widgetbook.material(
-                    // Theme updates via themeMode/lightTheme/darkTheme props
-                    // Preview updates via PreviewWrapper's ListenableBuilder
-                    themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
-                    lightTheme: themeConfig.buildMaterialTheme(),
-                    darkTheme: themeConfig.buildMaterialTheme(),
+                    lightTheme: materialTheme,
+                    darkTheme: materialTheme,
+                    themeMode: isDark ? .dark : .light,
                     directories: directories,
+                    home: const GalleryHomePage(),
                     appBuilder: (context, child) => PreviewWrapper(child: child),
                   ),
                 ),
-                // Theme customization panel - aligned with widgetbook content
-                if (showThemePanel)
-                  SizedBox(
+                // Theme customization panel
+                if (showThemePanel) ...[
+                  const SizedBox(
                     width: 340,
-                    child: ThemeCustomizationPanel(configuration: themeConfig),
+                    child: ThemeCustomizationPanel(),
                   ),
+                ],
               ],
             ),
           ),
         ],
       ),
     );
   }
-
-  Color _getShellBackground(Brightness brightness) {
-    return brightness == Brightness.dark ? const Color(0xFF0A0A0A) : const Color(0xFFF8F9FA);
-  }
 }