some adjustments

packages/remix/demo/lib/addons/brightness_addon.dart

@@ -1,43 +1,59 @@
 import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart';
 
-class BrightnessAddon extends WidgetbookAddon<Brightness> {
-  final Brightness initialBrightness;
+class WidgetBookBrightness {
+  static const light = 'light';
+  static const dark = 'dark';
+}
+
+class BrightnessAddon extends WidgetbookAddon<String> {
+  final String initialBrightness;
 
   BrightnessAddon({
-    this.initialBrightness = Brightness.light,
-  }) : super(name: 'Brightness');
+    this.initialBrightness = WidgetBookBrightness.light,
+  }) : super(name: 'brightness');
 
   @override
   Widget buildUseCase(
     BuildContext context,
     Widget child,
-    Brightness setting,
+    String setting,
   ) {
-    return Theme(
-      data: ThemeData(
-        brightness: setting,
+    return MediaQuery(
+      data: MediaQueryData(
+        platformBrightness: setting == WidgetBookBrightness.light
+            ? Brightness.light
+            : Brightness.dark,
       ),
       child: child,
     );
   }
 
   @override
-  List<Field<Brightness>> get fields {
+  List<Field<String>> get fields {
     return [
-      ListField<Brightness>(
+      ListField<String>(
         name: 'brightness',
         initialValue: initialBrightness,
         values: [
-          Brightness.light,
-          Brightness.dark,
+          WidgetBookBrightness.light,
+          WidgetBookBrightness.dark,
         ],
       )
     ];
   }
 
   @override
-  Brightness valueFromQueryGroup(Map<String, String> group) {
-    return valueOf<Brightness>('brightness', group)!;
+  String valueFromQueryGroup(Map<String, String> group) {
+    return valueOf<String>('brightness', group)!;
   }
 }
+
+class BrightnessAddonConfig extends AddonConfig {
+  const BrightnessAddonConfig(String value)
+      : super(
+          'brightness',
+          'brightness:$value',
+        );
+}

packages/remix/demo/lib/addons/theme_addon.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/widgets.dart';
+import 'package:remix/remix.dart';
+import 'package:remix/themes/fortaleza.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart';
+
+typedef ThemeMultiBrightness = ({RemixThemeData light, RemixThemeData dark});
+
+final Map<String, ThemeMultiBrightness> themes = {
+  'fortaleza': (
+    light: FortalezaThemeData.light(),
+    dark: FortalezaThemeData.dark(),
+  ),
+  'base': (
+    light: RemixThemeData.baseLight(),
+    dark: RemixThemeData.baseDark(),
+  ),
+};
+
+class ComponentTheme {
+  static const fortaleza = 'fortaleza';
+  static const base = 'base';
+}
+
+class ComponentThemeAddon extends WidgetbookAddon<String> {
+  final String initialBrightness;
+
+  ComponentThemeAddon({
+    this.initialBrightness = ComponentTheme.fortaleza,
+  }) : super(name: 'component theme');
+
+  @override
+  Widget buildUseCase(
+    BuildContext context,
+    Widget child,
+    String setting,
+  ) {
+    final theme = themes[setting];
+    return RemixApp(
+      debugShowCheckedModeBanner: false,
+      darkTheme: theme!.dark,
+      theme: theme.light,
+      home: child,
+    );
+  }
+
+  @override
+  List<Field<String>> get fields {
+    return [
+      ListField<String>(
+        name: 'brightness',
+        initialValue: initialBrightness,
+        values: [
+          ComponentTheme.fortaleza,
+          ComponentTheme.base,
+        ],
+      )
+    ];
+  }
+
+  @override
+  String valueFromQueryGroup(Map<String, String> group) {
+    return valueOf<String>('brightness', group)!;
+  }
+}
+
+class ComponentThemeAddonConfig extends AddonConfig {
+  const ComponentThemeAddonConfig(String value)
+      : super('component theme', 'component theme:$value');
+}

packages/remix/demo/lib/components/card_use_case.dart

@@ -33,13 +33,25 @@ Widget buildCard(BuildContext context) {
               children: [
                 StyledText(
                   'Leo Farias',
-                  style: Style($text.style.$text3()),
+                  style: Style(
+                    $text.chain
+                      ..style.fontSize(14)
+                      ..style.fontWeight.bold()
+                      ..style.color.black87(),
+                    $on.dark(
+                      $text.style.color.white(),
+                    ),
+                  ),
                 ),
                 StyledText(
                   'Flutter Engineer',
                   style: Style(
-                    $text.style.$text2(),
-                    $text.style.color.$neutral(10),
+                    $text.chain
+                      ..style.fontSize(12)
+                      ..style.color.black54(),
+                    $on.dark(
+                      $text.style.color.white70(),
+                    ),
                   ),
                 ),
               ],

packages/remix/demo/lib/main.dart

@@ -1,13 +1,33 @@
-import 'package:demo/helpers/theme_addon.dart';
+import 'package:demo/addons/theme_addon.dart';
 import 'package:flutter/material.dart' hide Scaffold, ThemeMode;
 import 'package:remix/remix.dart';
 import 'package:remix/themes/fortaleza.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
+import 'addons/brightness_addon.dart';
 import 'main.directories.g.dart';
 
-@widgetbook.App()
+@widgetbook.App(
+  cloudAddonsConfigs: {
+    'dark fortaleza': [
+      BrightnessAddonConfig(WidgetBookBrightness.dark),
+      ComponentThemeAddonConfig(ComponentTheme.fortaleza),
+    ],
+    'light fortaleza': [
+      BrightnessAddonConfig(WidgetBookBrightness.light),
+      ComponentThemeAddonConfig(ComponentTheme.fortaleza),
+    ],
+    'dark base': [
+      BrightnessAddonConfig(WidgetBookBrightness.dark),
+      ComponentThemeAddonConfig(ComponentTheme.base),
+    ],
+    'light base': [
+      BrightnessAddonConfig(WidgetBookBrightness.light),
+      ComponentThemeAddonConfig(ComponentTheme.base),
+    ],
+  },
+)
 void main() {
   runApp(const HotReload());
 }
@@ -19,48 +39,8 @@ class HotReload extends StatelessWidget {
   Widget build(BuildContext context) {
     return Widgetbook(
       addons: [
-        ThemeAddon<Brightness>(
-          themes: [
-            const WidgetbookTheme(
-              name: 'Light',
-              data: Brightness.light,
-            ),
-            const WidgetbookTheme(
-              name: 'Dark',
-              data: Brightness.dark,
-            ),
-          ],
-          initialTheme: const WidgetbookTheme(
-            name: 'Light',
-            data: Brightness.light,
-          ),
-          themeBuilder: (context, Brightness theme, child) {
-            return MediaQuery(
-              data: MediaQueryData(
-                platformBrightness: theme,
-              ),
-              child: child,
-            );
-          },
-        ),
-        RemixComponentThemeAddon(
-          themes: [
-            WidgetbookTheme(
-              name: 'Fortaleza',
-              data: (
-                light: FortalezaThemeData.light(),
-                dark: FortalezaThemeData.dark(),
-              ),
-            ),
-            WidgetbookTheme(
-              name: 'Base',
-              data: (
-                light: RemixThemeData.baseLight(),
-                dark: RemixThemeData.baseDark(),
-              ),
-            ),
-          ],
-        ),
+        BrightnessAddon(),
+        ComponentThemeAddon(),
         InspectorAddon(),
       ],
       appBuilder: (context, child) => child,

packages/remix/lib/src/components/button/button_widget.dart

@@ -118,7 +118,7 @@ class ButtonSpecWidget extends StatelessWidget {
   }
 
   Widget _buildChildren(ButtonSpec spec) {
-    final flexboxWidget = spec.container(
+    final flexWidget = spec.container.flex(
       direction: Axis.horizontal,
       children: [
         if (iconLeft != null) spec.icon(iconLeft),
@@ -128,13 +128,13 @@ class ButtonSpecWidget extends StatelessWidget {
       ],
     );
 
-    return loading ? _buildLoadingOverlay(spec, flexboxWidget) : flexboxWidget;
+    return loading ? _buildLoadingOverlay(spec, flexWidget) : flexWidget;
   }
 
   @override
   Widget build(BuildContext context) {
     final spec = this.spec ?? const ButtonSpec();
 
-    return _buildChildren(spec);
+    return spec.container.box(child: _buildChildren(spec));
   }
 }

packages/remix/lib/src/themes/fortaleza/components.dart

@@ -48,7 +48,7 @@ class FortalezaComponentTheme extends RemixComponentTheme {
     required super.slider,
   });
 
-  factory FortalezaComponentTheme.light() {
+  static RemixComponentTheme light() {
     return const FortalezaComponentTheme(
       accordion: FortalezaAccordionStyle(),
       avatar: FortalezaAvatarStyle(),
@@ -75,7 +75,7 @@ class FortalezaComponentTheme extends RemixComponentTheme {
     );
   }
 
-  factory FortalezaComponentTheme.dark() {
+  static RemixComponentTheme dark() {
     return FortalezaComponentTheme.light().copyWith(
       avatar: const FortalezaDarkAvatarStyle(),
       badge: const FortalezaDarkBadgeStyle(),
@@ -84,55 +84,4 @@ class FortalezaComponentTheme extends RemixComponentTheme {
       switchComponent: const FortalezaDarkSwitchStyle(),
     );
   }
-
-  @override
-  FortalezaComponentTheme copyWith({
-    covariant FortalezaAccordionStyle? accordion,
-    covariant FortalezaAvatarStyle? avatar,
-    covariant FortalezaBadgeStyle? badge,
-    covariant FortalezaButtonStyle? button,
-    covariant FortalezaCalloutStyle? callout,
-    covariant FortalezaCardStyle? card,
-    covariant FortalezaCheckboxStyle? checkbox,
-    covariant FortalezaDialogStyle? dialog,
-    covariant FortalezaChipStyle? chip,
-    covariant FortalezaDividerStyle? divider,
-    covariant FortalezaIconButtonStyle? iconButton,
-    covariant FortalezaMenuItemStyle? menuItem,
-    covariant FortalezaProgressStyle? progress,
-    covariant FortalezaRadioStyle? radio,
-    covariant FortalezaScaffoldStyle? scaffold,
-    covariant FortalezaSegmentedControlStyle? segmentedControl,
-    covariant FortalezaSelectStyle? select,
-    covariant FortalezaSpinnerStyle? spinner,
-    covariant FortalezaSwitchStyle? switchComponent,
-    covariant FortalezaTextFieldStyle? textField,
-    covariant FortalezaToastStyle? toast,
-    covariant FortalezaSliderStyle? slider,
-  }) {
-    return FortalezaComponentTheme(
-      accordion: accordion ?? this.accordion,
-      avatar: avatar ?? this.avatar,
-      badge: badge ?? this.badge,
-      button: button ?? this.button,
-      callout: callout ?? this.callout,
-      card: card ?? this.card,
-      checkbox: checkbox ?? this.checkbox,
-      dialog: dialog ?? this.dialog,
-      chip: chip ?? this.chip,
-      divider: divider ?? this.divider,
-      iconButton: iconButton ?? this.iconButton,
-      menuItem: menuItem ?? this.menuItem,
-      progress: progress ?? this.progress,
-      radio: radio ?? this.radio,
-      scaffold: scaffold ?? this.scaffold,
-      segmentedControl: segmentedControl ?? this.segmentedControl,
-      select: select ?? this.select,
-      spinner: spinner ?? this.spinner,
-      switchComponent: switchComponent ?? this.switchComponent,
-      textField: textField ?? this.textField,
-      toast: toast ?? this.toast,
-      slider: slider ?? this.slider,
-    );
-  }
 }

packages/remix/lib/src/themes/fortaleza/components/button_theme.dart

@@ -103,6 +103,6 @@ class FortalezaButtonStyle extends ButtonStyle {
         surface(surfaceVariant()),
         ghost(ghostVariant()),
       ],
-    );
+    ).animate(duration: const Duration(milliseconds: 200));
   }
 }