diff --git a/packages/remix/demo/lib/addons/brightness_addon.dart b/packages/remix/demo/lib/addons/brightness_addon.dart index d44074d95..4cce88bc3 100644 --- a/packages/remix/demo/lib/addons/brightness_addon.dart +++ b/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 { - final Brightness initialBrightness; +class WidgetBookBrightness { + static const light = 'light'; + static const dark = 'dark'; +} + +class BrightnessAddon extends WidgetbookAddon { + 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> get fields { + List> get fields { return [ - ListField( + ListField( name: 'brightness', initialValue: initialBrightness, values: [ - Brightness.light, - Brightness.dark, + WidgetBookBrightness.light, + WidgetBookBrightness.dark, ], ) ]; } @override - Brightness valueFromQueryGroup(Map group) { - return valueOf('brightness', group)!; + String valueFromQueryGroup(Map group) { + return valueOf('brightness', group)!; } } + +class BrightnessAddonConfig extends AddonConfig { + const BrightnessAddonConfig(String value) + : super( + 'brightness', + 'brightness:$value', + ); +} diff --git a/packages/remix/demo/lib/addons/theme_addon.dart b/packages/remix/demo/lib/addons/theme_addon.dart new file mode 100644 index 000000000..e5080acca --- /dev/null +++ b/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 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 { + 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> get fields { + return [ + ListField( + name: 'brightness', + initialValue: initialBrightness, + values: [ + ComponentTheme.fortaleza, + ComponentTheme.base, + ], + ) + ]; + } + + @override + String valueFromQueryGroup(Map group) { + return valueOf('brightness', group)!; + } +} + +class ComponentThemeAddonConfig extends AddonConfig { + const ComponentThemeAddonConfig(String value) + : super('component theme', 'component theme:$value'); +} diff --git a/packages/remix/demo/lib/components/card_use_case.dart b/packages/remix/demo/lib/components/card_use_case.dart index 03b3caaba..8a553b9a7 100644 --- a/packages/remix/demo/lib/components/card_use_case.dart +++ b/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(), + ), ), ), ], diff --git a/packages/remix/demo/lib/helpers/theme_addon.dart b/packages/remix/demo/lib/helpers/theme_addon.dart deleted file mode 100644 index 2d20309ff..000000000 --- a/packages/remix/demo/lib/helpers/theme_addon.dart +++ /dev/null @@ -1,23 +0,0 @@ -import 'package:remix/remix.dart'; -import 'package:widgetbook/widgetbook.dart'; - -typedef ThemeMultiBrightness = ({RemixThemeData light, RemixThemeData dark}); - -class RemixComponentThemeAddon extends ThemeAddon { - @override - String get name => 'Component Theme'; - - RemixComponentThemeAddon({ - required super.themes, - super.initialTheme, - }) : super( - themeBuilder: (context, themes, child) { - return RemixApp( - debugShowCheckedModeBanner: false, - darkTheme: themes.dark, - theme: themes.light, - home: child, - ); - }, - ); -} diff --git a/packages/remix/demo/lib/main.dart b/packages/remix/demo/lib/main.dart index 242c1deed..5f37b8cfc 100644 --- a/packages/remix/demo/lib/main.dart +++ b/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( - 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, diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart index cbaace8f5..58c12990c 100644 --- a/packages/remix/lib/src/components/button/button_widget.dart +++ b/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)); } } diff --git a/packages/remix/lib/src/themes/fortaleza/components.dart b/packages/remix/lib/src/themes/fortaleza/components.dart index d50a9cf05..2319cfdff 100644 --- a/packages/remix/lib/src/themes/fortaleza/components.dart +++ b/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, - ); - } } diff --git a/packages/remix/lib/src/themes/fortaleza/components/button_theme.dart b/packages/remix/lib/src/themes/fortaleza/components/button_theme.dart index 334d4656e..21c0fea89 100644 --- a/packages/remix/lib/src/themes/fortaleza/components/button_theme.dart +++ b/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)); } } diff --git a/packages/remix/lib/src/themes/fortaleza/tokens.dart b/packages/remix/lib/src/themes/fortaleza/tokens.dart index 64664ece3..cedf370d7 100644 --- a/packages/remix/lib/src/themes/fortaleza/tokens.dart +++ b/packages/remix/lib/src/themes/fortaleza/tokens.dart @@ -29,24 +29,11 @@ class FortalezaTokens { neutral: RadixColors.slate.swatch, neutralAlpha: RadixColors.slate.alphaSwatch, ), - radii: const FortalezaRadius( - radius1: Radius.circular(4), - radius2: Radius.circular(8), - radius3: Radius.circular(12), - radius4: Radius.circular(16), - radius5: Radius.circular(24), - radius6: Radius.circular(32), + radii: FortalezaRadius.values( + [4, 8, 12, 16, 24, 32], ), - spaces: const FortalezaSpace( - space1: 4, - space2: 8, - space3: 12, - space4: 16, - space5: 24, - space6: 32, - space7: 40, - space8: 48, - space9: 64, + spaces: FortalezaSpace.values( + [4, 8, 12, 16, 24, 32, 40, 48, 64], ), textStyles: const FortalezaTextStyle( text1: TextStyle(fontSize: 12, letterSpacing: 0.0025, height: 1.33), @@ -77,10 +64,10 @@ class FortalezaTokens { MixThemeData toThemeData() { return MixThemeData( - colors: colors.toMap, - spaces: spaces.toMap, - textStyles: textStyles.toMap, - radii: radii.toMap, + colors: colors.toMap(), + spaces: spaces.toMap(), + textStyles: textStyles.toMap(), + radii: radii.toMap(), ); } @@ -122,7 +109,7 @@ class FortalezaColor { required this.neutralAlpha, }); - Map get toMap => _$FortalezaColorToMap(this); + Map toMap() => _$FortalezaColorToMap(this); } @MixableToken(Radius) @@ -143,7 +130,19 @@ class FortalezaRadius { required this.radius6, }); - Map get toMap => _$FortalezaRadiusToMap(this); + factory FortalezaRadius.values(List values) { + assert(values.length == 6, 'Expected 6 values, got ${values.length}'); + return FortalezaRadius( + radius1: Radius.circular(values[0]), + radius2: Radius.circular(values[1]), + radius3: Radius.circular(values[2]), + radius4: Radius.circular(values[3]), + radius5: Radius.circular(values[4]), + radius6: Radius.circular(values[5]), + ); + } + + Map toMap() => _$FortalezaRadiusToMap(this); } @MixableToken(double) @@ -170,7 +169,22 @@ class FortalezaSpace { required this.space9, }); - Map get toMap => _$FortalezaSpaceToMap(this); + factory FortalezaSpace.values(List values) { + assert(values.length == 9, 'Expected 9 values, got ${values.length}'); + return FortalezaSpace( + space1: values[0], + space2: values[1], + space3: values[2], + space4: values[3], + space5: values[4], + space6: values[5], + space7: values[6], + space8: values[7], + space9: values[8], + ); + } + + Map toMap() => _$FortalezaSpaceToMap(this); } @MixableToken(TextStyle) @@ -197,5 +211,5 @@ class FortalezaTextStyle { required this.text9, }); - Map get toMap => _$FortalezaTextStyleToMap(this); + Map toMap() => _$FortalezaTextStyleToMap(this); }