From c0d2c7fdede2633278a141926c449ae23400e68b Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Thu, 16 Jul 2026 17:30:49 -0400 Subject: [PATCH 1/8] Modernize Mix and Remix examples --- components/HomeContent.tsx | 5 +- components/RemixHome.tsx | 18 ++- docs/remix-landing-page-copy.md | 12 +- .../lib/components/chip_button.dart | 2 +- .../lib/components/custom_scaffold.dart | 2 +- .../lib/guides/animations/keyframe_loop.dart | 2 +- .../lib/guides/design_token/theme_switch.dart | 8 +- .../lib/guides/design_token/theme_tokens.dart | 4 +- .../lib/guides/dynamic_styling/composing.dart | 6 +- .../dynamic_styling/context_variant_flag.dart | 2 +- .../lib/guides/dynamic_styling/focused.dart | 2 +- .../lib/guides/dynamic_styling/nesting.dart | 6 +- .../dynamic_styling/responsive_size.dart | 6 +- .../lib/guides/styling/preview_1.dart | 2 +- .../lib/homepage/buttons_showcase.dart | 2 +- .../lib/homepage/hero_classic.dart | 2 +- .../lib/homepage/hero_gradient.dart | 12 +- .../lib/homepage/hero_neon.dart | 4 +- .../mix_docs_preview/lib/multi_view_app.dart | 4 +- .../lib/overview/comparison/preview_0.dart | 11 +- .../lib/preview_registry.dart | 14 +-- .../lib/remix/components/accordion.dart | 2 +- .../lib/remix/components/popover.dart | 4 +- .../lib/remix/components/tabs.dart | 4 +- .../design_system_button.dart | 48 ++++---- .../lib/widgets/stack/layered_boxes.dart | 6 +- .../documentation/mix/ecosystem/mix-lint.mdx | 33 ++---- .../mix/ecosystem/mix-tailwinds.mdx | 5 +- .../documentation/mix/guides/animations.mdx | 34 +++--- .../mix/guides/common-patterns.mdx | 25 +---- .../documentation/mix/guides/design-token.mdx | 58 ++++------ .../documentation/mix/guides/directives.mdx | 13 +-- .../mix/guides/dynamic-styling.mdx | 73 ++++++------ .../documentation/mix/guides/styling.mdx | 8 +- .../mix/guides/widget-modifiers.mdx | 19 ++-- .../documentation/mix/overview/comparison.mdx | 6 +- .../mix/overview/getting-started.mdx | 4 +- .../mix/overview/introduction.mdx | 8 +- .../documentation/mix/overview/migration.mdx | 15 +-- .../mix/overview/utility-first.mdx | 3 +- .../tutorials/controlling-widget-state.mdx | 8 +- .../mix/tutorials/creating-a-widget.mdx | 104 ++++++++---------- .../tutorials/creating-context-variants.mdx | 12 +- .../documentation/mix/tutorials/theming.mdx | 74 ++++++------- src/content/documentation/mix/widgets/box.mdx | 14 +-- .../documentation/mix/widgets/flexbox.mdx | 3 +- .../documentation/mix/widgets/image.mdx | 5 +- .../documentation/mix/widgets/pressable.mdx | 24 ++-- .../documentation/mix/widgets/stack.mdx | 12 +- .../mix/widgets/stylewidgets.mdx | 48 +++----- .../documentation/mix/widgets/text.mdx | 5 +- .../remix/components/accordion.mdx | 38 +++---- .../documentation/remix/components/avatar.mdx | 27 ++--- .../documentation/remix/components/badge.mdx | 45 +++----- .../documentation/remix/components/button.mdx | 82 ++++---------- .../remix/components/callout.mdx | 18 +-- .../documentation/remix/components/card.mdx | 12 +- .../remix/components/checkbox.mdx | 11 +- .../documentation/remix/components/dialog.mdx | 15 +-- .../remix/components/divider.mdx | 4 +- .../remix/components/icon_button.mdx | 37 ++----- .../documentation/remix/components/menu.mdx | 73 +++++------- .../remix/components/popover.mdx | 23 ++-- .../remix/components/progress.mdx | 16 +-- .../documentation/remix/components/radio.mdx | 53 ++++----- .../documentation/remix/components/select.mdx | 19 ++-- .../documentation/remix/components/slider.mdx | 12 +- .../remix/components/spinner.mdx | 3 +- .../documentation/remix/components/switch.mdx | 14 +-- .../documentation/remix/components/tabs.mdx | 35 +++--- .../remix/components/textfield.mdx | 35 ++---- .../documentation/remix/components/toggle.mdx | 10 +- .../remix/components/toggle_group.mdx | 13 +-- .../remix/components/tooltip.mdx | 28 ++--- src/content/documentation/remix/fortal.mdx | 34 +++--- src/content/documentation/remix/index.mdx | 60 +++++----- .../documentation/remix/styler-api.mdx | 15 ++- 77 files changed, 589 insertions(+), 946 deletions(-) diff --git a/components/HomeContent.tsx b/components/HomeContent.tsx index 56df0f02..1654c0d0 100644 --- a/components/HomeContent.tsx +++ b/components/HomeContent.tsx @@ -148,11 +148,10 @@ export const HomeContent = () => { Without Mix diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx index 64bb617b..66dfbae1 100644 --- a/components/RemixHome.tsx +++ b/components/RemixHome.tsx @@ -70,7 +70,7 @@ const THEMES = [ .labelColor(const Color(0xFF05040A)) .paddingX(22) .paddingY(11) - .borderRadiusAll(const Radius.circular(10)) + .borderRadius(.circular(10)) .onHovered(.color(const Color(0xFF33FF36)));`, }, { @@ -78,17 +78,15 @@ const THEMES = [ name: "Gradient", previewId: "homepage/hero-gradient", code: `final style = RemixButtonStyler() - .gradient( - LinearGradientMix( - begin: .topLeft, - end: .bottomRight, - colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], - ), + .linearGradient( + begin: .topLeft, + end: .bottomRight, + colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], ) .labelColor(const Color(0xFF05040A)) .paddingX(22) .paddingY(11) - .borderRadiusAll(const Radius.circular(12));`, + .borderRadius(.circular(12));`, }, { key: "neon", @@ -99,8 +97,8 @@ const THEMES = [ .labelColor(const Color(0xFF00F0FF)) .paddingX(24) .paddingY(11) - .borderRadiusAll(const Radius.circular(2)) - .borderAll(color: const Color(0xFF00F0FF), width: 1) + .borderRadius(.circular(2)) + .border(.all(.color(const Color(0xFF00F0FF)).width(1))) .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22);`, }, ]; diff --git a/docs/remix-landing-page-copy.md b/docs/remix-landing-page-copy.md index ace8a73a..a545320d 100644 --- a/docs/remix-landing-page-copy.md +++ b/docs/remix-landing-page-copy.md @@ -59,12 +59,12 @@ Make it yours without starting from scratch. Define a look once with Mix's fluen ```dart final button = RemixButtonStyler() - .paddingX(16) - .paddingY(10) - .color(Colors.blue) - .borderRadiusAll(const Radius.circular(8)) - .onHovered(.color(Colors.blue.shade700)) - .animate(AnimationConfig.spring(300.ms)); + .paddingX(16) + .paddingY(10) + .color(Colors.blue) + .borderRadius(.circular(8)) + .onHovered(.color(Colors.blue.shade700)) + .animate(.spring(300.ms)); ``` `Explore styling →` diff --git a/packages/mix_docs_preview/lib/components/chip_button.dart b/packages/mix_docs_preview/lib/components/chip_button.dart index a66b8b8f..aeb94f92 100644 --- a/packages/mix_docs_preview/lib/components/chip_button.dart +++ b/packages/mix_docs_preview/lib/components/chip_button.dart @@ -4,7 +4,7 @@ import 'package:mix/mix.dart'; final chipButtonLabel = TextStyler( textAlign: .center, - style: TextStyleMix(color: Colors.white, fontSize: 12, fontWeight: .w500), + style: .color(Colors.white).fontSize(12).fontWeight(.w500), ); final chipButtonContainer = BoxStyler() diff --git a/packages/mix_docs_preview/lib/components/custom_scaffold.dart b/packages/mix_docs_preview/lib/components/custom_scaffold.dart index 957db2d5..9f5ccf85 100644 --- a/packages/mix_docs_preview/lib/components/custom_scaffold.dart +++ b/packages/mix_docs_preview/lib/components/custom_scaffold.dart @@ -12,7 +12,7 @@ final appHeaderContainer = BoxStyler.height(80) .padding(.all(16)) .alignment(.center) .wrap( - .new().defaultText( + .defaultText( TextStyler.fontSize(20).fontWeight(.bold).color(Colors.white), ), ); diff --git a/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart b/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart index fe7ccf8a..420e84f0 100644 --- a/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart +++ b/packages/mix_docs_preview/lib/guides/animations/keyframe_loop.dart @@ -44,7 +44,7 @@ class KeyframeLoopExample extends StatelessWidget { return style .transform(Matrix4.diagonal3Values(scale, scale, 1.0)) .color(values.get('color')) - .wrap(WidgetModifierConfig.opacity(opacity)); + .wrap(.opacity(opacity)); }, ); diff --git a/packages/mix_docs_preview/lib/guides/design_token/theme_switch.dart b/packages/mix_docs_preview/lib/guides/design_token/theme_switch.dart index 50a37054..4e914621 100644 --- a/packages/mix_docs_preview/lib/guides/design_token/theme_switch.dart +++ b/packages/mix_docs_preview/lib/guides/design_token/theme_switch.dart @@ -54,7 +54,7 @@ class _ExampleState extends State { return MixScope( colors: _isDark ? _darkColors : _lightColors, child: Column( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, spacing: 16, children: [ Box( @@ -67,14 +67,14 @@ class _ExampleState extends State { GestureDetector( onTap: () => setState(() => _isDark = !_isDark), child: Container( - padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), + padding: .symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( color: Colors.grey.shade200, - borderRadius: BorderRadius.circular(8), + borderRadius: .circular(8), ), child: Text( 'Toggle Theme', - style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500), + style: TextStyle(fontSize: 14, fontWeight: .w500), ), ), ), diff --git a/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart b/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart index 9fb94c56..766c10a9 100644 --- a/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart +++ b/packages/mix_docs_preview/lib/guides/design_token/theme_tokens.dart @@ -33,7 +33,7 @@ class Example extends StatelessWidget { return MixScope( colors: {$primaryColor: Colors.blue}, spaces: {$spacing: 16.0}, - radii: {$pill: Radius.circular(20)}, + radii: {$pill: .circular(20)}, child: _Example(), ); } @@ -59,7 +59,7 @@ class _Example extends StatelessWidget { 'Hello, World!', style: TextStyler.color( $primaryColor(), - ).wrap(.new().padding(.all($spacing()))), + ).wrap(.padding(.all($spacing()))), ), ), ); diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart index e3adfd6c..89fdfd69 100644 --- a/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart +++ b/packages/mix_docs_preview/lib/guides/dynamic_styling/composing.dart @@ -22,10 +22,10 @@ class Example extends StatelessWidget { final styleB = styleA.onHovered(.color(Colors.green)); return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, children: [ Column( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ Box(style: styleA), SizedBox(height: 8), @@ -34,7 +34,7 @@ class Example extends StatelessWidget { ), SizedBox(width: 16), Column( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ Box(style: styleB), SizedBox(height: 8), diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart index e848788c..75c59f81 100644 --- a/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart +++ b/packages/mix_docs_preview/lib/guides/dynamic_styling/context_variant_flag.dart @@ -57,7 +57,7 @@ class _ExampleState extends State { ContextVariant('custom_flag', (context) { return CustomInheritedWidget.of(context)?.flag ?? false; }), - BoxStyler().color(Colors.blue), + .color(Colors.blue), ), ), ), diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart index 57642bc9..1ad2ad1d 100644 --- a/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart +++ b/packages/mix_docs_preview/lib/guides/dynamic_styling/focused.dart @@ -39,7 +39,7 @@ class _ExampleState extends State { .height(100) .width(100) .borderRadius(.circular(10)) - .wrap(.new().opacity(0.4)) + .wrap(.opacity(0.4)) .onFocused( .color(Colors.blue).border(.color(Colors.blue.shade700).width(3)), ); diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart index 3a5c2736..dbb37dc2 100644 --- a/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart +++ b/packages/mix_docs_preview/lib/guides/dynamic_styling/nesting.dart @@ -35,17 +35,17 @@ class _ExampleState extends State { context, ).copyWith(platformBrightness: isDark ? .dark : .light), child: Column( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ Box(style: style), SizedBox(height: 12), GestureDetector( onTap: () => setState(() => isDark = !isDark), child: Container( - padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), + padding: .symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( color: isDark ? Colors.grey.shade700 : Colors.grey.shade300, - borderRadius: BorderRadius.circular(8), + borderRadius: .circular(8), ), child: Text( isDark ? 'Dark mode' : 'Light mode', diff --git a/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart b/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart index 9032aa2a..6d8a500e 100644 --- a/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart +++ b/packages/mix_docs_preview/lib/guides/dynamic_styling/responsive_size.dart @@ -16,12 +16,12 @@ class Example extends StatelessWidget { .width(100) .height(100) .color(Colors.blue.shade400) - .onBreakpoint(Breakpoint.maxWidth(575), .color(Colors.green)) + .onBreakpoint(.maxWidth(575), .color(Colors.green)) .borderRadius(.circular(16)) .shadow(.color(Colors.black.withValues(alpha: 0.2)).blurRadius(20)) .wrap( - WidgetModifierConfig.defaultText( - TextStyler.fontSize(16).fontWeight(.bold).color(Colors.white), + .defaultText( + .fontSize(16).fontWeight(.bold).color(Colors.white), ).align(alignment: .center), ) .animate(.spring(300.ms)); diff --git a/packages/mix_docs_preview/lib/guides/styling/preview_1.dart b/packages/mix_docs_preview/lib/guides/styling/preview_1.dart index 2e9a9028..f3f9920f 100644 --- a/packages/mix_docs_preview/lib/guides/styling/preview_1.dart +++ b/packages/mix_docs_preview/lib/guides/styling/preview_1.dart @@ -30,7 +30,7 @@ class Example extends StatelessWidget { final labelStyle = TextStyler().color(Colors.white).fontSize(14); return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ Box( diff --git a/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart b/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart index 6b7821af..73898729 100644 --- a/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart +++ b/packages/mix_docs_preview/lib/homepage/buttons_showcase.dart @@ -36,7 +36,7 @@ class Example extends StatelessWidget { return Center( child: Row( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ Pressable( onPress: () {}, diff --git a/packages/mix_docs_preview/lib/homepage/hero_classic.dart b/packages/mix_docs_preview/lib/homepage/hero_classic.dart index 156289d8..3c66428c 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_classic.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_classic.dart @@ -29,7 +29,7 @@ class _HeroButton extends StatelessWidget { .labelColor(const Color(0xFF05040A)) .paddingX(22) .paddingY(11) - .borderRadiusAll(const Radius.circular(10)) + .borderRadius(.circular(10)) .onHovered(.color(const Color(0xFF33FF36))); // #enddocregion style diff --git a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart index 90ce9878..d3537fc5 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart @@ -25,17 +25,15 @@ class _HeroButton extends StatelessWidget { Widget build(BuildContext context) { // #docregion style final style = RemixButtonStyler() - .gradient( - LinearGradientMix( - begin: .topLeft, - end: .bottomRight, - colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], - ), + .linearGradient( + begin: .topLeft, + end: .bottomRight, + colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], ) .labelColor(const Color(0xFF05040A)) .paddingX(22) .paddingY(11) - .borderRadiusAll(const Radius.circular(12)); + .borderRadius(.circular(12)); // #enddocregion style return RemixButton(label: 'Get started', onPressed: () {}, style: style); diff --git a/packages/mix_docs_preview/lib/homepage/hero_neon.dart b/packages/mix_docs_preview/lib/homepage/hero_neon.dart index 8130455a..fb26fe5a 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_neon.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_neon.dart @@ -29,8 +29,8 @@ class _HeroButton extends StatelessWidget { .labelColor(const Color(0xFF00F0FF)) .paddingX(24) .paddingY(11) - .borderRadiusAll(const Radius.circular(2)) - .borderAll(color: const Color(0xFF00F0FF), width: 1) + .borderRadius(.circular(2)) + .border(.all(.color(const Color(0xFF00F0FF)).width(1))) .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22); // #enddocregion style diff --git a/packages/mix_docs_preview/lib/multi_view_app.dart b/packages/mix_docs_preview/lib/multi_view_app.dart index 6dcb23ff..bd0677a5 100644 --- a/packages/mix_docs_preview/lib/multi_view_app.dart +++ b/packages/mix_docs_preview/lib/multi_view_app.dart @@ -1,5 +1,3 @@ -import 'dart:ui' as ui; - import 'package:flutter/widgets.dart'; import 'multi_view_stub.dart' @@ -83,7 +81,7 @@ class _PreviewView extends StatelessWidget { return ColoredBox( color: const Color(0x00000000), child: Directionality( - textDirection: ui.TextDirection.ltr, + textDirection: .ltr, child: MediaQuery.fromView( view: view, // Provide WidgetsLocalizations (required by framework widgets such diff --git a/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart b/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart index 5eb06232..ead8fcf2 100644 --- a/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart +++ b/packages/mix_docs_preview/lib/overview/comparison/preview_0.dart @@ -13,10 +13,7 @@ class Example extends StatelessWidget { @override Widget build(BuildContext context) { return Center( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [CustomMixWidget()], - ), + child: Row(mainAxisAlignment: .center, children: [CustomMixWidget()]), ); } } @@ -93,17 +90,17 @@ class _CustomFlutterWidgetState extends State { child: AnimatedContainer( duration: _duration, curve: _curve, - padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8), + padding: .symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( color: bgColor, - borderRadius: BorderRadius.circular(10), + borderRadius: .circular(10), border: Border.all(color: borderColor), ), child: Text( 'Click me', style: TextStyle( fontSize: 16, - fontWeight: FontWeight.w500, + fontWeight: .w500, color: accentColor, ), ), diff --git a/packages/mix_docs_preview/lib/preview_registry.dart b/packages/mix_docs_preview/lib/preview_registry.dart index 89af4da6..9ab470c3 100644 --- a/packages/mix_docs_preview/lib/preview_registry.dart +++ b/packages/mix_docs_preview/lib/preview_registry.dart @@ -742,13 +742,13 @@ class _UnknownPreview extends StatelessWidget { return Center( child: Padding( - padding: const EdgeInsets.all(16), + padding: const .all(16), child: Text( 'Unknown previewId: $sanitizedId\n\n' 'Available previewIds:\n' '${PreviewRegistry.availablePreviewIds.join('\n')}', style: const TextStyle(color: Color(0xFFEF4444), fontSize: 14), - textAlign: TextAlign.center, + textAlign: .center, ), ), ); @@ -771,9 +771,9 @@ class _ErrorPreview extends StatelessWidget { Widget build(BuildContext context) { return Center( child: Padding( - padding: const EdgeInsets.all(16), + padding: const .all(16), child: Column( - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, spacing: 8, children: [ const Text( @@ -781,7 +781,7 @@ class _ErrorPreview extends StatelessWidget { style: TextStyle( color: Color(0xFFEF4444), fontSize: 16, - fontWeight: FontWeight.bold, + fontWeight: .bold, ), ), Text( @@ -791,8 +791,8 @@ class _ErrorPreview extends StatelessWidget { Text( error.toString(), style: const TextStyle(color: Color(0xFFEF4444), fontSize: 12), - textAlign: TextAlign.center, - overflow: TextOverflow.ellipsis, + textAlign: .center, + overflow: .ellipsis, maxLines: 5, ), ], diff --git a/packages/mix_docs_preview/lib/remix/components/accordion.dart b/packages/mix_docs_preview/lib/remix/components/accordion.dart index 1e9ad972..a447237e 100644 --- a/packages/mix_docs_preview/lib/remix/components/accordion.dart +++ b/packages/mix_docs_preview/lib/remix/components/accordion.dart @@ -55,7 +55,7 @@ class _AccordionPreviewState extends State { RemixAccordionGroup( controller: controller, child: ColumnBox( - style: FlexBoxStyler().spacing(16), + style: FlexBoxStyler.spacing(16), children: [ FortalAccordion.surface( value: 'accordion1', diff --git a/packages/mix_docs_preview/lib/remix/components/popover.dart b/packages/mix_docs_preview/lib/remix/components/popover.dart index 6154e99e..3019274d 100644 --- a/packages/mix_docs_preview/lib/remix/components/popover.dart +++ b/packages/mix_docs_preview/lib/remix/components/popover.dart @@ -35,7 +35,7 @@ class PopoverPreview extends StatelessWidget { positioning: const OverlayPositionConfig( targetAnchor: .bottomCenter, followerAnchor: .topCenter, - offset: Offset(0, 8), + offset: .new(0, 8), ), popoverChild: const SizedBox( width: 220, @@ -50,7 +50,7 @@ class PopoverPreview extends StatelessWidget { ), ), child: const Padding( - padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10), + padding: .symmetric(horizontal: 16, vertical: 10), child: Text('Account'), ), ); diff --git a/packages/mix_docs_preview/lib/remix/components/tabs.dart b/packages/mix_docs_preview/lib/remix/components/tabs.dart index 4d313e57..f3f6b727 100644 --- a/packages/mix_docs_preview/lib/remix/components/tabs.dart +++ b/packages/mix_docs_preview/lib/remix/components/tabs.dart @@ -60,7 +60,7 @@ class _TabsPreviewState extends State { child: FortalTabView( tabId: 'tab1', child: Padding( - padding: EdgeInsets.all(16), + padding: .all(16), child: Align( alignment: .topLeft, child: Text('Content for Tab 1'), @@ -72,7 +72,7 @@ class _TabsPreviewState extends State { child: FortalTabView( tabId: 'tab2', child: Padding( - padding: EdgeInsets.all(16), + padding: .all(16), child: Align( alignment: .topLeft, child: Text('Content for Tab 2'), diff --git a/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart b/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart index f1d37dc0..6e993fe2 100644 --- a/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart +++ b/packages/mix_docs_preview/lib/tutorials/creating_a_widget/design_system_button.dart @@ -16,7 +16,11 @@ void main() { class Example extends StatelessWidget { const Example({super.key}); - Widget _buildButton(String label, BoxStyler boxStyle, TextStyler textStyle) { + Widget _buildButton({ + required String label, + required BoxStyler boxStyle, + required TextStyler textStyle, + }) { return Pressable( onPress: () {}, child: Box( @@ -32,28 +36,25 @@ class Example extends StatelessWidget { mainAxisSize: .min, children: [ _buildButton( - 'Filled', - BoxStyler() - .color(Colors.blueAccent) - .padding(.horizontal(24).vertical(12)) - .borderRadius(.circular(8)), - TextStyler().color(Colors.white).fontSize(16).fontWeight(.w500), + label: 'Filled', + boxStyle: .color( + Colors.blueAccent, + ).padding(.horizontal(24).vertical(12)).borderRadius(.circular(8)), + textStyle: .color(Colors.white).fontSize(16).fontWeight(.w500), ), const SizedBox(height: 12), _buildButton( - 'Outlined', - BoxStyler() - .color(Colors.transparent) + label: 'Outlined', + boxStyle: .color(Colors.transparent) .border(.color(Colors.blueAccent).width(1.5)) .padding(.horizontal(24).vertical(12)) .borderRadius(.circular(8)), - TextStyler().color(Colors.blueAccent).fontSize(16).fontWeight(.w500), + textStyle: .color(Colors.blueAccent).fontSize(16).fontWeight(.w500), ), const SizedBox(height: 12), _buildButton( - 'Elevated', - BoxStyler() - .color(Colors.blueAccent) + label: 'Elevated', + boxStyle: .color(Colors.blueAccent) .padding(.horizontal(24).vertical(12)) .borderRadius(.circular(8)) .shadow( @@ -61,20 +62,17 @@ class Example extends StatelessWidget { Colors.blueAccent.shade700.withValues(alpha: 0.5), ).offset(x: 0, y: 4).blurRadius(8), ), - TextStyler().color(Colors.white).fontSize(16).fontWeight(.w500), + textStyle: .color(Colors.white).fontSize(16).fontWeight(.w500), ), const SizedBox(height: 12), _buildButton( - 'Link', - BoxStyler() - .color(Colors.transparent) - .padding(.horizontal(24).vertical(12)) - .borderRadius(.circular(8)), - TextStyler() - .color(Colors.blueAccent) - .fontSize(16) - .fontWeight(.w500) - .decoration(.underline), + label: 'Link', + boxStyle: .color( + Colors.transparent, + ).padding(.horizontal(24).vertical(12)).borderRadius(.circular(8)), + textStyle: .color( + Colors.blueAccent, + ).fontSize(16).fontWeight(.w500).decoration(.underline), ), const SizedBox(height: 12), Pressable( diff --git a/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart b/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart index 1ab6ed2d..eaf5d984 100644 --- a/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart +++ b/packages/mix_docs_preview/lib/widgets/stack/layered_boxes.dart @@ -15,7 +15,7 @@ class Example extends StatelessWidget { @override Widget build(BuildContext context) { final flexStyle = StackBoxStyler( - constraints: .new().height(100).width(100), + constraints: .square(100), stackAlignment: .bottomCenter, ); @@ -29,14 +29,14 @@ class Example extends StatelessWidget { Box( style: BoxStyler.color( Colors.black, - ).height(15).width(100).wrap(.new().align(alignment: .center)), + ).height(15).width(100).wrap(.align(alignment: .center)), ), Box( style: BoxStyler.color(Colors.grey.shade100) .height(100) .width(100) .border(.color(Colors.black).width(20)) - .wrap(.new().scale(0.50, 0.50)), + .wrap(.scale(x: 0.50, y: 0.50)), ), ], ); diff --git a/src/content/documentation/mix/ecosystem/mix-lint.mdx b/src/content/documentation/mix/ecosystem/mix-lint.mdx index 5bc66d44..e20fe20d 100644 --- a/src/content/documentation/mix/ecosystem/mix-lint.mdx +++ b/src/content/documentation/mix/ecosystem/mix-lint.mdx @@ -97,9 +97,7 @@ final style = BoxStyler() final primary = ColorToken('primary'); final rounded = RadiusToken('rounded'); -final style = BoxStyler() - .color(primary()) - .borderRadius(.topLeft(rounded())); +final style = BoxStyler().color(primary()).borderRadius(.topLeft(rounded())); ``` ### mix_avoid_defining_tokens_within_scope @@ -109,12 +107,7 @@ final style = BoxStyler() **Avoid:** ```dart -MixScope( - colors: { - ColorToken('primary'): Colors.blue, - }, - child: child, -); +MixScope(colors: {ColorToken('primary'): Colors.blue}, child: child); ``` **Prefer:** @@ -122,12 +115,7 @@ MixScope( ```dart final primary = ColorToken('primary'); -MixScope( - colors: { - primary: Colors.blue, - }, - child: child, -); +MixScope(colors: {primary: Colors.blue}, child: child); ``` ### mix_avoid_empty_variants @@ -162,10 +150,7 @@ The rule counts method invocations in the chain starting from the Styler constru **Prefer:** ```dart -final layout = BoxStyler() - .padding(.all(8)) - .margin(.all(4)) - .alignment(.center); +final layout = BoxStyler().padding(.all(8)).margin(.all(4)).alignment(.center); final appearance = BoxStyler() .color(Colors.blue) @@ -183,9 +168,7 @@ final hovered = BoxStyler() .height(120) .opacity(1.0); -final style = layout - .merge(appearance) - .onHovered(hovered); +final style = layout.merge(appearance).onHovered(hovered); ``` ### mix_variants_last @@ -223,15 +206,13 @@ This rule includes a **quick fix** in supported clients: apply the suggested rew **Avoid:** ```dart -final style = BoxStyler() - .padding(EdgeInsetsGeometryMix.all(10)); +final style = BoxStyler().padding(EdgeInsetsGeometryMix.all(10)); ``` **Prefer:** ```dart -final style = BoxStyler() - .padding(.all(10)); +final style = BoxStyler().padding(.all(10)); ``` ### mix_mixable_styler_has_create diff --git a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx b/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx index ebba1813..00265cce 100644 --- a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx +++ b/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx @@ -310,7 +310,8 @@ Div(classNames: 'flex flex-col md:flex-row gap-4', children: [...]) ```dart Div( - classNames: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-4 py-2 rounded-lg', + classNames: + 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-4 py-2 rounded-lg', child: Span(text: 'Click me'), ) ``` @@ -381,7 +382,7 @@ TwScope( fontSize: 16, lineHeight: 1.5, letterSpacing: 0, - fontWeight: FontWeight.w400, + fontWeight: .w400, ), ), child: MyApp(), diff --git a/src/content/documentation/mix/guides/animations.mdx b/src/content/documentation/mix/guides/animations.mdx index 9c37c26d..e3a2eec6 100644 --- a/src/content/documentation/mix/guides/animations.mdx +++ b/src/content/documentation/mix/guides/animations.mdx @@ -40,15 +40,12 @@ All curve configs take a `duration` and an optional `delay`: ```dart // Standard easing — good default for most transitions .ease(300.ms) - -// Starts fast, decelerates to a stop — natural for elements settling into place -.decelerate(200.ms) - -// Smooth sinusoidal ease-out -.easeOutSine(400.ms) - -// With a delay before starting -.easeInOut(500.ms, delay: 200.ms) + // Starts fast, decelerates to a stop — natural for elements settling into place + .decelerate(200.ms) + // Smooth sinusoidal ease-out + .easeOutSine(400.ms) + // With a delay before starting + .easeInOut(500.ms, delay: 200.ms) ``` Available curves include: `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`, `decelerate`, `bounceIn`, `bounceOut`, `elasticOut`, and many more — each matching a Flutter `Curves` constant. @@ -60,13 +57,11 @@ Springs produce natural, physics-driven motion. Mix offers three ways to configu ```dart // Duration-based spring — set duration and bounciness (0 = no bounce, 1 = very bouncy) .spring(800.ms, bounce: 0.6) - -// Damping-ratio spring — ratio of 1.0 is critically damped (no overshoot), -// below 1.0 oscillates, above 1.0 is overdamped -.springWithDampingRatio(800.ms, ratio: 0.3) - -// Raw physics spring — direct control over mass, stiffness, and damping force -.springDescription(mass: 1.0, stiffness: 180.0, damping: 12.0) + // Damping-ratio spring — ratio of 1.0 is critically damped (no overshoot), + // below 1.0 oscillates, above 1.0 is overdamped + .springWithDampingRatio(800.ms, ratio: 0.3) + // Raw physics spring — direct control over mass, stiffness, and damping force + .springDescription(mass: 1.0, stiffness: 180.0, damping: 12.0) ``` --- @@ -89,10 +84,7 @@ final box = BoxStyler() .size(_counter * 10, _counter * 10) .animate(.spring(1.s, bounce: 0.6)); -return Pressable( - onPress: () => setState(() => _counter += 3), - child: box(), -); +return Pressable(onPress: () => setState(() => _counter += 3), child: box()); ``` @@ -219,7 +211,7 @@ Several tracks run in parallel to create one looping animation. Since no `trigge This example shows two advanced patterns: - **Custom tweens:** The color track passes `tweenBuilder: ColorTween.new` so Mix can interpolate between `Color` values correctly. You can use any `Tween` subclass this way. -- **`.wrap()` for widget-level effects:** Opacity cannot be interpolated as a style property, so `.wrap(WidgetModifierConfig.opacity(...))` wraps the widget in Flutter's `Opacity` widget. The `.transform()` call similarly applies a `Matrix4` scale — useful when you need to animate a raw transform matrix rather than using the `.scale()` shorthand. +- **`.wrap()` for widget-level effects:** Opacity cannot be interpolated as a style property, so `.wrap(.opacity(...))` wraps the widget in Flutter's `Opacity` widget. The `.transform()` call similarly applies a `Matrix4` scale — useful when you need to animate a raw transform matrix rather than using the `.scale()` shorthand. ```dart final box = BoxStyler() diff --git a/src/content/documentation/mix/guides/common-patterns.mdx b/src/content/documentation/mix/guides/common-patterns.mdx index b2b1439a..bbf1b93a 100644 --- a/src/content/documentation/mix/guides/common-patterns.mdx +++ b/src/content/documentation/mix/guides/common-patterns.mdx @@ -18,8 +18,7 @@ Making a styled container respond to taps, hovers, and focus in plain Flutter me ```dart PressableBox( onPress: () => print('tapped'), - style: BoxStyler() - .padding(.horizontal(24).vertical(12)) + style: .padding(.horizontal(24).vertical(12)) .borderRadius(.circular(8)) .color(Colors.blue) .onHovered(.color(Colors.blue.shade700)) @@ -51,10 +50,7 @@ Define styles as top-level or class-level constants, then use the `call()` metho ```dart // Declare outside build — reusable across widgets -final title = TextStyler() - .fontSize(24) - .fontWeight(.bold) - .color(Colors.black); +final title = TextStyler().fontSize(24).fontWeight(.bold).color(Colors.black); final card = BoxStyler() .padding(.all(16)) @@ -67,9 +63,7 @@ final card = BoxStyler() // Inside build — call() converts the styler into its widget @override Widget build(BuildContext context) { - return card( - child: title('Welcome back'), - ); + return card(child: title('Welcome back')); } ``` @@ -124,16 +118,9 @@ final cardStyle = BoxStyler() // 3. Provide values via MixScope MixScope( - colors: { - $primary: Colors.blue, - $surface: Colors.white, - }, - spaces: { - $spacingMd: 16.0, - }, - radii: { - $radiusMd: Radius.circular(8), - }, + colors: {$primary: Colors.blue, $surface: Colors.white}, + spaces: {$spacingMd: 16.0}, + radii: {$radiusMd: .circular(8)}, child: MyApp(), ) ``` diff --git a/src/content/documentation/mix/guides/design-token.mdx b/src/content/documentation/mix/guides/design-token.mdx index 0edab785..096911f8 100644 --- a/src/content/documentation/mix/guides/design-token.mdx +++ b/src/content/documentation/mix/guides/design-token.mdx @@ -25,17 +25,10 @@ Using a token takes three steps: declare it, provide a value, and reference it i final $primary = ColorToken('primary'); // 2. Provide the token value via MixScope -MixScope( - colors: { - $primary: Colors.lightBlue, - }, - child: MyApp(), -); +MixScope(colors: {$primary: Colors.lightBlue}, child: MyApp()); // 3. Reference the token in a style — call() resolves it from MixScope at build time -final style = BoxStyler() - .color($primary()) - .size(100, 100); +final style = BoxStyler().color($primary()).size(100, 100); ``` ## MixScope @@ -44,16 +37,9 @@ final style = BoxStyler() ```dart MixScope( - colors: { - $primary: Colors.blue, - $background: Colors.white, - }, - spaces: { - $spacingMd: 16.0, - }, - radii: { - $radiusMd: Radius.circular(8), - }, + colors: {$primary: Colors.blue, $background: Colors.white}, + spaces: {$spacingMd: 16.0}, + radii: {$radiusMd: .circular(8)}, child: MaterialApp(home: MyHomePage()), ); ``` @@ -94,9 +80,7 @@ Mix offers two general ways to reference a token. Both resolve to the same value The simplest approach. Call the token like a function to get a reference that resolves at build time: ```dart -final style = BoxStyler() - .color($primary()) - .padding(.all($spacingMd())); +final style = BoxStyler().color($primary()).padding(.all($spacingMd())); ``` ### Prop.token (for directives) @@ -129,9 +113,7 @@ For example, `TextStyler.style()` expects a Mix text style, so pass the token's ```dart const $heading = TextStyleToken('heading'); -final text = TextStyler() - .style($heading.mix()) - .color($primary()); +final text = TextStyler().style($heading.mix()).color($primary()); ``` ## Theme Switching @@ -142,10 +124,7 @@ Tokens make theme switching straightforward: define two maps and swap them in `M final $background = ColorToken('background'); final $foreground = ColorToken('foreground'); -final lightColors = { - $background: Colors.white, - $foreground: Colors.black, -}; +final lightColors = {$background: Colors.white, $foreground: Colors.black}; final darkColors = { $background: Colors.grey[900]!, @@ -153,10 +132,7 @@ final darkColors = { }; // Swap themes by toggling the map -MixScope( - colors: isDark ? darkColors : lightColors, - child: MyApp(), -); +MixScope(colors: isDark ? darkColors : lightColors, child: MyApp()); ``` Every style referencing `$background` or `$foreground` updates automatically when the map changes. @@ -171,14 +147,18 @@ The most common reason to reach for a context token is **bridging Material's the ```dart // Map Material's ColorScheme into Mix tokens — declared once, app-wide. -final $primary = ContextToken((context) => Theme.of(context).colorScheme.primary); -final $surface = ContextToken((context) => Theme.of(context).colorScheme.surface); -final $onSurface = ContextToken((context) => Theme.of(context).colorScheme.onSurface); +final $primary = ContextToken( + (context) => Theme.of(context).colorScheme.primary, +); +final $surface = ContextToken( + (context) => Theme.of(context).colorScheme.surface, +); +final $onSurface = ContextToken( + (context) => Theme.of(context).colorScheme.onSurface, +); // Use them like any other token — they track the active ThemeData automatically. -final cardStyle = BoxStyler() - .color($surface()) - .borderRadius(.circular(12)); +final cardStyle = BoxStyler().color($surface()).borderRadius(.circular(12)); Box(style: cardStyle); ``` diff --git a/src/content/documentation/mix/guides/directives.mdx b/src/content/documentation/mix/guides/directives.mdx index 0badc019..86dc93c2 100644 --- a/src/content/documentation/mix/guides/directives.mdx +++ b/src/content/documentation/mix/guides/directives.mdx @@ -17,10 +17,7 @@ Directives transform values (text, numbers, colors) when a style is resolved. Un ```dart // The text "hello world" is transformed to "HELLO WORLD" at resolve time -StyledText( - 'hello world', - style: TextStyler().uppercase(), -) +StyledText('hello world', style: TextStyler().uppercase()) ``` --- @@ -146,12 +143,10 @@ Transform colors by adjusting opacity, brightness, saturation, and more. Color d | `.brighten(double)` | Increase brightness | ```dart -final style = BoxStyler() - .color(Colors.blue.withOpacity(0.5)); +final style = BoxStyler().color(Colors.blue.withOpacity(0.5)); // Color directives also work with tokens -final style = BoxStyler() - .color($primary().withOpacity(0.8)); +final style = BoxStyler().color($primary().withOpacity(0.8)); ``` --- @@ -189,7 +184,7 @@ final class ReverseStringDirective extends Directive { extension ReverseTextDirective on TextStyler { TextStyler reverse() { return merge( - TextStyler(textDirectives: [const ReverseStringDirective()]), + .textDirective(const ReverseStringDirective()), ); } } diff --git a/src/content/documentation/mix/guides/dynamic-styling.mdx b/src/content/documentation/mix/guides/dynamic-styling.mdx index da41e99a..1b88925e 100644 --- a/src/content/documentation/mix/guides/dynamic-styling.mdx +++ b/src/content/documentation/mix/guides/dynamic-styling.mdx @@ -35,14 +35,11 @@ Styles are meant to be reused. When you add a variant to an existing style, it m ```dart final styleA = BoxStyler() - .color(Colors.red) - .height(100) - .width(100) - .borderRadius(.circular(10)) - .onHovered( - .color(Colors.blue) - .width(200) - ); + .color(Colors.red) + .height(100) + .width(100) + .borderRadius(.circular(10)) + .onHovered(.color(Colors.blue).width(200)); final styleB = styleA.onHovered(.color(Colors.green)); ``` @@ -51,10 +48,10 @@ final styleB = styleA.onHovered(.color(Colors.green)); ```dart BoxStyler() - .color(Colors.green) - .height(100) - .width(200) - .borderRadius(.circular(10)); + .color(Colors.green) + .height(100) + .width(200) + .borderRadius(.circular(10)); ``` Hover over each box below to see the difference — `styleA` turns blue while `styleB` turns green, but both expand to 200 width: @@ -70,15 +67,15 @@ You can combine multiple conditions by nesting variants. For example, different ```dart final hoverStyle = BoxStyler() - .onDark(.color(Colors.blue)) - .onLight(.color(Colors.green)); + .onDark(.color(Colors.blue)) + .onLight(.color(Colors.green)); final style = BoxStyler() - .color(Colors.red) - .height(100) - .width(100) - .borderRadius(.circular(10)) - .onHovered(hoverStyle); + .color(Colors.red) + .height(100) + .width(100) + .borderRadius(.circular(10)) + .onHovered(hoverStyle); ``` When hovered in dark mode, the color is blue. When hovered in light mode, the color is green. The base color (red) applies when not hovered. Toggle the mode and hover to see the difference: @@ -99,16 +96,16 @@ Context variants are applied **after** all regular style properties. This means final style = BoxStyler() .color(Colors.red) .onHovered(.color(Colors.blue)) - .color(Colors.green); // This overrides the base color, but NOT the hover color + .color( + Colors.green, + ); // This overrides the base color, but NOT the hover color ``` To override a property set by a variant, you need another variant: ```dart // Correct — use another onHovered to override the hover color -final styleA = BoxStyler() - .color(Colors.red) - .onHovered(.color(Colors.blue)); +final styleA = BoxStyler().color(Colors.red).onHovered(.color(Colors.blue)); final styleB = styleA.onHovered(.color(Colors.green)); // Now hover is green ``` @@ -143,8 +140,7 @@ Pressable( // Or use PressableBox for convenience PressableBox( onPress: () {}, - style: BoxStyler() - .color(Colors.grey) + style: .color(Colors.grey) .onFocused(.color(Colors.blue)), child: Text('Focus me'), ) @@ -207,18 +203,17 @@ PressableBox( final style = BoxStyler() .color(Colors.blue) // Use white color when NOT in dark mode - .onNot(ContextVariant.brightness(.dark), .color(Colors.white)); + .onNot(.brightness(.dark), .color(Colors.white)); ``` You can negate any variant — widget states, breakpoints, platforms, and more: ```dart // Only apply a shadow when NOT on mobile -final style = BoxStyler() - .onNot(ContextVariant.mobile(), .shadow( - color: Colors.black26, - blurRadius: 10, - )); +final style = BoxStyler().onNot( + .mobile(), + .shadow(color: Colors.black26, blurRadius: 10), +); ``` #### `onBuilder` — fully dynamic variants @@ -226,15 +221,13 @@ final style = BoxStyler() `onBuilder` gives you full access to `BuildContext` to compute a style at build time. Use it when none of the built-in variants cover your condition: ```dart -final style = BoxStyler() - .color(Colors.grey) - .onBuilder((context) { - final hour = DateTime.now().hour; - if (hour >= 6 && hour < 18) { - return BoxStyler().color(Colors.amber); - } - return BoxStyler().color(Colors.indigo); - }); +final style = BoxStyler().color(Colors.grey).onBuilder((context) { + final hour = DateTime.now().hour; + if (hour >= 6 && hour < 18) { + return BoxStyler().color(Colors.amber); + } + return BoxStyler().color(Colors.indigo); +}); ``` --- diff --git a/src/content/documentation/mix/guides/styling.mdx b/src/content/documentation/mix/guides/styling.mdx index 8b38d53d..da947fbf 100644 --- a/src/content/documentation/mix/guides/styling.mdx +++ b/src/content/documentation/mix/guides/styling.mdx @@ -50,7 +50,7 @@ final rowStyle = FlexBoxStyler() .spacing(12) .padding(.all(16)) .color(Colors.grey.shade100); - + FlexBox(style: rowStyle, children: [...]); ``` @@ -110,9 +110,9 @@ Styles can adapt to user interactions and context using **variants**. Instead of ```dart final button = BoxStyler() - .color(Colors.blue) - .onHovered(.color(Colors.blue.shade700)) - .onDark(.color(Colors.blue.shade200)); + .color(Colors.blue) + .onHovered(.color(Colors.blue.shade700)) + .onDark(.color(Colors.blue.shade200)); ``` Variants are covered in depth in the [Dynamic Styling](/documentation/mix/guides/dynamic-styling) guide. diff --git a/src/content/documentation/mix/guides/widget-modifiers.mdx b/src/content/documentation/mix/guides/widget-modifiers.mdx index f036cd3e..e60da8ad 100644 --- a/src/content/documentation/mix/guides/widget-modifiers.mdx +++ b/src/content/documentation/mix/guides/widget-modifiers.mdx @@ -18,10 +18,7 @@ Some visual effects — opacity, clipping, visibility — aren't style propertie Use `.wrap()` with a modifier to add a widget wrapper to your style: ```dart -final style = BoxStyler() - .color(Colors.red) - .size(100, 100) - .wrap(.opacity(0.4)); +final style = BoxStyler().color(Colors.red).size(100, 100).wrap(.opacity(0.4)); ``` @@ -104,10 +101,12 @@ If the default pipeline doesn't fit your use case, you can override it with `.wr final style = BoxStyler() .wrap(.opacity(0.5)) .wrap(.padding(.all(8))) - .wrap(.orderOfModifiers([ - OpacityModifier, // Apply opacity first (innermost) - PaddingModifier, // Then padding (outermost) - ])); + .wrap( + .orderOfModifiers([ + OpacityModifier, // Apply opacity first (innermost) + PaddingModifier, // Then padding (outermost) + ]), + ); ``` Your custom order takes priority. Any modifiers not listed in your custom order fall back to their default position. @@ -126,7 +125,7 @@ MixScope( ClipRRectModifier, OpacityModifier, ], - colors: { /* ... */ }, + colors: {/* ... */}, child: MyApp(), ); ``` @@ -196,7 +195,7 @@ class OpacityModifierMix extends ModifierMix { const OpacityModifierMix.create({this.opacity}); OpacityModifierMix({double? opacity}) - : this.create(opacity: Prop.maybe(opacity)); + : this.create(opacity: Prop.maybe(opacity)); @override OpacityModifier resolve(BuildContext context) { diff --git a/src/content/documentation/mix/overview/comparison.mdx b/src/content/documentation/mix/overview/comparison.mdx index e7c4a2f0..cf623d3f 100644 --- a/src/content/documentation/mix/overview/comparison.mdx +++ b/src/content/documentation/mix/overview/comparison.mdx @@ -98,17 +98,17 @@ class _CustomFlutterWidgetState extends State { child: AnimatedContainer( duration: _duration, curve: _curve, - padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8), + padding: .symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( color: bgColor, - borderRadius: BorderRadius.circular(10), + borderRadius: .circular(10), border: Border.all(color: borderColor), ), child: Text( 'Click me', style: TextStyle( fontSize: 16, - fontWeight: FontWeight.w500, + fontWeight: .w500, color: accentColor, ), ), diff --git a/src/content/documentation/mix/overview/getting-started.mdx b/src/content/documentation/mix/overview/getting-started.mdx index 143622d4..fcfdab1a 100644 --- a/src/content/documentation/mix/overview/getting-started.mdx +++ b/src/content/documentation/mix/overview/getting-started.mdx @@ -74,9 +74,7 @@ class Example extends StatelessWidget { Extract styles into top-level variables and reuse them across widgets. You can also pass styles via the `style` parameter using Mix's widget classes like `Box` and `StyledText`, and override individual properties by chaining: ```dart -final primaryCard = BoxStyler() - .color(Colors.blue) - .borderRadius(.circular(12)); +final primaryCard = BoxStyler().color(Colors.blue).borderRadius(.circular(12)); final box = Box(style: primaryCard, child: StyledText('Primary')); diff --git a/src/content/documentation/mix/overview/introduction.mdx b/src/content/documentation/mix/overview/introduction.mdx index ef888ec3..c30ddf00 100644 --- a/src/content/documentation/mix/overview/introduction.mdx +++ b/src/content/documentation/mix/overview/introduction.mdx @@ -85,12 +85,8 @@ final $borderRadius = RadiusToken('borderRadius'); // Provide token values through MixScope MixScope( - colors: { - $primaryColor: Colors.blue, - }, - radii: { - $borderRadius: Radius.circular(8), - }, + colors: {$primaryColor: Colors.blue}, + radii: {$borderRadius: .circular(8)}, child: MyApp(), ); ``` diff --git a/src/content/documentation/mix/overview/migration.mdx b/src/content/documentation/mix/overview/migration.mdx index 089a4a88..b142c037 100644 --- a/src/content/documentation/mix/overview/migration.mdx +++ b/src/content/documentation/mix/overview/migration.mdx @@ -37,11 +37,7 @@ The `$box`, `$text`, `$icon`, `$flex`, `$stack`, `$image`, `$flexbox`, and `$sta ```dart // DEPRECATED - v1.x -final style = Style( - $box.color.blue(), - $box.padding(16), - $box.borderRadius(8), -); +final style = Style($box.color.blue(), $box.padding(16), $box.borderRadius(8)); // v2.0 final style = BoxStyler() @@ -95,17 +91,12 @@ The `$with` namespace is replaced with the `.wrap()` method or shorthand modifie ```dart // v1.x MixTheme( - data: MixThemeData( - colors: {primaryColor: Colors.blue}, - ), + data: MixThemeData(colors: {primaryColor: Colors.blue}), child: MyApp(), ); // v2.0 -MixScope( - colors: {primaryColor: Colors.blue}, - child: MyApp(), -); +MixScope(colors: {primaryColor: Colors.blue}, child: MyApp()); ``` #### Token Usage diff --git a/src/content/documentation/mix/overview/utility-first.mdx b/src/content/documentation/mix/overview/utility-first.mdx index 6457d771..4e80f604 100644 --- a/src/content/documentation/mix/overview/utility-first.mdx +++ b/src/content/documentation/mix/overview/utility-first.mdx @@ -62,7 +62,8 @@ You can create your own shorthand by defining helper functions or extending `Box ```dart // Custom helper function -BoxStyler accentBorder(Color color) => BoxStyler().border(.top(color: color, width: 2)); +BoxStyler accentBorder(Color color) => + BoxStyler().border(.top(color: color, width: 2)); // Use the helper accentBorder(Colors.red); diff --git a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx index 7c558388..c11f013b 100644 --- a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx +++ b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx @@ -42,8 +42,8 @@ controller.dragged = true; controller.error = true; // Getters -controller.pressed; // bool -controller.selected; // bool +controller.pressed; // bool +controller.selected; // bool // Generic API controller.update(WidgetState.selected, true); @@ -152,9 +152,7 @@ class _ToggleButtonState extends State { .color(Colors.blue.shade500) .border(.color(Colors.blue.shade600).width(2)) .shadow( - .color(Colors.blue.shade200) - .blurRadius(10) - .spreadRadius(2), + .color(Colors.blue.shade200).blurRadius(10).spreadRadius(2), ), ); diff --git a/src/content/documentation/mix/tutorials/creating-a-widget.mdx b/src/content/documentation/mix/tutorials/creating-a-widget.mdx index 619c32d4..48e2d803 100644 --- a/src/content/documentation/mix/tutorials/creating-a-widget.mdx +++ b/src/content/documentation/mix/tutorials/creating-a-widget.mdx @@ -175,35 +175,51 @@ Beyond the generated `container()`, `icon()`, and `label()` setters, you can add ```dart ButtonStyler backgroundColor(Color value) { - return merge(ButtonStyler(container: FlexBoxStyler.color(value))); + return merge( + .container( + .color(value), + ), + ); } ButtonStyler textColor(Color value) { - return merge(ButtonStyler(label: TextStyler.color(value))); + return merge( + .label( + .color(value), + ), + ); } ButtonStyler iconColor(Color value) { - return merge(ButtonStyler(icon: IconStyler.color(value))); + return merge( + .icon( + .color(value), + ), + ); } ButtonStyler borderRadius(double value) { return merge( - ButtonStyler( - container: FlexBoxStyler().borderRadius(.circular(value)), + .container( + .borderRadius(.circular(value)), ), ); } ButtonStyler padding({required double x, required double y}) { return merge( - ButtonStyler( - container: FlexBoxStyler().padding(.horizontal(x).vertical(y)), + .container( + .padding(.horizontal(x).vertical(y)), ), ); } ButtonStyler scale(double value) { - return merge(ButtonStyler(container: FlexBoxStyler().scale(value))); + return merge( + .container( + .scale(value), + ), + ); } } ``` @@ -266,37 +282,29 @@ enum ButtonVariant { .backgroundColor(Colors.blueAccent) .textColor(Colors.white) .iconColor(Colors.white); - + case ButtonVariant.outlined: return ButtonStyler() .container( - FlexBoxStyler() - .color(Colors.transparent) - .border(.color(Colors.blueAccent).width(1.5)), + .color( + Colors.transparent, + ).border(.color(Colors.blueAccent).width(1.5)), ) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); - + case ButtonVariant.elevated: return ButtonStyler() .backgroundColor(Colors.blueAccent) .textColor(Colors.white) .iconColor(Colors.white) .container( - FlexBoxStyler().shadow( - BoxShadowMix() - .color(Colors.blueAccent.shade700) - .offset(x: 0, y: 5), - ), + .shadow(.color(Colors.blueAccent.shade700).offset(x: 0, y: 5)), ); - + case ButtonVariant.link: return ButtonStyler() - .container( - FlexBoxStyler() - .border(.style(.none)) - .color(Colors.transparent), - ) + .container(.border(.style(.none)).color(Colors.transparent)) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); } @@ -318,9 +326,7 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { .crossAxisAlignment(.center) .mainAxisSize(.min); - final label = TextStyler().style( - TextStyleMix().fontSize(16).fontWeight(.w500), - ); + final label = TextStyler().style(.fontSize(16).fontWeight(.w500)); final icon = IconStyler().size(18); @@ -329,19 +335,11 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { .label(label) .icon(icon) .merge(variant?.style) - .onPressed( - ButtonStyler() - .container(FlexBoxStyler().scale(0.9)), - ) + .onPressed(.container(.scale(0.9))) .onDisabled( - ButtonStyler() - .container(FlexBoxStyler().color(Colors.blueGrey.shade100)) - .label( - TextStyler().style( - TextStyleMix().color(Colors.blueGrey.shade700), - ), - ) - .icon(IconStyler().color(Colors.blueGrey.shade700)), + .container(.color(Colors.blueGrey.shade100)) + .label(.style(.color(Colors.blueGrey.shade700))) + .icon(.color(Colors.blueGrey.shade700)), ) .merge(style); } @@ -463,9 +461,7 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return const MaterialApp( - home: ButtonExampleScreen(), - ); + return const MaterialApp(home: ButtonExampleScreen()); } } @@ -477,20 +473,14 @@ class ButtonExampleScreen extends StatelessWidget { final icon = Icons.favorite; return Scaffold( - appBar: AppBar( - title: const Text('Button Examples'), - ), + appBar: AppBar(title: const Text('Button Examples')), body: Padding( - padding: const EdgeInsets.all(16.0), + padding: const .all(16), child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisAlignment: .center, + crossAxisAlignment: .stretch, children: [ - FilledButton( - label: 'Filled Button', - icon: icon, - onPressed: () {}, - ), + FilledButton(label: 'Filled Button', icon: icon, onPressed: () {}), const SizedBox(height: 10), OutlinedButton( label: 'Outlined Button', @@ -504,15 +494,11 @@ class ButtonExampleScreen extends StatelessWidget { onPressed: () {}, ), const SizedBox(height: 10), - LinkButton( - label: 'Link Button', - icon: icon, - onPressed: () {}, - ), + LinkButton(label: 'Link Button', icon: icon, onPressed: () {}), const SizedBox(height: 20), const Text( 'Disabled State:', - style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + style: TextStyle(fontSize: 18, fontWeight: .bold), ), const SizedBox(height: 10), FilledButton( diff --git a/src/content/documentation/mix/tutorials/creating-context-variants.mdx b/src/content/documentation/mix/tutorials/creating-context-variants.mdx index b7ab0b97..485815be 100644 --- a/src/content/documentation/mix/tutorials/creating-context-variants.mdx +++ b/src/content/documentation/mix/tutorials/creating-context-variants.mdx @@ -50,8 +50,9 @@ BoxStyler() .color(Colors.red) .size(100, 100) .variant( - ContextVariant('custom_flag', (context) => - CustomInheritedWidget.of(context)?.flag ?? false, + ContextVariant( + 'custom_flag', + (context) => CustomInheritedWidget.of(context)?.flag ?? false, ), .color(Colors.blue), ); @@ -76,8 +77,9 @@ extension WidgetStateVariantMixinX, S extends Spec> on WidgetStateVariantMixin { T onCustomFlag(T style) { return variant( - ContextVariant('custom_flag', (context) => - CustomInheritedWidget.of(context)?.flag ?? false, + ContextVariant( + 'custom_flag', + (context) => CustomInheritedWidget.of(context)?.flag ?? false, ), style, ); @@ -141,7 +143,7 @@ class _ExampleState extends State { ContextVariant('custom_flag', (context) { return CustomInheritedWidget.of(context)?.flag ?? false; }), - BoxStyler().color(Colors.blue), + .color(Colors.blue), ); return CustomInheritedWidget( diff --git a/src/content/documentation/mix/tutorials/theming.mdx b/src/content/documentation/mix/tutorials/theming.mdx index c468bd2d..7ce905d6 100644 --- a/src/content/documentation/mix/tutorials/theming.mdx +++ b/src/content/documentation/mix/tutorials/theming.mdx @@ -49,9 +49,7 @@ class MyApp extends StatelessWidget { textStyles: LightBlueTheme.textStyles, radii: LightBlueTheme.radii, spaces: LightBlueTheme.spaces, - child: const MaterialApp( - home: ProfilePage(), - ), + child: const MaterialApp(home: ProfilePage()), ); } } @@ -135,36 +133,36 @@ class LightBlueTheme { }; static Map get textStyles => { - CustomTextStyleTokens.headline1.token: const TextStyle( + CustomTextStyleTokens.headline1.token: const .new( fontSize: 22, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Roboto', ), - CustomTextStyleTokens.headline2.token: const TextStyle( + CustomTextStyleTokens.headline2.token: const .new( fontSize: 18, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Roboto', ), - CustomTextStyleTokens.button.token: const TextStyle( + CustomTextStyleTokens.button.token: const .new( fontSize: 14, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Roboto', ), - CustomTextStyleTokens.body.token: const TextStyle( + CustomTextStyleTokens.body.token: const .new( fontSize: 16, - fontWeight: FontWeight.normal, + fontWeight: .normal, fontFamily: 'Roboto', ), - CustomTextStyleTokens.callout.token: const TextStyle( + CustomTextStyleTokens.callout.token: const .new( fontSize: 14, - fontWeight: FontWeight.normal, + fontWeight: .normal, fontFamily: 'Roboto', ), }; static Map get radii => { - MyThemeRadiusToken.large.token: const Radius.circular(100), - MyThemeRadiusToken.medium.token: const Radius.circular(12), + MyThemeRadiusToken.large.token: const .circular(100), + MyThemeRadiusToken.medium.token: const .circular(12), }; static Map get spaces => { @@ -187,36 +185,36 @@ class DarkPurpleTheme { }; static Map get textStyles => { - CustomTextStyleTokens.headline1.token: const TextStyle( + CustomTextStyleTokens.headline1.token: const .new( fontSize: 22, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Courier', ), - CustomTextStyleTokens.headline2.token: const TextStyle( + CustomTextStyleTokens.headline2.token: const .new( fontSize: 18, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Courier', ), - CustomTextStyleTokens.button.token: const TextStyle( + CustomTextStyleTokens.button.token: const .new( fontSize: 14, - fontWeight: FontWeight.bold, + fontWeight: .bold, fontFamily: 'Courier', ), - CustomTextStyleTokens.body.token: const TextStyle( + CustomTextStyleTokens.body.token: const .new( fontSize: 16, - fontWeight: FontWeight.normal, + fontWeight: .normal, fontFamily: 'Courier', ), - CustomTextStyleTokens.callout.token: const TextStyle( + CustomTextStyleTokens.callout.token: const .new( fontSize: 14, - fontWeight: FontWeight.normal, + fontWeight: .normal, fontFamily: 'Courier', ), }; static Map get radii => { - MyThemeRadiusToken.large.token: const Radius.circular(12), - MyThemeRadiusToken.medium.token: const Radius.circular(8), + MyThemeRadiusToken.large.token: const .circular(12), + MyThemeRadiusToken.medium.token: const .circular(8), }; static Map get spaces => { @@ -276,11 +274,7 @@ Optional **`onThemeToggle`** / **`useDarkTheme`** parameters show how to wire a ```dart class ProfilePage extends StatelessWidget { - const ProfilePage({ - super.key, - this.onThemeToggle, - this.useDarkTheme = false, - }); + const ProfilePage({super.key, this.onThemeToggle, this.useDarkTheme = false}); final VoidCallback? onThemeToggle; final bool useDarkTheme; @@ -308,9 +302,7 @@ class ProfilePage extends StatelessWidget { if (onThemeToggle != null) IconButton( tooltip: 'Toggle theme', - icon: Icon( - useDarkTheme ? Icons.light_mode : Icons.dark_mode, - ), + icon: Icon(useDarkTheme ? Icons.light_mode : Icons.dark_mode), onPressed: onThemeToggle, ), ], @@ -402,17 +394,17 @@ class _ThemingTutorialAppState extends State { @override Widget build(BuildContext context) { // Select theme based on state - final colors = _isDarkPurpleTheme - ? DarkPurpleTheme.colors + final colors = _isDarkPurpleTheme + ? DarkPurpleTheme.colors : LightBlueTheme.colors; final textStyles = _isDarkPurpleTheme ? DarkPurpleTheme.textStyles : LightBlueTheme.textStyles; - final radii = _isDarkPurpleTheme - ? DarkPurpleTheme.radii + final radii = _isDarkPurpleTheme + ? DarkPurpleTheme.radii : LightBlueTheme.radii; - final spaces = _isDarkPurpleTheme - ? DarkPurpleTheme.spaces + final spaces = _isDarkPurpleTheme + ? DarkPurpleTheme.spaces : LightBlueTheme.spaces; return MixScope( diff --git a/src/content/documentation/mix/widgets/box.mdx b/src/content/documentation/mix/widgets/box.mdx index ebeebd28..de799e12 100644 --- a/src/content/documentation/mix/widgets/box.mdx +++ b/src/content/documentation/mix/widgets/box.mdx @@ -18,16 +18,14 @@ final style = BoxStyler() .color(Colors.blue) .borderRadius(.circular(12)) .padding(.all(16)) - .shadow( - .color(Colors.blue.shade200).blurRadius(12).offset(x: 0, y: 4), - ); + .shadow(.color(Colors.blue.shade200).blurRadius(12).offset(x: 0, y: 4)); -final label = TextStyler() - .color(Colors.white) - .fontSize(18) - .fontWeight(.w600); +final label = TextStyler().color(Colors.white).fontSize(18).fontWeight(.w600); -Box(style: style, child: StyledText('Hello Mix', style: label)) +Box( + style: style, + child: StyledText('Hello Mix', style: label), +) ``` The preview below shows this style applied. diff --git a/src/content/documentation/mix/widgets/flexbox.mdx b/src/content/documentation/mix/widgets/flexbox.mdx index b114a369..3ba61e98 100644 --- a/src/content/documentation/mix/widgets/flexbox.mdx +++ b/src/content/documentation/mix/widgets/flexbox.mdx @@ -29,7 +29,8 @@ final iconStyle = IconStyler() .color(Colors.cyan.shade600) .size(18); -final textStyle = TextStyler().fontSize(16) +final textStyle = TextStyler() + .fontSize(16) .fontWeight(.w500) .color(Colors.cyan.shade700); diff --git a/src/content/documentation/mix/widgets/image.mdx b/src/content/documentation/mix/widgets/image.mdx index f8da99e9..727b374a 100644 --- a/src/content/documentation/mix/widgets/image.mdx +++ b/src/content/documentation/mix/widgets/image.mdx @@ -19,10 +19,7 @@ final style = ImageStyler() .color(Colors.blue.withValues(alpha: 0.3)) .colorBlendMode(.overlay); -StyledImage( - image: NetworkImage('https://picsum.photos/160'), - style: style, -) +StyledImage(image: NetworkImage('https://picsum.photos/160'), style: style) ``` The preview below shows a styled image with dimensions, fit, and color blend. diff --git a/src/content/documentation/mix/widgets/pressable.mdx b/src/content/documentation/mix/widgets/pressable.mdx index cf24796e..444270aa 100644 --- a/src/content/documentation/mix/widgets/pressable.mdx +++ b/src/content/documentation/mix/widgets/pressable.mdx @@ -16,13 +16,11 @@ final buttonStyle = BoxStyler() .color(Colors.blue) .padding(.symmetric(horizontal: 24, vertical: 12)) .borderRadius(.circular(10)) - .shadow( - .color(Colors.blue.shade200).blurRadius(8).offset(x: 0, y: 2), - ) + .shadow(.color(Colors.blue.shade200).blurRadius(8).offset(x: 0, y: 2)) .onHovered( .color(Colors.blue.shade700).shadow( - .color(Colors.blue.shade300).blurRadius(12).offset(x: 0, y: 4), - ), + .color(Colors.blue.shade300).blurRadius(12).offset(x: 0, y: 4), + ), ) .onPressed(.color(Colors.blue.shade900).scale(0.97)) .animate(.ease(150.ms)); @@ -102,14 +100,11 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when `PressableBox` combines the functionality of `Pressable` with `Box` styling capabilities, providing a pressable area with customizable visual styling. ```dart - PressableBox( - style: BoxStyler() - .color(Colors.blue) - .padding(.all(16)) - .borderRadius(.circular(8)), - onPress: () => print('PressableBox pressed'), - child: StyledText('Styled Button'), - ); +PressableBox( + style: .color(Colors.blue).padding(.all(16)).borderRadius(.circular(8)), + onPress: () => print('PressableBox pressed'), + child: StyledText('Styled Button'), +); ``` ### PressableBox Constructor @@ -134,8 +129,7 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when ```dart PressableBox( - style: BoxStyler() - .color(Colors.blue) + style: .color(Colors.blue) .padding(.all(16)) .borderRadius(.circular(8)) .onPressed(.color(Colors.red)) diff --git a/src/content/documentation/mix/widgets/stack.mdx b/src/content/documentation/mix/widgets/stack.mdx index e68e1003..4cc826f7 100644 --- a/src/content/documentation/mix/widgets/stack.mdx +++ b/src/content/documentation/mix/widgets/stack.mdx @@ -13,7 +13,7 @@ You can use the `StackBoxStyler` API to fluently compose your layout and decorat ```dart final flexStyle = StackBoxStyler( - constraints: .new().height(100).width(100), + constraints: .square(100), stackAlignment: .bottomCenter, ); @@ -25,17 +25,19 @@ StackBox( Box(style: boxStyle), Box(style: BoxStyler().color(Colors.grey.shade300).height(50).width(100)), Box( - style: BoxStyler().color(Colors.black) + style: BoxStyler() + .color(Colors.black) .height(15) .width(100) - .wrap(.new().align(alignment: .center)), + .wrap(.align(alignment: .center)), ), Box( - style: BoxStyler().color(Colors.grey.shade100) + style: BoxStyler() + .color(Colors.grey.shade100) .height(100) .width(100) .border(.color(Colors.black).width(20)) - .wrap(.new().scale(0.50, 0.50)), + .wrap(.scale(x: 0.50, y: 0.50)), ), ], ) diff --git a/src/content/documentation/mix/widgets/stylewidgets.mdx b/src/content/documentation/mix/widgets/stylewidgets.mdx index d9e68900..3e17a6b3 100644 --- a/src/content/documentation/mix/widgets/stylewidgets.mdx +++ b/src/content/documentation/mix/widgets/stylewidgets.mdx @@ -17,13 +17,9 @@ To make styling even more convenient, Mix provides a collection of **prebuilt St As already mentioned, the `Box` widget is like Flutter's `Container`, it can be styled with `BoxStyler`. Learn more [here](/documentation/mix/widgets/box). ```dart -final style = BoxStyler() - .size(100, 100) - .color(Colors.blue); +final style = BoxStyler().size(100, 100).color(Colors.blue); -Box( - style: style, -); +Box(style: style); ``` ### `FlexBox`, `ColumnBox` and `RowBox` @@ -45,23 +41,16 @@ FlexBox( `StyledText` is equivalent to Flutter's `Text` widget, it can be styled with `TextStyler`. Learn more [here](/documentation/mix/widgets/text). ```dart -final style = TextStyler() - .color(Colors.blue) - .fontSize(20); - -StyledText( - 'Hello, World!', - style: style, -) +final style = TextStyler().color(Colors.blue).fontSize(20); + +StyledText('Hello, World!', style: style) ``` ### `StyledIcon` `StyledIcon` is equivalent to Flutter's `Icon` widget, it can be styled with `IconStyler`. Learn more [here](/documentation/mix/widgets/icon). ```dart -final iconStyle = IconStyler() - .color(Colors.blue) - .size(30); +final iconStyle = IconStyler().color(Colors.blue).size(30); StyledIcon(icon: Icons.ac_unit, style: iconStyle); ``` @@ -70,9 +59,7 @@ StyledIcon(icon: Icons.ac_unit, style: iconStyle); `StyledImage` is equivalent to Flutter's `Image` widget, it can be styled with `ImageStyler`. Learn more [here](/documentation/mix/widgets/image). ```dart -final imageStyle = ImageStyler() - .width(200) - .height(150); +final imageStyle = ImageStyler().width(200).height(150); StyledImage( image: NetworkImage('https://example.com/image.png'), @@ -87,7 +74,9 @@ All Styler classes support a **callable pattern** — you can call a styler inst ```dart // BoxStyler creates a Box when called final box = BoxStyler().color(Colors.blue).paddingAll(16); -box(child: Text('Hello')); // Equivalent to Box(style: box, child: Text('Hello')) +box( + child: Text('Hello'), +); // Equivalent to Box(style: box, child: Text('Hello')) // TextStyler creates a StyledText when called final text = TextStyler().fontSize(18).color(Colors.white); @@ -95,7 +84,9 @@ text('Hello'); // Equivalent to StyledText('Hello', style: text) // IconStyler creates a StyledIcon when called final icon = IconStyler().size(24).color(Colors.red); -icon(icon: Icons.star); // Equivalent to StyledIcon(icon: Icons.star, style: icon) +icon( + icon: Icons.star, +); // Equivalent to StyledIcon(icon: Icons.star, style: icon) ``` This is useful for concise widget composition, especially when building reusable components. @@ -114,12 +105,9 @@ Pressable( ``` ```dart - PressableBox( - style: BoxStyler() - .color(Colors.blue) - .padding(.all(16)) - .borderRadius(.circular(8)), - onPress: () => print('PressableBox pressed'), - child: StyledText('Styled Button'), - ); +PressableBox( + style: .color(Colors.blue).padding(.all(16)).borderRadius(.circular(8)), + onPress: () => print('PressableBox pressed'), + child: StyledText('Styled Button'), +); ``` diff --git a/src/content/documentation/mix/widgets/text.mdx b/src/content/documentation/mix/widgets/text.mdx index a80ebb61..5009b498 100644 --- a/src/content/documentation/mix/widgets/text.mdx +++ b/src/content/documentation/mix/widgets/text.mdx @@ -13,10 +13,7 @@ transformations, and responsive variants. You can use `TextStyler` to create styles with a fluent API. Example: ```dart -final style = TextStyler() - .fontSize(24) - .fontWeight(.bold) - .color(Colors.blue); +final style = TextStyler().fontSize(24).fontWeight(.bold).color(Colors.blue); StyledText('Hello Mix', style: style) ``` diff --git a/src/content/documentation/remix/components/accordion.mdx b/src/content/documentation/remix/components/accordion.mdx index 6294cdbe..350080d3 100644 --- a/src/content/documentation/remix/components/accordion.mdx +++ b/src/content/documentation/remix/components/accordion.mdx @@ -66,7 +66,8 @@ class _AccordionExampleState extends State { leadingIcon: Icons.help_outline, style: itemStyle, child: const Text( - 'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.'), + 'Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.', + ), ), RemixAccordion( value: 'accordion3', @@ -74,7 +75,8 @@ class _AccordionExampleState extends State { leadingIcon: Icons.help_outline, style: itemStyle, child: const Text( - 'You can track your order status in the "My Orders" section of your account.'), + 'You can track your order status in the "My Orders" section of your account.', + ), ), ], ), @@ -83,35 +85,23 @@ class _AccordionExampleState extends State { RemixAccordionStyler get itemStyle { return RemixAccordionStyler() - .content(BoxStyler().paddingX(16).paddingTop(8)) - .wrap(.clipRRect(borderRadius: BorderRadiusGeometryMix.circular(8))) + .content(.padding(.horizontal(16).top(8))) + .wrap(.clipRRect(borderRadius: .circular(8))) .paddingX(16) .paddingY(14) .borderRounded(8) .onHovered(.color(Colors.grey.shade100)) .decoration( - BoxDecorationMix( - color: Colors.white, - border: BoxBorderMix.all( - BorderSideMix().color(Colors.grey.shade300).width(1), - ), - borderRadius: BorderRadiusMix.circular(8), - ), + BoxDecorationMix.color(Colors.white) + .border(.all(.color(Colors.grey.shade300).width(1))) + .borderRadius(.circular(8)), ) .trigger( - FlexBoxStyler() - .direction(Axis.horizontal) - .mainAxisAlignment(MainAxisAlignment.spaceBetween) - .spacing(12), - ) - .leadingIcon(IconStyler().color(Colors.grey.shade700).size(20)) - .title( - TextStyler() - .color(Colors.grey.shade900) - .fontWeight(FontWeight.w500) - .fontSize(14), + .direction(.horizontal).mainAxisAlignment(.spaceBetween).spacing(12), ) - .trailingIcon(IconStyler().color(Colors.grey.shade700).size(20)); + .leadingIcon(.color(Colors.grey.shade700).size(20)) + .title(.color(Colors.grey.shade900).fontWeight(.w500).fontSize(14)) + .trailingIcon(.color(Colors.grey.shade700).size(20)); } } ``` @@ -349,7 +339,7 @@ Sets trigger border radius. Sets trigger foreground decoration. -#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})` +#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})` Applies a matrix transform to the trigger. diff --git a/src/content/documentation/remix/components/avatar.mdx b/src/content/documentation/remix/components/avatar.mdx index bddfeaa1..54b2449c 100644 --- a/src/content/documentation/remix/components/avatar.mdx +++ b/src/content/documentation/remix/components/avatar.mdx @@ -34,20 +34,12 @@ class AvatarExample extends StatelessWidget { @override Widget build(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ - RemixAvatar( - label: 'LF', - style: labelStyle, - ), - RemixAvatar( - icon: Icons.person, - style: iconStyle, - ), - RemixAvatar( - style: image, - ), + RemixAvatar(label: 'LF', style: labelStyle), + RemixAvatar(icon: Icons.person, style: iconStyle), + RemixAvatar(style: image), ], ); } @@ -59,7 +51,7 @@ class AvatarExample extends StatelessWidget { .shapeCircle() .wrap(.clipOval()) .foregroundColor(Colors.white) - .labelFontWeight(FontWeight.bold) + .labelFontWeight(.bold) .labelFontSize(15); } @@ -101,13 +93,9 @@ class FortalAvatarExample extends StatelessWidget { spacing: 16, children: [ // Soft variant - Subtle background - FortalAvatar.soft( - label: 'AB', - ), + FortalAvatar.soft(label: 'AB'), // Solid variant - Bold background - FortalAvatar.solid( - label: 'CD', - ), + FortalAvatar.solid(label: 'CD'), ], ); } @@ -361,4 +349,3 @@ Sets icon shadows #### `iconShadow(ShadowMix value)` Sets single icon shadow - diff --git a/src/content/documentation/remix/components/badge.mdx b/src/content/documentation/remix/components/badge.mdx index 78caead0..0f5b292b 100644 --- a/src/content/documentation/remix/components/badge.mdx +++ b/src/content/documentation/remix/components/badge.mdx @@ -34,17 +34,11 @@ class BadgeExample extends StatelessWidget { @override Widget build(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ - RemixBadge( - label: '8', - style: styleLabel, - ), - RemixBadge( - style: styleIcon, - child: const Icon(Icons.camera_alt), - ), + RemixBadge(label: '8', style: styleLabel), + RemixBadge(style: styleIcon, child: const Icon(Icons.camera_alt)), ], ); } @@ -54,14 +48,13 @@ class BadgeExample extends StatelessWidget { .size(24, 24) .wrap(.clipOval()) .label( - TextStyler() - .fontSize(15) - .textAlign(TextAlign.center) - .fontFeatures([const FontFeature.tabularFigures()]), + .fontSize( + 15, + ).textAlign(.center).fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.greenAccent.shade700) .labelColor(Colors.white) - .labelFontWeight(FontWeight.bold) + .labelFontWeight(.bold) .labelFontSize(15); } @@ -70,10 +63,9 @@ class BadgeExample extends StatelessWidget { .size(24, 24) .wrap(.clipOval()) .label( - TextStyler() - .fontSize(15) - .textAlign(TextAlign.center) - .fontFeatures([const FontFeature.tabularFigures()]), + .fontSize( + 15, + ).textAlign(.center).fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.redAccent) .wrap(.iconTheme(color: Colors.white, size: 15)); @@ -99,18 +91,10 @@ class FortalBadgeExample extends StatelessWidget { return Row( spacing: 16, children: [ - FortalBadge.solid( - label: 'Solid', - ), - FortalBadge.soft( - label: 'Soft', - ), - FortalBadge.surface( - label: 'Surface', - ), - FortalBadge.outline( - label: 'Outline', - ), + FortalBadge.solid(label: 'Solid'), + FortalBadge.soft(label: 'Soft'), + FortalBadge.surface(label: 'Surface'), + FortalBadge.outline(label: 'Outline'), ], ); } @@ -266,4 +250,3 @@ Sets label/text decoration color #### `call({Key? key, String? label, Widget? child, RemixBadgeLabelBuilder? labelBuilder})` Creates a `RemixBadge` widget with this style applied. - diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 678de9ba..327ee48e 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -35,7 +35,7 @@ class ButtonExample extends StatelessWidget { Widget build(BuildContext context) { return Center( child: Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ RemixButton( @@ -43,11 +43,7 @@ class ButtonExample extends StatelessWidget { label: 'Turn Off', style: destructiveStyle, ), - RemixButton( - onPressed: () {}, - label: 'Turn on', - style: successStyle, - ), + RemixButton(onPressed: () {}, label: 'Turn on', style: successStyle), ], ), ); @@ -58,50 +54,26 @@ class ButtonExample extends StatelessWidget { .paddingX(16) .paddingY(10) .backgroundColor(const Color(0xFF4D1919)) - .shadow( - BoxShadowMix().color(Colors.redAccent).blurRadius(10).spreadRadius(0), - ) - .label( - TextStyler().uppercase().color(Colors.redAccent), - ) + .shadow(.color(Colors.redAccent).blurRadius(10).spreadRadius(0)) + .label(.uppercase().color(Colors.redAccent)) .shapeBeveledRectangle( - borderRadius: BorderRadiusMix() - .bottomLeft(const Radius.circular(12)) - .topRight(const Radius.circular(12)), - side: BorderSideMix.width(1).color(Colors.redAccent), + borderRadius: .bottomLeft(.circular(12)).topRight(.circular(12)), + side: .width(1).color(Colors.redAccent), ) .wrap(.scale(x: 1, y: 1)) - .onPressed( - .scale(0.90), - ) - .onHovered( - .color(const Color(0xFF732D2D)) - .animate(AnimationConfig.spring(300.ms)), - ) - .onFocused( - .color(const Color(0xFF732D2D)), - ); + .onPressed(.scale(0.90)) + .onHovered(.color(const Color(0xFF732D2D)).animate(.spring(300.ms))) + .onFocused(.color(const Color(0xFF732D2D))); } RemixButtonStyler get successStyle { return destructiveStyle .backgroundColor(const Color.fromARGB(255, 15, 61, 15)) - .label(TextStyler().uppercase().color(Colors.greenAccent)) - .shapeBeveledRectangle( - side: BorderSideMix().color(Colors.greenAccent), - ) - .shadow( - BoxShadowMix() - .color(Colors.greenAccent) - .blurRadius(10) - .spreadRadius(0), - ) - .onHovered( - .color(const Color(0xFF357857)), - ) - .onFocused( - .color(const Color(0xFF357857)), - ); + .label(.uppercase().color(Colors.greenAccent)) + .shapeBeveledRectangle(side: .color(Colors.greenAccent)) + .shadow(.color(Colors.greenAccent).blurRadius(10).spreadRadius(0)) + .onHovered(.color(const Color(0xFF357857))) + .onFocused(.color(const Color(0xFF357857))); } } ``` @@ -125,30 +97,15 @@ class FortalButtonExample extends StatelessWidget { spacing: 16, children: [ // Solid variant - High emphasis, primary actions - FortalButton.solid( - label: 'Solid Button', - onPressed: () {}, - ), + FortalButton.solid(label: 'Solid Button', onPressed: () {}), // Soft variant - Medium emphasis, secondary actions - FortalButton.soft( - label: 'Soft Button', - onPressed: () {}, - ), + FortalButton.soft(label: 'Soft Button', onPressed: () {}), // Surface variant - Subtle emphasis with border - FortalButton.surface( - label: 'Surface Button', - onPressed: () {}, - ), + FortalButton.surface(label: 'Surface Button', onPressed: () {}), // Outline variant - Low emphasis, tertiary actions - FortalButton.outline( - label: 'Outline Button', - onPressed: () {}, - ), + FortalButton.outline(label: 'Outline Button', onPressed: () {}), // Ghost variant - Minimal styling, inline actions - FortalButton.ghost( - label: 'Ghost Button', - onPressed: () {}, - ), + FortalButton.ghost(label: 'Ghost Button', onPressed: () {}), ], ); } @@ -492,4 +449,3 @@ Sets spinner animation to normal (1000ms) #### `spinnerSlow()` Sets spinner animation to slow (1500ms) - diff --git a/src/content/documentation/remix/components/callout.mdx b/src/content/documentation/remix/components/callout.mdx index 86b1b09a..e2c9937f 100644 --- a/src/content/documentation/remix/components/callout.mdx +++ b/src/content/documentation/remix/components/callout.mdx @@ -47,19 +47,17 @@ class CalloutExample extends StatelessWidget { .height(60) .paddingRight(12) .icon( - IconStyler() - .size(24) + .size(24) .color(Colors.white) .wrap( .box( - BoxStyler() - .color(Colors.blue.shade900) - .paddingX(12) - .height(double.infinity), + .color( + Colors.blue.shade900, + ).paddingX(12).height(double.infinity), ), ), ) - .mainAxisSize(MainAxisSize.min); + .mainAxisSize(.min); } } ``` @@ -86,10 +84,7 @@ class FortalCalloutExample extends StatelessWidget { text: 'Surface callout', icon: Icons.info_outline, ), - FortalCallout.soft( - text: 'Soft callout', - icon: Icons.lightbulb_outline, - ), + FortalCallout.soft(text: 'Soft callout', icon: Icons.lightbulb_outline), FortalCallout.outline( text: 'Outline callout', icon: Icons.border_outer, @@ -268,4 +263,3 @@ Sets single icon shadow #### `call({Key? key, String? text, IconData? icon, Widget? child})` Creates a `RemixCallout` widget with this style applied. - diff --git a/src/content/documentation/remix/components/card.mdx b/src/content/documentation/remix/components/card.mdx index 750a0a6d..f7c365a7 100644 --- a/src/content/documentation/remix/components/card.mdx +++ b/src/content/documentation/remix/components/card.mdx @@ -35,10 +35,7 @@ class CardExample extends StatelessWidget { Widget build(BuildContext context) { return RemixCard( style: style, - child: const Text( - 'Card content', - style: TextStyle(color: Colors.white), - ), + child: const Text('Card content', style: TextStyle(color: Colors.white)), ); } @@ -46,9 +43,9 @@ class CardExample extends StatelessWidget { return RemixCardStyler() .size(300, 200) .backgroundColor(const Color(0xFF111827)) - .padding(EdgeInsetsGeometryMix.all(24)) - .borderRadiusAll(const Radius.circular(4)) - .borderAll(color: Colors.grey.shade300); + .padding(.all(24)) + .borderRadius(.circular(4)) + .border(.all(.color(Colors.grey.shade300))); } } ``` @@ -167,4 +164,3 @@ Applies a matrix transformation to the component. #### `call({Key? key, Widget? child})` Creates a `RemixCard` widget with this style applied. - diff --git a/src/content/documentation/remix/components/checkbox.mdx b/src/content/documentation/remix/components/checkbox.mdx index 5cc96089..c48023c5 100644 --- a/src/content/documentation/remix/components/checkbox.mdx +++ b/src/content/documentation/remix/components/checkbox.mdx @@ -54,14 +54,10 @@ class _CheckboxExampleState extends State { RemixCheckboxStyler get style { return RemixCheckboxStyler() .size(24, 24) - .icon(IconStyler().size(20).color(Colors.white)) + .icon(.size(20).color(Colors.white)) .onSelected(.color(Colors.grey.shade900)) - .borderRadiusAll(const Radius.circular(3)) - .border( - BoxBorderMix.all( - BorderSideMix().color(Colors.black87).width(2), - ), - ); + .borderRadius(.circular(3)) + .border(.all(.color(Colors.black87).width(2))); } } ``` @@ -335,4 +331,3 @@ Sets icon shadows #### `iconShadow(ShadowMix value)` Sets single icon shadow - diff --git a/src/content/documentation/remix/components/dialog.mdx b/src/content/documentation/remix/components/dialog.mdx index db709fc2..8dd09b78 100644 --- a/src/content/documentation/remix/components/dialog.mdx +++ b/src/content/documentation/remix/components/dialog.mdx @@ -40,8 +40,7 @@ class DialogExample extends StatelessWidget { builder: (context) => Center( child: FortalDialog( title: 'Revoke access', - description: - 'This application will no longer be accessible.', + description: 'This application will no longer be accessible.', actions: [ FortalButton.ghost( label: 'Cancel', @@ -78,7 +77,8 @@ showRemixAlertDialog( builder: (context) => Center( child: FortalDialog( title: 'Delete project?', - description: 'This permanently deletes the project and all of its data.', + description: + 'This permanently deletes the project and all of its data.', actions: [ FortalButton.ghost( label: 'Cancel', @@ -117,10 +117,7 @@ class FortalDialogExample extends StatelessWidget { label: 'Cancel', onPressed: () => Navigator.pop(context), ), - FortalButton( - label: 'Save', - onPressed: () => Navigator.pop(context), - ), + FortalButton(label: 'Save', onPressed: () => Navigator.pop(context)), ], ); } @@ -144,7 +141,7 @@ Future showRemixDialog({ bool useRootNavigator = true, RouteSettings? routeSettings, Offset? anchorPoint, - Duration transitionDuration = const Duration(milliseconds: 400), + Duration transitionDuration = const .new(milliseconds: 400), RouteTransitionsBuilder? transitionBuilder, bool requestFocus = true, TraversalEdgeBehavior? traversalEdgeBehavior, @@ -164,7 +161,7 @@ Future showRemixAlertDialog({ bool useRootNavigator = true, RouteSettings? routeSettings, Offset? anchorPoint, - Duration transitionDuration = const Duration(milliseconds: 400), + Duration transitionDuration = const .new(milliseconds: 400), RouteTransitionsBuilder? transitionBuilder, FocusNode? initialFocusNode, }) diff --git a/src/content/documentation/remix/components/divider.mdx b/src/content/documentation/remix/components/divider.mdx index 592c23f3..a7c6534e 100644 --- a/src/content/documentation/remix/components/divider.mdx +++ b/src/content/documentation/remix/components/divider.mdx @@ -33,9 +33,7 @@ class DividerExample extends StatelessWidget { @override Widget build(BuildContext context) { - return RemixDivider( - style: style, - ); + return RemixDivider(style: style); } RemixDividerStyler get style { diff --git a/src/content/documentation/remix/components/icon_button.mdx b/src/content/documentation/remix/components/icon_button.mdx index 663fc097..f0158638 100644 --- a/src/content/documentation/remix/components/icon_button.mdx +++ b/src/content/documentation/remix/components/icon_button.mdx @@ -35,7 +35,7 @@ class IconButtonExample extends StatelessWidget { @override Widget build(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ RemixIconButton( @@ -59,13 +59,10 @@ class IconButtonExample extends StatelessWidget { .iconSize(22) .size(40, 40) .backgroundColor(Colors.blueGrey.shade50.withValues(alpha: 0.6)) - .borderAll(color: Colors.blueGrey.shade100, width: 1.5) - .borderRadiusAll(const Radius.circular(8)) + .border(.all(.color(Colors.blueGrey.shade100).width(1.5))) + .borderRadius(.circular(8)) .spinner( - RemixSpinnerStyler() - .size(22) - .strokeWidth(1.3) - .indicatorColor(Colors.blueGrey.shade600), + .size(22).strokeWidth(1.3).indicatorColor(Colors.blueGrey.shade600), ) .onHovered(.color(Colors.blueGrey.shade100.withValues(alpha: 0.4))) .onPressed(.color(Colors.blueGrey.shade100.withValues(alpha: 0.8))); @@ -92,26 +89,11 @@ class FortalIconButtonExample extends StatelessWidget { spacing: 16, runSpacing: 16, children: [ - FortalIconButton.solid( - icon: Icons.add, - onPressed: () {}, - ), - FortalIconButton.soft( - icon: Icons.edit, - onPressed: () {}, - ), - FortalIconButton.surface( - icon: Icons.layers, - onPressed: () {}, - ), - FortalIconButton.outline( - icon: Icons.border_style, - onPressed: () {}, - ), - FortalIconButton.ghost( - icon: Icons.delete, - onPressed: () {}, - ), + FortalIconButton.solid(icon: Icons.add, onPressed: () {}), + FortalIconButton.soft(icon: Icons.edit, onPressed: () {}), + FortalIconButton.surface(icon: Icons.layers, onPressed: () {}), + FortalIconButton.outline(icon: Icons.border_style, onPressed: () {}), + FortalIconButton.ghost(icon: Icons.delete, onPressed: () {}), ], ); } @@ -358,4 +340,3 @@ Sets icon shadows #### `iconShadow(ShadowMix value)` Sets single icon shadow - diff --git a/src/content/documentation/remix/components/menu.mdx b/src/content/documentation/remix/components/menu.mdx index 09060ee4..e4eddd84 100644 --- a/src/content/documentation/remix/components/menu.mdx +++ b/src/content/documentation/remix/components/menu.mdx @@ -62,15 +62,15 @@ class _MenuExampleState extends State { label: 'Logout', style: menuItemStyle.onHovered( .color(Colors.redAccent.withValues(alpha: 0.05)) - .label(TextStyler().color(Colors.redAccent)) - .leadingIcon(IconStyler().color(Colors.redAccent)), + .label(.color(Colors.redAccent)) + .leadingIcon(.color(Colors.redAccent)), ), ), ], positioning: const OverlayPositionConfig( - offset: Offset(0, 8), - followerAnchor: Alignment.topCenter, - targetAnchor: Alignment.bottomCenter, + offset: .new(0, 8), + followerAnchor: .topCenter, + targetAnchor: .bottomCenter, ), style: menuStyle, onSelected: (value) { @@ -83,43 +83,30 @@ class _MenuExampleState extends State { RemixMenuStyler get menuStyle { return RemixMenuStyler() .trigger( - RemixMenuTriggerStyler() - .padding(EdgeInsetsMix.symmetric(horizontal: 14)) + .padding(.symmetric(horizontal: 14)) .decoration( - BoxDecorationMix() - .color(Colors.white) - .borderRadius(BorderRadiusMix.all(const Radius.circular(12))) - .border(BorderMix.all(BorderSideMix(color: Colors.blueGrey.shade100))) + BoxDecorationMix.color(Colors.white) + .borderRadius(.circular(12)) + .border(.all(.color(Colors.blueGrey.shade100))) .boxShadow([ - BoxShadowMix( - color: Colors.blueGrey.withValues(alpha: 0.1), - blurRadius: 3, - offset: const Offset(0, 3), - ), - ]), + .color( + Colors.blueGrey.withValues(alpha: 0.1), + ).blurRadius(3).offset(x: 0, y: 3), + ]), ) - .constraints(BoxConstraintsMix(minHeight: 40)) - .label( - TextStyler() - .color(Colors.blueGrey.shade700) - .fontWeight(FontWeight.w400), - ), + .constraints(.minHeight(40)) + .label(.color(Colors.blueGrey.shade700).fontWeight(.w400)), ) .overlay( - FlexBoxStyler( - padding: EdgeInsetsMix.all(12), - decoration: BoxDecorationMix( - color: Colors.white, - borderRadius: BorderRadiusMix.all(const Radius.circular(12)), - border: BorderMix.all(BorderSideMix(color: Colors.blueGrey.shade100)), - boxShadow: [ - BoxShadowMix( - color: Colors.blueGrey.withValues(alpha: 0.1), - blurRadius: 3, - offset: const Offset(0, 3), - ), - ], - ), + .padding(.all(12)).decoration( + BoxDecorationMix.color(Colors.white) + .borderRadius(.circular(12)) + .border(.all(.color(Colors.blueGrey.shade100))) + .boxShadow([ + .color( + Colors.blueGrey.withValues(alpha: 0.1), + ).blurRadius(3).offset(x: 0, y: 3), + ]), ), ); } @@ -127,10 +114,10 @@ class _MenuExampleState extends State { RemixMenuItemStyler get menuItemStyle { return RemixMenuItemStyler() .paddingAll(6) - .leadingIcon(IconStyler().size(20).color(Colors.blueGrey.shade800)) + .leadingIcon(.size(20).color(Colors.blueGrey.shade800)) .spacing(8) - .borderRadiusAll(const Radius.circular(8)) - .label(TextStyler().color(Colors.blueGrey.shade800)) + .borderRadius(.circular(8)) + .label(.color(Colors.blueGrey.shade800)) .onHovered(.color(Colors.blueGrey.shade50)); } } @@ -152,11 +139,7 @@ class FortalMenuExample extends StatelessWidget { @override Widget build(BuildContext context) { final items = >[ - RemixMenuItem( - value: 'edit', - label: 'Edit', - leadingIcon: Icons.edit, - ), + RemixMenuItem(value: 'edit', label: 'Edit', leadingIcon: Icons.edit), RemixMenuItem( value: 'delete', label: 'Delete', diff --git a/src/content/documentation/remix/components/popover.mdx b/src/content/documentation/remix/components/popover.mdx index f4ee6aa1..6adc55cc 100644 --- a/src/content/documentation/remix/components/popover.mdx +++ b/src/content/documentation/remix/components/popover.mdx @@ -32,14 +32,14 @@ class AccountPopover extends StatelessWidget { return FortalPopover( semanticLabel: 'Show account details', positioning: const OverlayPositionConfig( - targetAnchor: Alignment.bottomCenter, - followerAnchor: Alignment.topCenter, + targetAnchor: .bottomCenter, + followerAnchor: .topCenter, ), popoverChild: const SizedBox( width: 240, child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: .min, + crossAxisAlignment: .start, children: [ Text('Signed in as'), SizedBox(height: 8), @@ -48,7 +48,7 @@ class AccountPopover extends StatelessWidget { ), ), child: const Padding( - padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10), + padding: .symmetric(horizontal: 16, vertical: 10), child: Text('Account'), ), ); @@ -97,9 +97,9 @@ overlay and can apply an additional offset. ```dart const OverlayPositionConfig( - targetAnchor: Alignment.topRight, - followerAnchor: Alignment.bottomRight, - offset: Offset(0, -8), + targetAnchor: .topRight, + followerAnchor: .bottomRight, + offset: .new(0, -8), ) ``` @@ -112,11 +112,10 @@ visual styling. ```dart RemixPopover( - style: RemixPopoverStyler() - .paddingAll(16) - .constraints(BoxConstraintsMix(maxWidth: 320)) + style: .padding(.all(16)) + .constraints(.maxWidth(320)) .backgroundColor(Colors.white) - .borderRadiusAll(12), + .borderRadius(.circular(12)), popoverChild: const Text('Custom popover'), child: const Text('Open'), ) diff --git a/src/content/documentation/remix/components/progress.mdx b/src/content/documentation/remix/components/progress.mdx index 10d6381e..d25e549b 100644 --- a/src/content/documentation/remix/components/progress.mdx +++ b/src/content/documentation/remix/components/progress.mdx @@ -33,15 +33,12 @@ class ProgressExample extends StatelessWidget { @override Widget build(BuildContext context) { - return RemixProgress( - value: 0.3, - style: style, - ); + return RemixProgress(value: 0.3, style: style); } RemixProgressStyler get style { return RemixProgressStyler() - .wrap(.clipRRect(borderRadius: BorderRadiusGeometryMix.circular(10))) + .wrap(.clipRRect(borderRadius: .circular(10))) .trackColor(Colors.grey.shade300) .indicatorColor(Colors.grey.shade900) .width(300) @@ -68,12 +65,8 @@ class FortalProgressExample extends StatelessWidget { return Column( spacing: 16, children: [ - FortalProgress.surface( - value: 0.6, - ), - FortalProgress.soft( - value: 0.4, - ), + FortalProgress.surface(value: 0.6), + FortalProgress.soft(value: 0.4), ], ); } @@ -187,4 +180,3 @@ Applies a matrix transformation to the component. #### `call({Key? key, required double value})` Creates a `RemixProgress` widget with this style applied. - diff --git a/src/content/documentation/remix/components/radio.mdx b/src/content/documentation/remix/components/radio.mdx index 53f44628..35a34bfa 100644 --- a/src/content/documentation/remix/components/radio.mdx +++ b/src/content/documentation/remix/components/radio.mdx @@ -48,13 +48,13 @@ class _RadioExampleState extends State { }); }, child: Column( - crossAxisAlignment: CrossAxisAlignment.center, + crossAxisAlignment: .center, spacing: 16, - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ Row( spacing: 8, - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ RemixRadio(value: 'option1', style: style), const Text('Option 1'), @@ -62,7 +62,7 @@ class _RadioExampleState extends State { ), Row( spacing: 8, - mainAxisSize: MainAxisSize.min, + mainAxisSize: .min, children: [ RemixRadio(value: 'option2', style: style), const Text('Option 2'), @@ -75,41 +75,37 @@ class _RadioExampleState extends State { RemixRadioStyler get style { return RemixRadioStyler() - .borderRadiusAll(const Radius.circular(30)) + .borderRadius(.circular(30)) .size(22, 22) .border( - BoxBorderMix.all( - BorderSideMix() - .color(Colors.blueGrey.shade100) - .width(2.4) - .strokeAlign(BorderSide.strokeAlignInside), + .all( + .color( + Colors.blueGrey.shade100, + ).width(2.4).strokeAlign(BorderSide.strokeAlignInside), ), ) .onHovered( .shadow( - BoxShadowMix() - .color(Colors.blueGrey.shade50.withValues(alpha: 0.7)) - .blurRadius(0) - .spreadRadius(9), + .color( + Colors.blueGrey.shade50.withValues(alpha: 0.7), + ).blurRadius(0).spreadRadius(9), ), ) .onPressed( .border( - BoxBorderMix.all( - BorderSideMix() - .color(Colors.blueGrey.shade100) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), + .all( + .color( + Colors.blueGrey.shade100, + ).width(6).strokeAlign(BorderSide.strokeAlignInside), ), ), ) .onSelected( .border( - BoxBorderMix.all( - BorderSideMix() - .color(Colors.blueAccent.shade700) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), + .all( + .color( + Colors.blueAccent.shade700, + ).width(6).strokeAlign(BorderSide.strokeAlignInside), ), ), ); @@ -146,18 +142,14 @@ class _FortalRadioExampleState extends State { children: [ Row( children: [ - FortalRadio.surface( - value: 'surface', - ), + FortalRadio.surface(value: 'surface'), const SizedBox(width: 8), const Text('Surface'), ], ), Row( children: [ - FortalRadio.soft( - value: 'soft', - ), + FortalRadio.soft(value: 'soft'), const SizedBox(width: 8), const Text('Soft'), ], @@ -304,4 +296,3 @@ Applies a matrix transformation to the component. #### `call({required T value, bool enabled = true, bool autofocus = false, bool toggleable = false, FocusNode? focusNode, MouseCursor? mouseCursor})` Creates a `RemixRadio` widget with this style applied. - diff --git a/src/content/documentation/remix/components/select.mdx b/src/content/documentation/remix/components/select.mdx index 5ac965dd..5e07af49 100644 --- a/src/content/documentation/remix/components/select.mdx +++ b/src/content/documentation/remix/components/select.mdx @@ -73,7 +73,7 @@ class _SelectExampleState extends State { return RemixSelectMenuItemStyler() .iconSize(16) .paddingAll(8) - .borderRadiusAll(const Radius.circular(8)) + .borderRadius(.circular(8)) .onHovered(.color(Colors.blueGrey.shade50)) .onDisabled(.text(.color(Colors.grey.shade300))); } @@ -81,20 +81,18 @@ class _SelectExampleState extends State { RemixSelectStyler get style { return RemixSelectStyler() .trigger( - RemixSelectTriggerStyler() - .color(Colors.transparent) - .borderAll(color: const Color(0xFF898988)) + .color(Colors.transparent) + .border(.all(.color(const Color(0xFF898988)))) .paddingY(10) .paddingX(12) - .borderRadiusAll(const Radius.circular(12)), + .borderRadius(.circular(12)), ) .menuContainer( - FlexBoxStyler() - .width(200) + .width(200) .marginY(5) .paddingAll(6) .color(Colors.white) - .borderRadiusAll(const Radius.circular(12)), + .borderRadius(.circular(12)), ); } } @@ -171,8 +169,8 @@ const RemixSelect({ required List> items, T? selectedValue, OverlayPositionConfig positioning = const OverlayPositionConfig( - targetAnchor: Alignment.bottomCenter, - followerAnchor: Alignment.topCenter, + targetAnchor: .bottomCenter, + followerAnchor: .topCenter, ), ValueChanged? onChanged, VoidCallback? onOpen, @@ -590,4 +588,3 @@ Sets item icon shadows. #### `iconShadow(ShadowMix value)` Sets single item icon shadow. - diff --git a/src/content/documentation/remix/components/slider.mdx b/src/content/documentation/remix/components/slider.mdx index e2428ccb..894f478f 100644 --- a/src/content/documentation/remix/components/slider.mdx +++ b/src/content/documentation/remix/components/slider.mdx @@ -56,14 +56,11 @@ class _SliderExampleState extends State { RemixSliderStyler get style { return RemixSliderStyler() - .thumbSize(const Size(24, 24)) + .thumbSize(const .square(24)) .thumb( - BoxStyler().shapeCircle().shadow( - BoxShadowMix() - .color(Colors.black45) - .blurRadius(4) - .offset(const Offset(0, 2)), - ), + .shape( + .circle(), + ).shadow(.color(Colors.black45).blurRadius(4).offset(x: 0, y: 2)), ) .thumbColor(Colors.black) .thickness(2) @@ -306,4 +303,3 @@ Sets the widget modifier. #### `call({ ... })` Creates a RemixSlider widget with this style applied. - diff --git a/src/content/documentation/remix/components/spinner.mdx b/src/content/documentation/remix/components/spinner.mdx index 3b376c88..5a1bf92b 100644 --- a/src/content/documentation/remix/components/spinner.mdx +++ b/src/content/documentation/remix/components/spinner.mdx @@ -34,7 +34,7 @@ class SpinnerExample extends StatelessWidget { @override Widget build(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 16, children: [ RemixSpinner(style: styleDefault), @@ -159,4 +159,3 @@ Applies widget modifiers such as clipping, opacity, or scaling. #### `call()` Creates a `RemixSpinner` widget with this style applied. - diff --git a/src/content/documentation/remix/components/switch.mdx b/src/content/documentation/remix/components/switch.mdx index d99c264c..34ca92fa 100644 --- a/src/content/documentation/remix/components/switch.mdx +++ b/src/content/documentation/remix/components/switch.mdx @@ -62,20 +62,17 @@ class _SwitchExampleState extends State { .thumbColor(Colors.grey.shade600) .trackColor(Colors.deepPurpleAccent.shade200) .size(65, 30) - .borderRadiusAll(const Radius.circular(40)) - .alignment( - _selected.value ? Alignment.centerRight : Alignment.centerLeft, - ) - .animate(AnimationConfig.easeOut(300.ms)) + .borderRadius(.circular(40)) + .alignment(_selected.value ? .centerRight : .centerLeft) + .animate(.easeOut(300.ms)) .thumb( - BoxStyler() - .color(Colors.white) + .color(Colors.white) .size(40, 30) .borderRounded(40) .scale(0.85) .shadowOnly( color: Colors.black.withValues(alpha: 0.1), - offset: const Offset(2, 4), + offset: const .new(2, 4), blurRadius: 4, spreadRadius: 3, ), @@ -265,4 +262,3 @@ Applies a matrix transformation to the component. #### `call({ ... })` Creates a `RemixSwitch` widget with this style applied. - diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx index 6e1b359e..1d974b8c 100644 --- a/src/content/documentation/remix/components/tabs.mdx +++ b/src/content/documentation/remix/components/tabs.mdx @@ -47,13 +47,13 @@ class _TabsExampleState extends State { selectedTabId: _tab, onChanged: (id) => setState(() => _tab = id), child: Column( - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisSize: .max, + crossAxisAlignment: .stretch, children: [ RemixTabBar( style: tabBarStyle, child: Row( - mainAxisSize: MainAxisSize.max, + mainAxisSize: .max, children: [ RemixTab(tabId: 'tab1', style: tabStyle, label: 'Tab 1'), const SizedBox(width: 8), @@ -87,7 +87,7 @@ class _TabsExampleState extends State { .paddingAll(4) .borderRounded(12) .color(const Color(0xFFF4F6FF)) - .borderAll(color: Colors.indigo.shade100); + .border(.all(.color(Colors.indigo.shade100))); } RemixTabStyler get tabStyle { @@ -97,16 +97,15 @@ class _TabsExampleState extends State { .borderRounded(10) .color(Colors.transparent) .labelFontSize(14) - .labelFontWeight(FontWeight.w600) + .labelFontWeight(.w600) .labelColor(Colors.indigo.shade600) .iconColor(Colors.indigo.shade500) .onHovered( - .color(Colors.indigo.shade50) - .label(.color(Colors.indigo.shade700)), + .color(Colors.indigo.shade50).label(.color(Colors.indigo.shade700)), ) .onSelected( .color(Colors.white) - .borderAll(color: Colors.indigo.shade400, width: 2) + .border(.all(.color(Colors.indigo.shade400).width(2))) .label(.color(Colors.indigo.shade700)) .iconColor(Colors.indigo.shade600), ); @@ -117,7 +116,7 @@ class _TabsExampleState extends State { .paddingAll(20) .borderRounded(14) .color(Colors.white) - .borderAll(color: Colors.indigo.shade100); + .border(.all(.color(Colors.indigo.shade100))); } } ``` @@ -152,14 +151,8 @@ class _FortalTabsExampleState extends State { FortalTabBar( child: Row( children: [ - FortalTab( - tabId: 'tab1', - label: 'Tab 1', - ), - FortalTab( - tabId: 'tab2', - label: 'Tab 2', - ), + FortalTab(tabId: 'tab1', label: 'Tab 1'), + FortalTab(tabId: 'tab2', label: 'Tab 2'), ], ), ), @@ -187,7 +180,7 @@ const RemixTabs({ NakedTabController? controller, String? selectedTabId, ValueChanged? onChanged, - Axis orientation = Axis.horizontal, + Axis orientation = .horizontal, bool enabled = true, VoidCallback? onEscapePressed, }) @@ -319,7 +312,7 @@ Sets tab bar border radius. Sets a foreground decoration on the tab bar. -#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})` +#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})` Applies a matrix transform to the tab bar. @@ -387,7 +380,7 @@ Sets tab item decoration. Sets a foreground decoration on the tab item. -#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})` +#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})` Applies a matrix transform to the tab item. @@ -543,7 +536,7 @@ Sets tab view border radius. Sets a foreground decoration on the tab view. -#### `transform(Matrix4 value, {AlignmentGeometry alignment = Alignment.center})` +#### `transform(Matrix4 value, {AlignmentGeometry alignment = .center})` Applies a matrix transform to the tab view. diff --git a/src/content/documentation/remix/components/textfield.mdx b/src/content/documentation/remix/components/textfield.mdx index 75673f80..3699fc3c 100644 --- a/src/content/documentation/remix/components/textfield.mdx +++ b/src/content/documentation/remix/components/textfield.mdx @@ -56,37 +56,21 @@ class _TextfieldExampleState extends State { return RemixTextFieldStyler() .color(Colors.grey.shade800) .backgroundColor(Colors.white) - .borderRadiusAll(const Radius.circular(8.0)) + .borderRadius(.circular(8)) .height(44) .paddingX(12) .spacing(8) - .label( - TextStyler() - .color(Colors.blueGrey.shade900) - .fontWeight(FontWeight.w500), - ) - .helperText( - TextStyler() - .fontWeight(FontWeight.w300) - .color(Colors.blueGrey.shade600), - ) + .label(.color(Colors.blueGrey.shade900).fontWeight(.w500)) + .helperText(.fontWeight(.w300).color(Colors.blueGrey.shade600)) .hintColor(Colors.blueGrey.shade500) - .shadow( - BoxShadowMix() - .blurRadius(1) - .color(Colors.black12) - .offset(const Offset(0, 1)), - ) - .border( - BoxBorderMix.all(BorderSideMix(color: Colors.grey.shade300)), - ) + .shadow(.blurRadius(1).color(Colors.black12).offset(x: 0, y: 1)) + .border(.all(.color(Colors.grey.shade300))) .onFocused( .border( - BoxBorderMix.all( - BorderSideMix() - .color(Colors.deepPurpleAccent) - .width(3) - .strokeAlign(BorderSide.strokeAlignCenter), + .all( + .color( + Colors.deepPurpleAccent, + ).width(3).strokeAlign(BorderSide.strokeAlignCenter), ), ), ); @@ -642,4 +626,3 @@ Sets label/text word spacing #### `labelDecorationColor(Color value)` Sets label/text decoration color - diff --git a/src/content/documentation/remix/components/toggle.mdx b/src/content/documentation/remix/components/toggle.mdx index 49efd276..f1f0fcad 100644 --- a/src/content/documentation/remix/components/toggle.mdx +++ b/src/content/documentation/remix/components/toggle.mdx @@ -55,15 +55,15 @@ class _ToggleExampleState extends State { .spacing(6) .backgroundColor(Colors.grey.shade100) .foregroundColor(Colors.grey.shade700) - .borderRadiusAll(const Radius.circular(8)) + .borderRadius(.circular(8)) .onHovered(.color(Colors.grey.shade200)) .onPressed(.scale(0.93)) .onSelected( - .color(Colors.deepPurple.shade50) - .label(.color(Colors.deepPurple)) - .iconColor(Colors.deepPurple), + .color( + Colors.deepPurple.shade50, + ).label(.color(Colors.deepPurple)).iconColor(Colors.deepPurple), ) - .animate(AnimationConfig.easeOut(200.ms)); + .animate(.easeOut(200.ms)); } } ``` diff --git a/src/content/documentation/remix/components/toggle_group.mdx b/src/content/documentation/remix/components/toggle_group.mdx index ff43c28d..e9533a99 100644 --- a/src/content/documentation/remix/components/toggle_group.mdx +++ b/src/content/documentation/remix/components/toggle_group.mdx @@ -115,16 +115,15 @@ RemixToggleGroup( RemixToggleGroupItem( value: 'published', label: 'Published', - style: RemixToggleGroupItemStyler().foregroundColor(Colors.green), + style: .label(.color(Colors.green)).icon(.color(Colors.green)), ), ], selectedValue: value, onChanged: onChanged, - style: RemixToggleGroupStyler().item( - RemixToggleGroupItemStyler() - .paddingX(12) - .paddingY(8) - .onSelected(.color(Colors.green.shade50)), + style: .item( + .padding( + .horizontal(12).vertical(8), + ).onSelected(.color(Colors.green.shade50)), ), ) ``` @@ -140,7 +139,7 @@ const RemixToggleGroup({ required T? selectedValue, ValueChanged? onChanged, bool enabled = true, - Axis orientation = Axis.horizontal, + Axis orientation = .horizontal, bool loop = true, String? semanticLabel, bool excludeSemantics = false, diff --git a/src/content/documentation/remix/components/tooltip.mdx b/src/content/documentation/remix/components/tooltip.mdx index c98c8473..3752f37c 100644 --- a/src/content/documentation/remix/components/tooltip.mdx +++ b/src/content/documentation/remix/components/tooltip.mdx @@ -34,7 +34,7 @@ class TooltipExample extends StatelessWidget { @override Widget build(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: .center, spacing: 24, children: [ RemixTooltip( @@ -58,23 +58,21 @@ class TooltipExample extends StatelessWidget { RemixTooltipStyler get styleDefault { return RemixTooltipStyler() - .padding(EdgeInsetsGeometryMix.symmetric(horizontal: 12, vertical: 8)) + .padding(.symmetric(horizontal: 12, vertical: 8)) .backgroundColor(Colors.black87) - .borderRadius(BorderRadiusGeometryMix.all(const Radius.circular(6))) - .wrap(.defaultTextStyle(style: TextStyleMix().color(Colors.white).fontSize(14))); + .borderRadius(.circular(6)) + .wrap(.defaultTextStyle(style: .color(Colors.white).fontSize(14))); } RemixTooltipStyler get styleFast { return styleDefault - .waitDuration(const Duration(milliseconds: 100)) - .showDuration(const Duration(milliseconds: 800)) // touch wait - .dismissDuration(const Duration(milliseconds: 100)); // hover exit + .waitDuration(100.ms) + .showDuration(800.ms) // touch wait + .dismissDuration(100.ms); // hover exit } RemixTooltipStyler get styleSlow { - return styleDefault - .waitDuration(const Duration(seconds: 1)) - .showDuration(const Duration(seconds: 3)); + return styleDefault.waitDuration(1.s).showDuration(3.s); } } @@ -86,12 +84,9 @@ class _TriggerButton extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.circular(8), - ), - child: Text(label, style: const TextStyle(color: Colors.white)), + padding: const .symmetric(horizontal: 16, vertical: 8), + decoration: BoxDecoration(color: Colors.blue, borderRadius: .circular(8)), + child: Text(label, style: const .new(color: Colors.white)), ); } } @@ -263,4 +258,3 @@ Sets the widget modifier. #### `call({Key? key, required Widget tooltipChild, required Widget child, String? tooltipSemantics, OverlayPositionConfig positioning = const OverlayPositionConfig()})` Creates a `RemixTooltip` widget with this style applied. - diff --git a/src/content/documentation/remix/fortal.mdx b/src/content/documentation/remix/fortal.mdx index 19e4d265..bdc2c3ed 100644 --- a/src/content/documentation/remix/fortal.mdx +++ b/src/content/documentation/remix/fortal.mdx @@ -39,10 +39,7 @@ class MyApp extends StatelessWidget { home: FortalScope( child: Scaffold( body: Center( - child: FortalButton.solid( - onPressed: () {}, - label: 'Fortal Button', - ), + child: FortalButton.solid(onPressed: () {}, label: 'Fortal Button'), ), ), ), @@ -68,11 +65,7 @@ FortalButton.ghost(label: 'Save', onPressed: () {}) Use the unnamed constructor when the variant is selected dynamically: ```dart -FortalButton( - variant: selectedVariant, - onPressed: () {}, - label: 'Save', -); +FortalButton(variant: selectedVariant, onPressed: () {}, label: 'Save'); ``` Call the matching `fortal*Styler` directly when you need a custom Remix widget composition or want to extend the preset style. @@ -98,10 +91,10 @@ Each token is a function on the `FortalTokens` class. Call it from any style: ```dart final style = RemixButtonStyler() - .color(FortalTokens.accent9()) - .paddingAll(FortalTokens.space4()) - .borderRadiusAll(FortalTokens.radius3()) - .label(TextStyler().color(FortalTokens.accentContrast())); + .color(FortalTokens.accent9()) + .paddingAll(FortalTokens.space4()) + .borderRadius(.all(FortalTokens.radius3())) + .label(.color(FortalTokens.accentContrast())); ``` The `accent9` step is the "solid" color — the strongest fill suitable for primary actions. The 12-step scale maps numbered steps to specific uses: @@ -125,10 +118,9 @@ This mapping is consistent across every Radix-based design system — if you kno Because every `fortal*Styler` returns a regular Remix style, you can chain additional methods to override or extend any piece of it: ```dart -final style = fortalButtonStyler(variant: .solid) - .borderRadiusAll(const Radius.circular(8)) - .paddingX(32) - .onHovered(.scale(1.05)); +final style = fortalButtonStyler( + variant: .solid, +).borderRadius(.circular(8)).paddingX(32).onHovered(.scale(1.05)); ``` The chain above starts from Fortal's `solid` button, overrides the border radius and horizontal padding, and adds a scale-on-hover modifier. Every other Fortal property — colors, state styling, typography — passes through untouched. @@ -137,10 +129,10 @@ You can also mix Fortal tokens into a completely custom style: ```dart final style = RemixButtonStyler() - .color(FortalTokens.accent9()) - .paddingAll(FortalTokens.space4()) - .borderRadiusAll(FortalTokens.radius3()) - .onHovered(.color(FortalTokens.accent10())); + .color(FortalTokens.accent9()) + .paddingAll(FortalTokens.space4()) + .borderRadius(.all(FortalTokens.radius3())) + .onHovered(.color(FortalTokens.accent10())); ``` This gives you Fortal's token consistency without starting from its component styles. diff --git a/src/content/documentation/remix/index.mdx b/src/content/documentation/remix/index.mdx index ec1b01dc..8febc633 100644 --- a/src/content/documentation/remix/index.mdx +++ b/src/content/documentation/remix/index.mdx @@ -30,12 +30,12 @@ Define a style with a fluent chain, then call it or pass it to a component: ```dart final button = RemixButtonStyler() - .paddingX(16) - .paddingY(10) - .color(Colors.blue) - .borderRadiusAll(const Radius.circular(8)) - .onHovered(.color(Colors.blue.shade700)) - .animate(AnimationConfig.spring(300.ms)); + .paddingX(16) + .paddingY(10) + .color(Colors.blue) + .borderRadius(.circular(8)) + .onHovered(.color(Colors.blue.shade700)) + .animate(.spring(300.ms)); button(label: 'Click me', onPressed: () {}); ``` @@ -94,15 +94,12 @@ class Example extends StatelessWidget { .paddingX(16) .paddingY(10) .color(Colors.blue) - .borderRadiusAll(const Radius.circular(8)) - .label(TextStyler().color(Colors.white)); + .borderRadius(.circular(8)) + .label(.color(Colors.white)); @override Widget build(BuildContext context) { - return _button( - label: 'Click Me', - onPressed: () {}, - ); + return _button(label: 'Click Me', onPressed: () {}); } } ``` @@ -119,12 +116,12 @@ Define how a component should look in hover, pressed, focused, and other states ```dart final style = RemixButtonStyler() - .paddingX(16) - .paddingY(10) - .color(Colors.blue) - .borderRadiusAll(const Radius.circular(8)) - .onHovered(.color(Colors.blue.shade700)) - .onPressed(.scale(0.95)); + .paddingX(16) + .paddingY(10) + .color(Colors.blue) + .borderRadius(.circular(8)) + .onHovered(.color(Colors.blue.shade700)) + .onPressed(.scale(0.95)); ``` Remix tracks the interaction internally, so you don't wire up hover detectors, focus nodes, or gesture recognizers yourself. @@ -135,13 +132,13 @@ Attach animation directly to a style with `.animate()`. State-specific styles in ```dart final style = RemixButtonStyler() - .paddingX(16) - .paddingY(10) - .color(Colors.blue) - .borderRadiusAll(const Radius.circular(8)) - .animate(AnimationConfig.spring(300.ms)) - .onHovered(.color(Colors.blue.shade700)) - .onPressed(.scale(0.95)); + .paddingX(16) + .paddingY(10) + .color(Colors.blue) + .borderRadius(.circular(8)) + .animate(.spring(300.ms)) + .onHovered(.color(Colors.blue.shade700)) + .onPressed(.scale(0.95)); ``` Both the color on hover and the scale on press animate through a single spring curve. @@ -158,15 +155,13 @@ Build a base style once, then extend it for variants: final baseButton = RemixButtonStyler() .paddingX(16) .paddingY(10) - .borderRadiusAll(const Radius.circular(8)); + .borderRadius(.circular(8)); -final primaryButton = baseButton - .color(Colors.blue) - .label(TextStyler().color(Colors.white)); +final primaryButton = baseButton.color(Colors.blue).label(.color(Colors.white)); final destructiveButton = baseButton .color(Colors.red) - .label(TextStyler().color(Colors.white)); + .label(.color(Colors.white)); ``` Each chain call returns a new style, so `baseButton` stays unchanged and every variant is independently mergeable. @@ -176,10 +171,7 @@ Each chain call returns a new style, so `baseButton` stays unchanged and every v Remix gives you the freedom to build any design system from scratch, but you don't have to start there. **Fortal** is a prebuilt set of component styles based on [Radix](https://www.radix-ui.com/), ready to drop in and customize. Reach for Fortal when you want a polished, modern look without defining every token yourself — and extend it when you need something specific. ```dart -FortalButton.solid( - onPressed: () {}, - label: 'Fortal Button', -); +FortalButton.solid(onPressed: () {}, label: 'Fortal Button'); ``` See the [Fortal](/documentation/remix/fortal) page for variants, tokens, and customization. diff --git a/src/content/documentation/remix/styler-api.mdx b/src/content/documentation/remix/styler-api.mdx index 3e8ec3b5..1ac1d10a 100644 --- a/src/content/documentation/remix/styler-api.mdx +++ b/src/content/documentation/remix/styler-api.mdx @@ -47,7 +47,7 @@ variant: final style = RemixCardStyler() .paddingAll(12) .backgroundColor(Colors.white) - .onHovered(.padding(EdgeInsetsGeometryMix.all(16))) + .onHovered(.padding(.all(16))) .onPressed(.color(Colors.grey.shade100)); ``` @@ -80,9 +80,7 @@ or `FlexBox` container. A composite root without one clear visual surface, such as `RemixMenuStyler`, exposes factories for its child fields instead: ```dart -final style = RemixMenuStyler.trigger( - RemixMenuTriggerStyler.color(Colors.black), -); +final style = RemixMenuStyler.trigger(.color(Colors.black)); ``` `RemixSelectStyler` stores its popup container as a `FlexBox`, but intentionally @@ -93,8 +91,13 @@ the root select styler. The upstream forwarded `transform` factory currently accepts `Alignment` rather than the wider `AlignmentGeometry` accepted by the former handwritten helpers. Use a direct child styler when a directional alignment is required, -for example `RemixCardStyler.container(BoxStyler(transform: matrix, -transformAlignment: AlignmentDirectional.centerStart))`. +for example: + +```dart +final style = RemixCardStyler.container( + .new(transform: matrix, transformAlignment: .centerStart), +); +``` ### Variants and selected state From 0626d7e7f406660d4f3395ce274b6603b1ff26a9 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Thu, 16 Jul 2026 21:01:27 -0400 Subject: [PATCH 2/8] Fix animation config examples --- .../documentation/mix/guides/animations.mdx | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/content/documentation/mix/guides/animations.mdx b/src/content/documentation/mix/guides/animations.mdx index e3a2eec6..5630630f 100644 --- a/src/content/documentation/mix/guides/animations.mdx +++ b/src/content/documentation/mix/guides/animations.mdx @@ -39,13 +39,16 @@ All curve configs take a `duration` and an optional `delay`: ```dart // Standard easing — good default for most transitions -.ease(300.ms) - // Starts fast, decelerates to a stop — natural for elements settling into place - .decelerate(200.ms) - // Smooth sinusoidal ease-out - .easeOutSine(400.ms) - // With a delay before starting - .easeInOut(500.ms, delay: 200.ms) +final AnimationConfig ease = .ease(300.ms); + +// Starts fast, decelerates to a stop — natural for elements settling into place +final AnimationConfig decelerate = .decelerate(200.ms); + +// Smooth sinusoidal ease-out +final AnimationConfig easeOutSine = .easeOutSine(400.ms); + +// With a delay before starting +final AnimationConfig easeInOut = .easeInOut(500.ms, delay: 200.ms); ``` Available curves include: `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`, `decelerate`, `bounceIn`, `bounceOut`, `elasticOut`, and many more — each matching a Flutter `Curves` constant. @@ -56,12 +59,20 @@ Springs produce natural, physics-driven motion. Mix offers three ways to configu ```dart // Duration-based spring — set duration and bounciness (0 = no bounce, 1 = very bouncy) -.spring(800.ms, bounce: 0.6) - // Damping-ratio spring — ratio of 1.0 is critically damped (no overshoot), - // below 1.0 oscillates, above 1.0 is overdamped - .springWithDampingRatio(800.ms, ratio: 0.3) - // Raw physics spring — direct control over mass, stiffness, and damping force - .springDescription(mass: 1.0, stiffness: 180.0, damping: 12.0) +final AnimationConfig durationSpring = .spring(800.ms, bounce: 0.6); + +// Damping-ratio spring — ratio of 1.0 is critically damped (no overshoot), +// below 1.0 oscillates, above 1.0 is overdamped +final AnimationConfig dampingRatioSpring = .springWithDampingRatio( + dampingRatio: 0.3, +); + +// Raw physics spring — direct control over mass, stiffness, and damping force +final AnimationConfig physicsSpring = .springDescription( + mass: 1.0, + stiffness: 180.0, + damping: 12.0, +); ``` --- From 4fe9d1b7b23e6c55897287aa63cc6d34f0e339ef Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Thu, 16 Jul 2026 23:13:29 -0400 Subject: [PATCH 3/8] Update docs for ButtonStyler rename --- components/RemixHome.tsx | 6 +++--- docs/remix-landing-page-copy.md | 2 +- .../lib/homepage/hero_classic.dart | 2 +- .../lib/homepage/hero_gradient.dart | 2 +- .../mix_docs_preview/lib/homepage/hero_neon.dart | 2 +- packages/mix_docs_preview/pubspec.lock | 4 ++-- packages/mix_docs_preview/pubspec.yaml | 2 +- .../documentation/remix/components/button.mdx | 10 +++++----- src/content/documentation/remix/fortal.mdx | 4 ++-- src/content/documentation/remix/index.mdx | 14 +++++++------- src/content/documentation/remix/styler-api.mdx | 9 ++++++--- 11 files changed, 30 insertions(+), 27 deletions(-) diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx index 66dfbae1..ad49cfbc 100644 --- a/components/RemixHome.tsx +++ b/components/RemixHome.tsx @@ -65,7 +65,7 @@ const THEMES = [ key: "default", name: "Classic", previewId: "homepage/hero-classic", - code: `final style = RemixButtonStyler() + code: `final style = ButtonStyler() .color(const Color(0xFF00EB03)) .labelColor(const Color(0xFF05040A)) .paddingX(22) @@ -77,7 +77,7 @@ const THEMES = [ key: "gradient", name: "Gradient", previewId: "homepage/hero-gradient", - code: `final style = RemixButtonStyler() + code: `final style = ButtonStyler() .linearGradient( begin: .topLeft, end: .bottomRight, @@ -92,7 +92,7 @@ const THEMES = [ key: "neon", name: "Neon", previewId: "homepage/hero-neon", - code: `final style = RemixButtonStyler() + code: `final style = ButtonStyler() .color(const Color(0xFF0A0014)) .labelColor(const Color(0xFF00F0FF)) .paddingX(24) diff --git a/docs/remix-landing-page-copy.md b/docs/remix-landing-page-copy.md index a545320d..706b94cf 100644 --- a/docs/remix-landing-page-copy.md +++ b/docs/remix-landing-page-copy.md @@ -58,7 +58,7 @@ Accessible, themeable Flutter components with hover, focus, press, keyboard navi Make it yours without starting from scratch. Define a look once with Mix's fluent API, then reuse and adapt it across your whole app — no deep widget trees, no copy-pasted variants that drift out of sync. ```dart -final button = RemixButtonStyler() +final button = ButtonStyler() .paddingX(16) .paddingY(10) .color(Colors.blue) diff --git a/packages/mix_docs_preview/lib/homepage/hero_classic.dart b/packages/mix_docs_preview/lib/homepage/hero_classic.dart index 3c66428c..f0faba81 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_classic.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_classic.dart @@ -24,7 +24,7 @@ class _HeroButton extends StatelessWidget { @override Widget build(BuildContext context) { // #docregion style - final style = RemixButtonStyler() + final style = ButtonStyler() .color(const Color(0xFF00EB03)) .labelColor(const Color(0xFF05040A)) .paddingX(22) diff --git a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart index d3537fc5..cb680a6d 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart @@ -24,7 +24,7 @@ class _HeroButton extends StatelessWidget { @override Widget build(BuildContext context) { // #docregion style - final style = RemixButtonStyler() + final style = ButtonStyler() .linearGradient( begin: .topLeft, end: .bottomRight, diff --git a/packages/mix_docs_preview/lib/homepage/hero_neon.dart b/packages/mix_docs_preview/lib/homepage/hero_neon.dart index fb26fe5a..19f29c28 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_neon.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_neon.dart @@ -24,7 +24,7 @@ class _HeroButton extends StatelessWidget { @override Widget build(BuildContext context) { // #docregion style - final style = RemixButtonStyler() + final style = ButtonStyler() .color(const Color(0xFF0A0014)) .labelColor(const Color(0xFF00F0FF)) .paddingX(24) diff --git a/packages/mix_docs_preview/pubspec.lock b/packages/mix_docs_preview/pubspec.lock index fc6078fc..3f3e4b38 100644 --- a/packages/mix_docs_preview/pubspec.lock +++ b/packages/mix_docs_preview/pubspec.lock @@ -183,8 +183,8 @@ packages: dependency: "direct main" description: path: "packages/remix" - ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca - resolved-ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca + ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e + resolved-ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e url: "https://github.com/btwld/remix.git" source: git version: "1.0.0-beta.1" diff --git a/packages/mix_docs_preview/pubspec.yaml b/packages/mix_docs_preview/pubspec.yaml index a2fee3b1..71a04bfd 100644 --- a/packages/mix_docs_preview/pubspec.yaml +++ b/packages/mix_docs_preview/pubspec.yaml @@ -17,7 +17,7 @@ dependencies: git: url: https://github.com/btwld/remix.git path: packages/remix - ref: fbfc069509ca955a459fcdc6b7de083201cbf2ca + ref: bc95c45d5e5ddd269c83c3ede2c30a900882bf0e dev_dependencies: flutter_test: diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 327ee48e..40b61790 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -49,8 +49,8 @@ class ButtonExample extends StatelessWidget { ); } - RemixButtonStyler get destructiveStyle { - return RemixButtonStyler() + ButtonStyler get destructiveStyle { + return ButtonStyler() .paddingX(16) .paddingY(10) .backgroundColor(const Color(0xFF4D1919)) @@ -66,7 +66,7 @@ class ButtonExample extends StatelessWidget { .onFocused(.color(const Color(0xFF732D2D))); } - RemixButtonStyler get successStyle { + ButtonStyler get successStyle { return destructiveStyle .backgroundColor(const Color.fromARGB(255, 15, 61, 15)) .label(.uppercase().color(Colors.greenAccent)) @@ -140,7 +140,7 @@ const RemixButton({ String? semanticHint, bool excludeSemantics = false, MouseCursor mouseCursor = SystemMouseCursors.click, - RemixButtonStyler style = const RemixButtonStyler.create(), + ButtonStyler style = const ButtonStyler.create(), RemixButtonSpec? styleSpec, }) ``` @@ -150,7 +150,7 @@ const RemixButton({ ## Properties ### Widget Properties -#### `style` → `RemixButtonStyler` +#### `style` → `ButtonStyler` Optional. The style configuration for the button. Customize colors, sizing, spacing, and state-based styling. diff --git a/src/content/documentation/remix/fortal.mdx b/src/content/documentation/remix/fortal.mdx index bdc2c3ed..34ef8b9e 100644 --- a/src/content/documentation/remix/fortal.mdx +++ b/src/content/documentation/remix/fortal.mdx @@ -90,7 +90,7 @@ Fortal is built on a scale-based token system that mirrors Radix's conventions: Each token is a function on the `FortalTokens` class. Call it from any style: ```dart -final style = RemixButtonStyler() +final style = ButtonStyler() .color(FortalTokens.accent9()) .paddingAll(FortalTokens.space4()) .borderRadius(.all(FortalTokens.radius3())) @@ -128,7 +128,7 @@ The chain above starts from Fortal's `solid` button, overrides the border radius You can also mix Fortal tokens into a completely custom style: ```dart -final style = RemixButtonStyler() +final style = ButtonStyler() .color(FortalTokens.accent9()) .paddingAll(FortalTokens.space4()) .borderRadius(.all(FortalTokens.radius3())) diff --git a/src/content/documentation/remix/index.mdx b/src/content/documentation/remix/index.mdx index 8febc633..8f1e163c 100644 --- a/src/content/documentation/remix/index.mdx +++ b/src/content/documentation/remix/index.mdx @@ -29,7 +29,7 @@ Remix pairs headless components (inspired by Naked UI) with Mix's styling system Define a style with a fluent chain, then call it or pass it to a component: ```dart -final button = RemixButtonStyler() +final button = ButtonStyler() .paddingX(16) .paddingY(10) .color(Colors.blue) @@ -81,7 +81,7 @@ import 'package:remix/remix.dart'; ### Your first Remix component -Build a blue button labeled "Click Me". The `RemixButtonStyler` class defines styles with a fluent API, and calling it directly produces the widget: +Build a blue button labeled "Click Me". The `ButtonStyler` class defines styles with a fluent API, and calling it directly produces the widget: ```dart import 'package:flutter/material.dart'; @@ -90,7 +90,7 @@ import 'package:remix/remix.dart'; class Example extends StatelessWidget { const Example({super.key}); - RemixButtonStyler get _button => RemixButtonStyler() + ButtonStyler get _button => ButtonStyler() .paddingX(16) .paddingY(10) .color(Colors.blue) @@ -108,14 +108,14 @@ class Example extends StatelessWidget { ## Styling Components -Remix components are styled through the same fluent, composable API you use everywhere else in Mix. A *component styler* — such as `RemixButtonStyler` — provides small, chainable utilities that combine into the style you need, and respond to interaction state without extra wiring. +Remix components are styled through the same fluent, composable API you use everywhere else in Mix. A *component styler* — such as `ButtonStyler` — provides small, chainable utilities that combine into the style you need, and respond to interaction state without extra wiring. ### Adding Interaction States Define how a component should look in hover, pressed, focused, and other states by chaining state-specific styles onto the base: ```dart -final style = RemixButtonStyler() +final style = ButtonStyler() .paddingX(16) .paddingY(10) .color(Colors.blue) @@ -131,7 +131,7 @@ Remix tracks the interaction internally, so you don't wire up hover detectors, f Attach animation directly to a style with `.animate()`. State-specific styles interpolate smoothly — no controllers, no tweens: ```dart -final style = RemixButtonStyler() +final style = ButtonStyler() .paddingX(16) .paddingY(10) .color(Colors.blue) @@ -152,7 +152,7 @@ Both the color on hover and the scale on press animate through a single spring c Build a base style once, then extend it for variants: ```dart -final baseButton = RemixButtonStyler() +final baseButton = ButtonStyler() .paddingX(16) .paddingY(10) .borderRadius(.circular(8)); diff --git a/src/content/documentation/remix/styler-api.mdx b/src/content/documentation/remix/styler-api.mdx index 1ac1d10a..bac23a7a 100644 --- a/src/content/documentation/remix/styler-api.mdx +++ b/src/content/documentation/remix/styler-api.mdx @@ -7,8 +7,11 @@ Remix stylers expose matching named factories and fluent methods for canonical style operations. This symmetry lets a state variant use Dart's contextual dot shorthand without constructing another styler explicitly: +For buttons, use `ButtonStyler`. `RemixButtonStyler` remains available as a +deprecated compatibility alias during the beta releases. + ```dart -final style = RemixButtonStyler() +final style = ButtonStyler() .color(Colors.blue) .onHovered(.color(Colors.indigo)) .onPressed(.scale(0.97)); @@ -119,7 +122,7 @@ names: | Styler | Canonical generated API | Component-specific helper | | --- | --- | --- | | `RemixTextFieldStyler` | `color` styles the container | `textColor` styles editable text | -| `RemixButtonStyler` | `rotate` transforms the container | `modifierRotate` rotates the complete widget with a modifier | +| `ButtonStyler` | `rotate` transforms the container | `modifierRotate` rotates the complete widget with a modifier | | `RemixCalloutStyler` | `textStyle(TextStyler)` applies the container text style | `contentTextStyle(TextStyleMix)` styles callout content | This keeps contextual shorthand predictable while preserving each specialized @@ -127,7 +130,7 @@ operation without ambiguous overloads. ## Generated and hand-authored code -`Remix*Styler` classes are generated from `@MixableSpec`. Fortal widget wrapper +Component stylers are generated from `@MixableSpec`. Fortal widget wrapper classes are hand-authored source. Either way the public API is identical — the `fortal*Styler` recipes, constructors, fields, and widget behavior are the same whether a class is generated or written by hand, so nothing changes for code From 62d09ab495786a30b5254bbea2a9cc2ec21108e3 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Fri, 17 Jul 2026 04:47:41 -0400 Subject: [PATCH 4/8] Improve example formatting legibility --- .../documentation/mix/ecosystem/mix-lint.mdx | 33 ++++++-- .../documentation/mix/guides/animations.mdx | 5 +- .../mix/guides/common-patterns.mdx | 22 +++-- .../documentation/mix/guides/design-token.mdx | 54 ++++++++++--- .../documentation/mix/guides/directives.mdx | 11 ++- .../mix/guides/dynamic-styling.mdx | 30 ++++--- .../mix/guides/widget-modifiers.mdx | 7 +- .../mix/overview/getting-started.mdx | 4 +- .../mix/overview/introduction.mdx | 8 +- .../documentation/mix/overview/migration.mdx | 19 ++++- .../tutorials/controlling-widget-state.mdx | 8 +- .../mix/tutorials/creating-a-widget.mdx | 52 +++++++++--- .../documentation/mix/tutorials/theming.mdx | 14 +++- src/content/documentation/mix/widgets/box.mdx | 13 ++- .../documentation/mix/widgets/image.mdx | 5 +- .../documentation/mix/widgets/pressable.mdx | 19 +++-- .../documentation/mix/widgets/stack.mdx | 12 ++- .../mix/widgets/stylewidgets.mdx | 29 +++++-- .../documentation/mix/widgets/text.mdx | 5 +- .../remix/components/accordion.mdx | 17 +++- .../documentation/remix/components/avatar.mdx | 22 +++-- .../documentation/remix/components/badge.mdx | 38 ++++++--- .../documentation/remix/components/button.mdx | 81 +++++++++++++++---- .../remix/components/callout.mdx | 11 ++- .../documentation/remix/components/card.mdx | 5 +- .../remix/components/checkbox.mdx | 7 +- .../documentation/remix/components/dialog.mdx | 8 +- .../remix/components/divider.mdx | 4 +- .../remix/components/icon_button.mdx | 29 +++++-- .../documentation/remix/components/menu.mdx | 38 +++++---- .../remix/components/progress.mdx | 13 ++- .../documentation/remix/components/radio.mdx | 32 ++++---- .../documentation/remix/components/slider.mdx | 9 ++- .../documentation/remix/components/switch.mdx | 4 +- .../documentation/remix/components/tabs.mdx | 13 ++- .../remix/components/textfield.mdx | 28 +++++-- .../documentation/remix/components/toggle.mdx | 6 +- .../remix/components/toggle_group.mdx | 8 +- .../remix/components/tooltip.mdx | 15 +++- src/content/documentation/remix/fortal.mdx | 18 +++-- src/content/documentation/remix/index.mdx | 14 +++- 41 files changed, 571 insertions(+), 199 deletions(-) diff --git a/src/content/documentation/mix/ecosystem/mix-lint.mdx b/src/content/documentation/mix/ecosystem/mix-lint.mdx index e20fe20d..5bc66d44 100644 --- a/src/content/documentation/mix/ecosystem/mix-lint.mdx +++ b/src/content/documentation/mix/ecosystem/mix-lint.mdx @@ -97,7 +97,9 @@ final style = BoxStyler() final primary = ColorToken('primary'); final rounded = RadiusToken('rounded'); -final style = BoxStyler().color(primary()).borderRadius(.topLeft(rounded())); +final style = BoxStyler() + .color(primary()) + .borderRadius(.topLeft(rounded())); ``` ### mix_avoid_defining_tokens_within_scope @@ -107,7 +109,12 @@ final style = BoxStyler().color(primary()).borderRadius(.topLeft(rounded())); **Avoid:** ```dart -MixScope(colors: {ColorToken('primary'): Colors.blue}, child: child); +MixScope( + colors: { + ColorToken('primary'): Colors.blue, + }, + child: child, +); ``` **Prefer:** @@ -115,7 +122,12 @@ MixScope(colors: {ColorToken('primary'): Colors.blue}, child: child); ```dart final primary = ColorToken('primary'); -MixScope(colors: {primary: Colors.blue}, child: child); +MixScope( + colors: { + primary: Colors.blue, + }, + child: child, +); ``` ### mix_avoid_empty_variants @@ -150,7 +162,10 @@ The rule counts method invocations in the chain starting from the Styler constru **Prefer:** ```dart -final layout = BoxStyler().padding(.all(8)).margin(.all(4)).alignment(.center); +final layout = BoxStyler() + .padding(.all(8)) + .margin(.all(4)) + .alignment(.center); final appearance = BoxStyler() .color(Colors.blue) @@ -168,7 +183,9 @@ final hovered = BoxStyler() .height(120) .opacity(1.0); -final style = layout.merge(appearance).onHovered(hovered); +final style = layout + .merge(appearance) + .onHovered(hovered); ``` ### mix_variants_last @@ -206,13 +223,15 @@ This rule includes a **quick fix** in supported clients: apply the suggested rew **Avoid:** ```dart -final style = BoxStyler().padding(EdgeInsetsGeometryMix.all(10)); +final style = BoxStyler() + .padding(EdgeInsetsGeometryMix.all(10)); ``` **Prefer:** ```dart -final style = BoxStyler().padding(.all(10)); +final style = BoxStyler() + .padding(.all(10)); ``` ### mix_mixable_styler_has_create diff --git a/src/content/documentation/mix/guides/animations.mdx b/src/content/documentation/mix/guides/animations.mdx index 5630630f..9b280425 100644 --- a/src/content/documentation/mix/guides/animations.mdx +++ b/src/content/documentation/mix/guides/animations.mdx @@ -95,7 +95,10 @@ final box = BoxStyler() .size(_counter * 10, _counter * 10) .animate(.spring(1.s, bounce: 0.6)); -return Pressable(onPress: () => setState(() => _counter += 3), child: box()); +return Pressable( + onPress: () => setState(() => _counter += 3), + child: box(), +); ``` diff --git a/src/content/documentation/mix/guides/common-patterns.mdx b/src/content/documentation/mix/guides/common-patterns.mdx index bbf1b93a..a33aea83 100644 --- a/src/content/documentation/mix/guides/common-patterns.mdx +++ b/src/content/documentation/mix/guides/common-patterns.mdx @@ -50,7 +50,10 @@ Define styles as top-level or class-level constants, then use the `call()` metho ```dart // Declare outside build — reusable across widgets -final title = TextStyler().fontSize(24).fontWeight(.bold).color(Colors.black); +final title = TextStyler() + .fontSize(24) + .fontWeight(.bold) + .color(Colors.black); final card = BoxStyler() .padding(.all(16)) @@ -63,7 +66,9 @@ final card = BoxStyler() // Inside build — call() converts the styler into its widget @override Widget build(BuildContext context) { - return card(child: title('Welcome back')); + return card( + child: title('Welcome back'), + ); } ``` @@ -118,9 +123,16 @@ final cardStyle = BoxStyler() // 3. Provide values via MixScope MixScope( - colors: {$primary: Colors.blue, $surface: Colors.white}, - spaces: {$spacingMd: 16.0}, - radii: {$radiusMd: .circular(8)}, + colors: { + $primary: Colors.blue, + $surface: Colors.white, + }, + spaces: { + $spacingMd: 16.0, + }, + radii: { + $radiusMd: .circular(8), + }, child: MyApp(), ) ``` diff --git a/src/content/documentation/mix/guides/design-token.mdx b/src/content/documentation/mix/guides/design-token.mdx index 096911f8..a60f2b01 100644 --- a/src/content/documentation/mix/guides/design-token.mdx +++ b/src/content/documentation/mix/guides/design-token.mdx @@ -25,10 +25,17 @@ Using a token takes three steps: declare it, provide a value, and reference it i final $primary = ColorToken('primary'); // 2. Provide the token value via MixScope -MixScope(colors: {$primary: Colors.lightBlue}, child: MyApp()); +MixScope( + colors: { + $primary: Colors.lightBlue, + }, + child: MyApp(), +); // 3. Reference the token in a style — call() resolves it from MixScope at build time -final style = BoxStyler().color($primary()).size(100, 100); +final style = BoxStyler() + .color($primary()) + .size(100, 100); ``` ## MixScope @@ -37,9 +44,16 @@ final style = BoxStyler().color($primary()).size(100, 100); ```dart MixScope( - colors: {$primary: Colors.blue, $background: Colors.white}, - spaces: {$spacingMd: 16.0}, - radii: {$radiusMd: .circular(8)}, + colors: { + $primary: Colors.blue, + $background: Colors.white, + }, + spaces: { + $spacingMd: 16.0, + }, + radii: { + $radiusMd: .circular(8), + }, child: MaterialApp(home: MyHomePage()), ); ``` @@ -80,7 +94,9 @@ Mix offers two general ways to reference a token. Both resolve to the same value The simplest approach. Call the token like a function to get a reference that resolves at build time: ```dart -final style = BoxStyler().color($primary()).padding(.all($spacingMd())); +final style = BoxStyler() + .color($primary()) + .padding(.all($spacingMd())); ``` ### Prop.token (for directives) @@ -113,7 +129,9 @@ For example, `TextStyler.style()` expects a Mix text style, so pass the token's ```dart const $heading = TextStyleToken('heading'); -final text = TextStyler().style($heading.mix()).color($primary()); +final text = TextStyler() + .style($heading.mix()) + .color($primary()); ``` ## Theme Switching @@ -124,7 +142,10 @@ Tokens make theme switching straightforward: define two maps and swap them in `M final $background = ColorToken('background'); final $foreground = ColorToken('foreground'); -final lightColors = {$background: Colors.white, $foreground: Colors.black}; +final lightColors = { + $background: Colors.white, + $foreground: Colors.black, +}; final darkColors = { $background: Colors.grey[900]!, @@ -132,7 +153,10 @@ final darkColors = { }; // Swap themes by toggling the map -MixScope(colors: isDark ? darkColors : lightColors, child: MyApp()); +MixScope( + colors: isDark ? darkColors : lightColors, + child: MyApp(), +); ``` Every style referencing `$background` or `$foreground` updates automatically when the map changes. @@ -158,7 +182,9 @@ final $onSurface = ContextToken( ); // Use them like any other token — they track the active ThemeData automatically. -final cardStyle = BoxStyler().color($surface()).borderRadius(.circular(12)); +final cardStyle = BoxStyler() + .color($surface()) + .borderRadius(.circular(12)); Box(style: cardStyle); ``` @@ -177,8 +203,12 @@ A matching entry in `MixScope` still wins, so the resolver acts as a context-der ```dart MixScope( - tokens: {$primary: Colors.green}, // overrides the resolver for this subtree - child: Box(style: BoxStyler().color($primary())), + tokens: { + $primary: Colors.green, + }, // overrides the resolver for this subtree + child: Box( + style: BoxStyler().color($primary()), + ), ); ``` diff --git a/src/content/documentation/mix/guides/directives.mdx b/src/content/documentation/mix/guides/directives.mdx index 86dc93c2..b2fdbeee 100644 --- a/src/content/documentation/mix/guides/directives.mdx +++ b/src/content/documentation/mix/guides/directives.mdx @@ -17,7 +17,10 @@ Directives transform values (text, numbers, colors) when a style is resolved. Un ```dart // The text "hello world" is transformed to "HELLO WORLD" at resolve time -StyledText('hello world', style: TextStyler().uppercase()) +StyledText( + 'hello world', + style: TextStyler().uppercase(), +) ``` --- @@ -143,10 +146,12 @@ Transform colors by adjusting opacity, brightness, saturation, and more. Color d | `.brighten(double)` | Increase brightness | ```dart -final style = BoxStyler().color(Colors.blue.withOpacity(0.5)); +final style = BoxStyler() + .color(Colors.blue.withOpacity(0.5)); // Color directives also work with tokens -final style = BoxStyler().color($primary().withOpacity(0.8)); +final style = BoxStyler() + .color($primary().withOpacity(0.8)); ``` --- diff --git a/src/content/documentation/mix/guides/dynamic-styling.mdx b/src/content/documentation/mix/guides/dynamic-styling.mdx index 1b88925e..dc609e44 100644 --- a/src/content/documentation/mix/guides/dynamic-styling.mdx +++ b/src/content/documentation/mix/guides/dynamic-styling.mdx @@ -39,7 +39,10 @@ final styleA = BoxStyler() .height(100) .width(100) .borderRadius(.circular(10)) - .onHovered(.color(Colors.blue).width(200)); + .onHovered( + .color(Colors.blue) + .width(200), + ); final styleB = styleA.onHovered(.color(Colors.green)); ``` @@ -105,7 +108,9 @@ To override a property set by a variant, you need another variant: ```dart // Correct — use another onHovered to override the hover color -final styleA = BoxStyler().color(Colors.red).onHovered(.color(Colors.blue)); +final styleA = BoxStyler() + .color(Colors.red) + .onHovered(.color(Colors.blue)); final styleB = styleA.onHovered(.color(Colors.green)); // Now hover is green ``` @@ -212,7 +217,10 @@ You can negate any variant — widget states, breakpoints, platforms, and more: // Only apply a shadow when NOT on mobile final style = BoxStyler().onNot( .mobile(), - .shadow(color: Colors.black26, blurRadius: 10), + .shadow( + color: Colors.black26, + blurRadius: 10, + ), ); ``` @@ -221,13 +229,15 @@ final style = BoxStyler().onNot( `onBuilder` gives you full access to `BuildContext` to compute a style at build time. Use it when none of the built-in variants cover your condition: ```dart -final style = BoxStyler().color(Colors.grey).onBuilder((context) { - final hour = DateTime.now().hour; - if (hour >= 6 && hour < 18) { - return BoxStyler().color(Colors.amber); - } - return BoxStyler().color(Colors.indigo); -}); +final style = BoxStyler() + .color(Colors.grey) + .onBuilder((context) { + final hour = DateTime.now().hour; + if (hour >= 6 && hour < 18) { + return BoxStyler().color(Colors.amber); + } + return BoxStyler().color(Colors.indigo); + }); ``` --- diff --git a/src/content/documentation/mix/guides/widget-modifiers.mdx b/src/content/documentation/mix/guides/widget-modifiers.mdx index e60da8ad..e523c0ee 100644 --- a/src/content/documentation/mix/guides/widget-modifiers.mdx +++ b/src/content/documentation/mix/guides/widget-modifiers.mdx @@ -18,7 +18,10 @@ Some visual effects — opacity, clipping, visibility — aren't style propertie Use `.wrap()` with a modifier to add a widget wrapper to your style: ```dart -final style = BoxStyler().color(Colors.red).size(100, 100).wrap(.opacity(0.4)); +final style = BoxStyler() + .color(Colors.red) + .size(100, 100) + .wrap(.opacity(0.4)); ``` @@ -125,7 +128,7 @@ MixScope( ClipRRectModifier, OpacityModifier, ], - colors: {/* ... */}, + colors: { /* ... */ }, child: MyApp(), ); ``` diff --git a/src/content/documentation/mix/overview/getting-started.mdx b/src/content/documentation/mix/overview/getting-started.mdx index fcfdab1a..e832da4d 100644 --- a/src/content/documentation/mix/overview/getting-started.mdx +++ b/src/content/documentation/mix/overview/getting-started.mdx @@ -74,7 +74,9 @@ class Example extends StatelessWidget { Extract styles into top-level variables and reuse them across widgets. You can also pass styles via the `style` parameter using Mix's widget classes like `Box` and `StyledText`, and override individual properties by chaining: ```dart -final primaryCard = BoxStyler().color(Colors.blue).borderRadius(.circular(12)); +final primaryCard = BoxStyler() + .color(Colors.blue) + .borderRadius(.circular(12)); final box = Box(style: primaryCard, child: StyledText('Primary')); diff --git a/src/content/documentation/mix/overview/introduction.mdx b/src/content/documentation/mix/overview/introduction.mdx index c30ddf00..4a5a7604 100644 --- a/src/content/documentation/mix/overview/introduction.mdx +++ b/src/content/documentation/mix/overview/introduction.mdx @@ -85,8 +85,12 @@ final $borderRadius = RadiusToken('borderRadius'); // Provide token values through MixScope MixScope( - colors: {$primaryColor: Colors.blue}, - radii: {$borderRadius: .circular(8)}, + colors: { + $primaryColor: Colors.blue, + }, + radii: { + $borderRadius: .circular(8), + }, child: MyApp(), ); ``` diff --git a/src/content/documentation/mix/overview/migration.mdx b/src/content/documentation/mix/overview/migration.mdx index b142c037..20c2f14c 100644 --- a/src/content/documentation/mix/overview/migration.mdx +++ b/src/content/documentation/mix/overview/migration.mdx @@ -37,7 +37,11 @@ The `$box`, `$text`, `$icon`, `$flex`, `$stack`, `$image`, `$flexbox`, and `$sta ```dart // DEPRECATED - v1.x -final style = Style($box.color.blue(), $box.padding(16), $box.borderRadius(8)); +final style = Style( + $box.color.blue(), + $box.padding(16), + $box.borderRadius(8), +); // v2.0 final style = BoxStyler() @@ -91,12 +95,21 @@ The `$with` namespace is replaced with the `.wrap()` method or shorthand modifie ```dart // v1.x MixTheme( - data: MixThemeData(colors: {primaryColor: Colors.blue}), + data: MixThemeData( + colors: { + primaryColor: Colors.blue, + }, + ), child: MyApp(), ); // v2.0 -MixScope(colors: {primaryColor: Colors.blue}, child: MyApp()); +MixScope( + colors: { + primaryColor: Colors.blue, + }, + child: MyApp(), +); ``` #### Token Usage diff --git a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx index c11f013b..835d4e0a 100644 --- a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx +++ b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx @@ -42,8 +42,8 @@ controller.dragged = true; controller.error = true; // Getters -controller.pressed; // bool -controller.selected; // bool +controller.pressed; // bool +controller.selected; // bool // Generic API controller.update(WidgetState.selected, true); @@ -152,7 +152,9 @@ class _ToggleButtonState extends State { .color(Colors.blue.shade500) .border(.color(Colors.blue.shade600).width(2)) .shadow( - .color(Colors.blue.shade200).blurRadius(10).spreadRadius(2), + .color(Colors.blue.shade200) + .blurRadius(10) + .spreadRadius(2), ), ); diff --git a/src/content/documentation/mix/tutorials/creating-a-widget.mdx b/src/content/documentation/mix/tutorials/creating-a-widget.mdx index 48e2d803..15da4ac0 100644 --- a/src/content/documentation/mix/tutorials/creating-a-widget.mdx +++ b/src/content/documentation/mix/tutorials/creating-a-widget.mdx @@ -286,9 +286,8 @@ enum ButtonVariant { case ButtonVariant.outlined: return ButtonStyler() .container( - .color( - Colors.transparent, - ).border(.color(Colors.blueAccent).width(1.5)), + .color(Colors.transparent) + .border(.color(Colors.blueAccent).width(1.5)), ) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); @@ -299,12 +298,18 @@ enum ButtonVariant { .textColor(Colors.white) .iconColor(Colors.white) .container( - .shadow(.color(Colors.blueAccent.shade700).offset(x: 0, y: 5)), + .shadow( + .color(Colors.blueAccent.shade700) + .offset(x: 0, y: 5), + ), ); case ButtonVariant.link: return ButtonStyler() - .container(.border(.style(.none)).color(Colors.transparent)) + .container( + .border(.style(.none)) + .color(Colors.transparent), + ) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); } @@ -326,7 +331,10 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { .crossAxisAlignment(.center) .mainAxisSize(.min); - final label = TextStyler().style(.fontSize(16).fontWeight(.w500)); + final label = TextStyler().style( + .fontSize(16) + .fontWeight(.w500), + ); final icon = IconStyler().size(18); @@ -335,10 +343,18 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { .label(label) .icon(icon) .merge(variant?.style) - .onPressed(.container(.scale(0.9))) + .onPressed( + .container( + .scale(0.9), + ), + ) .onDisabled( .container(.color(Colors.blueGrey.shade100)) - .label(.style(.color(Colors.blueGrey.shade700))) + .label( + .style( + .color(Colors.blueGrey.shade700), + ), + ) .icon(.color(Colors.blueGrey.shade700)), ) .merge(style); @@ -461,7 +477,9 @@ class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return const MaterialApp(home: ButtonExampleScreen()); + return const MaterialApp( + home: ButtonExampleScreen(), + ); } } @@ -473,14 +491,20 @@ class ButtonExampleScreen extends StatelessWidget { final icon = Icons.favorite; return Scaffold( - appBar: AppBar(title: const Text('Button Examples')), + appBar: AppBar( + title: const Text('Button Examples'), + ), body: Padding( padding: const .all(16), child: Column( mainAxisAlignment: .center, crossAxisAlignment: .stretch, children: [ - FilledButton(label: 'Filled Button', icon: icon, onPressed: () {}), + FilledButton( + label: 'Filled Button', + icon: icon, + onPressed: () {}, + ), const SizedBox(height: 10), OutlinedButton( label: 'Outlined Button', @@ -494,7 +518,11 @@ class ButtonExampleScreen extends StatelessWidget { onPressed: () {}, ), const SizedBox(height: 10), - LinkButton(label: 'Link Button', icon: icon, onPressed: () {}), + LinkButton( + label: 'Link Button', + icon: icon, + onPressed: () {}, + ), const SizedBox(height: 20), const Text( 'Disabled State:', diff --git a/src/content/documentation/mix/tutorials/theming.mdx b/src/content/documentation/mix/tutorials/theming.mdx index 7ce905d6..27a26252 100644 --- a/src/content/documentation/mix/tutorials/theming.mdx +++ b/src/content/documentation/mix/tutorials/theming.mdx @@ -49,7 +49,9 @@ class MyApp extends StatelessWidget { textStyles: LightBlueTheme.textStyles, radii: LightBlueTheme.radii, spaces: LightBlueTheme.spaces, - child: const MaterialApp(home: ProfilePage()), + child: const MaterialApp( + home: ProfilePage(), + ), ); } } @@ -274,7 +276,11 @@ Optional **`onThemeToggle`** / **`useDarkTheme`** parameters show how to wire a ```dart class ProfilePage extends StatelessWidget { - const ProfilePage({super.key, this.onThemeToggle, this.useDarkTheme = false}); + const ProfilePage({ + super.key, + this.onThemeToggle, + this.useDarkTheme = false, + }); final VoidCallback? onThemeToggle; final bool useDarkTheme; @@ -302,7 +308,9 @@ class ProfilePage extends StatelessWidget { if (onThemeToggle != null) IconButton( tooltip: 'Toggle theme', - icon: Icon(useDarkTheme ? Icons.light_mode : Icons.dark_mode), + icon: Icon( + useDarkTheme ? Icons.light_mode : Icons.dark_mode, + ), onPressed: onThemeToggle, ), ], diff --git a/src/content/documentation/mix/widgets/box.mdx b/src/content/documentation/mix/widgets/box.mdx index de799e12..f41098b2 100644 --- a/src/content/documentation/mix/widgets/box.mdx +++ b/src/content/documentation/mix/widgets/box.mdx @@ -18,9 +18,16 @@ final style = BoxStyler() .color(Colors.blue) .borderRadius(.circular(12)) .padding(.all(16)) - .shadow(.color(Colors.blue.shade200).blurRadius(12).offset(x: 0, y: 4)); - -final label = TextStyler().color(Colors.white).fontSize(18).fontWeight(.w600); + .shadow( + .color(Colors.blue.shade200) + .blurRadius(12) + .offset(x: 0, y: 4), + ); + +final label = TextStyler() + .color(Colors.white) + .fontSize(18) + .fontWeight(.w600); Box( style: style, diff --git a/src/content/documentation/mix/widgets/image.mdx b/src/content/documentation/mix/widgets/image.mdx index 727b374a..f8da99e9 100644 --- a/src/content/documentation/mix/widgets/image.mdx +++ b/src/content/documentation/mix/widgets/image.mdx @@ -19,7 +19,10 @@ final style = ImageStyler() .color(Colors.blue.withValues(alpha: 0.3)) .colorBlendMode(.overlay); -StyledImage(image: NetworkImage('https://picsum.photos/160'), style: style) +StyledImage( + image: NetworkImage('https://picsum.photos/160'), + style: style, +) ``` The preview below shows a styled image with dimensions, fit, and color blend. diff --git a/src/content/documentation/mix/widgets/pressable.mdx b/src/content/documentation/mix/widgets/pressable.mdx index 444270aa..f1505691 100644 --- a/src/content/documentation/mix/widgets/pressable.mdx +++ b/src/content/documentation/mix/widgets/pressable.mdx @@ -16,11 +16,18 @@ final buttonStyle = BoxStyler() .color(Colors.blue) .padding(.symmetric(horizontal: 24, vertical: 12)) .borderRadius(.circular(10)) - .shadow(.color(Colors.blue.shade200).blurRadius(8).offset(x: 0, y: 2)) + .shadow( + .color(Colors.blue.shade200) + .blurRadius(8) + .offset(x: 0, y: 2), + ) .onHovered( - .color(Colors.blue.shade700).shadow( - .color(Colors.blue.shade300).blurRadius(12).offset(x: 0, y: 4), - ), + .color(Colors.blue.shade700) + .shadow( + .color(Colors.blue.shade300) + .blurRadius(12) + .offset(x: 0, y: 4), + ), ) .onPressed(.color(Colors.blue.shade900).scale(0.97)) .animate(.ease(150.ms)); @@ -101,7 +108,9 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when ```dart PressableBox( - style: .color(Colors.blue).padding(.all(16)).borderRadius(.circular(8)), + style: .color(Colors.blue) + .padding(.all(16)) + .borderRadius(.circular(8)), onPress: () => print('PressableBox pressed'), child: StyledText('Styled Button'), ); diff --git a/src/content/documentation/mix/widgets/stack.mdx b/src/content/documentation/mix/widgets/stack.mdx index 4cc826f7..9da35a68 100644 --- a/src/content/documentation/mix/widgets/stack.mdx +++ b/src/content/documentation/mix/widgets/stack.mdx @@ -17,13 +17,21 @@ final flexStyle = StackBoxStyler( stackAlignment: .bottomCenter, ); -final boxStyle = BoxStyler().color(Colors.deepOrange).height(100).width(100); +final boxStyle = BoxStyler() + .color(Colors.deepOrange) + .height(100) + .width(100); StackBox( style: flexStyle, children: [ Box(style: boxStyle), - Box(style: BoxStyler().color(Colors.grey.shade300).height(50).width(100)), + Box( + style: BoxStyler() + .color(Colors.grey.shade300) + .height(50) + .width(100), + ), Box( style: BoxStyler() .color(Colors.black) diff --git a/src/content/documentation/mix/widgets/stylewidgets.mdx b/src/content/documentation/mix/widgets/stylewidgets.mdx index 3e17a6b3..e98fa7c5 100644 --- a/src/content/documentation/mix/widgets/stylewidgets.mdx +++ b/src/content/documentation/mix/widgets/stylewidgets.mdx @@ -17,9 +17,13 @@ To make styling even more convenient, Mix provides a collection of **prebuilt St As already mentioned, the `Box` widget is like Flutter's `Container`, it can be styled with `BoxStyler`. Learn more [here](/documentation/mix/widgets/box). ```dart -final style = BoxStyler().size(100, 100).color(Colors.blue); +final style = BoxStyler() + .size(100, 100) + .color(Colors.blue); -Box(style: style); +Box( + style: style, +); ``` ### `FlexBox`, `ColumnBox` and `RowBox` @@ -41,16 +45,23 @@ FlexBox( `StyledText` is equivalent to Flutter's `Text` widget, it can be styled with `TextStyler`. Learn more [here](/documentation/mix/widgets/text). ```dart -final style = TextStyler().color(Colors.blue).fontSize(20); +final style = TextStyler() + .color(Colors.blue) + .fontSize(20); -StyledText('Hello, World!', style: style) +StyledText( + 'Hello, World!', + style: style, +) ``` ### `StyledIcon` `StyledIcon` is equivalent to Flutter's `Icon` widget, it can be styled with `IconStyler`. Learn more [here](/documentation/mix/widgets/icon). ```dart -final iconStyle = IconStyler().color(Colors.blue).size(30); +final iconStyle = IconStyler() + .color(Colors.blue) + .size(30); StyledIcon(icon: Icons.ac_unit, style: iconStyle); ``` @@ -59,7 +70,9 @@ StyledIcon(icon: Icons.ac_unit, style: iconStyle); `StyledImage` is equivalent to Flutter's `Image` widget, it can be styled with `ImageStyler`. Learn more [here](/documentation/mix/widgets/image). ```dart -final imageStyle = ImageStyler().width(200).height(150); +final imageStyle = ImageStyler() + .width(200) + .height(150); StyledImage( image: NetworkImage('https://example.com/image.png'), @@ -106,7 +119,9 @@ Pressable( ```dart PressableBox( - style: .color(Colors.blue).padding(.all(16)).borderRadius(.circular(8)), + style: .color(Colors.blue) + .padding(.all(16)) + .borderRadius(.circular(8)), onPress: () => print('PressableBox pressed'), child: StyledText('Styled Button'), ); diff --git a/src/content/documentation/mix/widgets/text.mdx b/src/content/documentation/mix/widgets/text.mdx index 5009b498..a80ebb61 100644 --- a/src/content/documentation/mix/widgets/text.mdx +++ b/src/content/documentation/mix/widgets/text.mdx @@ -13,7 +13,10 @@ transformations, and responsive variants. You can use `TextStyler` to create styles with a fluent API. Example: ```dart -final style = TextStyler().fontSize(24).fontWeight(.bold).color(Colors.blue); +final style = TextStyler() + .fontSize(24) + .fontWeight(.bold) + .color(Colors.blue); StyledText('Hello Mix', style: style) ``` diff --git a/src/content/documentation/remix/components/accordion.mdx b/src/content/documentation/remix/components/accordion.mdx index 350080d3..c1d5d14d 100644 --- a/src/content/documentation/remix/components/accordion.mdx +++ b/src/content/documentation/remix/components/accordion.mdx @@ -93,14 +93,25 @@ class _AccordionExampleState extends State { .onHovered(.color(Colors.grey.shade100)) .decoration( BoxDecorationMix.color(Colors.white) - .border(.all(.color(Colors.grey.shade300).width(1))) + .border( + .all( + .color(Colors.grey.shade300) + .width(1), + ), + ) .borderRadius(.circular(8)), ) .trigger( - .direction(.horizontal).mainAxisAlignment(.spaceBetween).spacing(12), + .direction(.horizontal) + .mainAxisAlignment(.spaceBetween) + .spacing(12), ) .leadingIcon(.color(Colors.grey.shade700).size(20)) - .title(.color(Colors.grey.shade900).fontWeight(.w500).fontSize(14)) + .title( + .color(Colors.grey.shade900) + .fontWeight(.w500) + .fontSize(14), + ) .trailingIcon(.color(Colors.grey.shade700).size(20)); } } diff --git a/src/content/documentation/remix/components/avatar.mdx b/src/content/documentation/remix/components/avatar.mdx index 54b2449c..47b9f2ac 100644 --- a/src/content/documentation/remix/components/avatar.mdx +++ b/src/content/documentation/remix/components/avatar.mdx @@ -37,9 +37,17 @@ class AvatarExample extends StatelessWidget { mainAxisAlignment: .center, spacing: 16, children: [ - RemixAvatar(label: 'LF', style: labelStyle), - RemixAvatar(icon: Icons.person, style: iconStyle), - RemixAvatar(style: image), + RemixAvatar( + label: 'LF', + style: labelStyle, + ), + RemixAvatar( + icon: Icons.person, + style: iconStyle, + ), + RemixAvatar( + style: image, + ), ], ); } @@ -93,9 +101,13 @@ class FortalAvatarExample extends StatelessWidget { spacing: 16, children: [ // Soft variant - Subtle background - FortalAvatar.soft(label: 'AB'), + FortalAvatar.soft( + label: 'AB', + ), // Solid variant - Bold background - FortalAvatar.solid(label: 'CD'), + FortalAvatar.solid( + label: 'CD', + ), ], ); } diff --git a/src/content/documentation/remix/components/badge.mdx b/src/content/documentation/remix/components/badge.mdx index 0f5b292b..1daf09ba 100644 --- a/src/content/documentation/remix/components/badge.mdx +++ b/src/content/documentation/remix/components/badge.mdx @@ -37,8 +37,14 @@ class BadgeExample extends StatelessWidget { mainAxisAlignment: .center, spacing: 16, children: [ - RemixBadge(label: '8', style: styleLabel), - RemixBadge(style: styleIcon, child: const Icon(Icons.camera_alt)), + RemixBadge( + label: '8', + style: styleLabel, + ), + RemixBadge( + style: styleIcon, + child: const Icon(Icons.camera_alt), + ), ], ); } @@ -48,9 +54,9 @@ class BadgeExample extends StatelessWidget { .size(24, 24) .wrap(.clipOval()) .label( - .fontSize( - 15, - ).textAlign(.center).fontFeatures([const .tabularFigures()]), + .fontSize(15) + .textAlign(.center) + .fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.greenAccent.shade700) .labelColor(Colors.white) @@ -63,9 +69,9 @@ class BadgeExample extends StatelessWidget { .size(24, 24) .wrap(.clipOval()) .label( - .fontSize( - 15, - ).textAlign(.center).fontFeatures([const .tabularFigures()]), + .fontSize(15) + .textAlign(.center) + .fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.redAccent) .wrap(.iconTheme(color: Colors.white, size: 15)); @@ -91,10 +97,18 @@ class FortalBadgeExample extends StatelessWidget { return Row( spacing: 16, children: [ - FortalBadge.solid(label: 'Solid'), - FortalBadge.soft(label: 'Soft'), - FortalBadge.surface(label: 'Surface'), - FortalBadge.outline(label: 'Outline'), + FortalBadge.solid( + label: 'Solid', + ), + FortalBadge.soft( + label: 'Soft', + ), + FortalBadge.surface( + label: 'Surface', + ), + FortalBadge.outline( + label: 'Outline', + ), ], ); } diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 40b61790..2ad4bd36 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -43,7 +43,11 @@ class ButtonExample extends StatelessWidget { label: 'Turn Off', style: destructiveStyle, ), - RemixButton(onPressed: () {}, label: 'Turn on', style: successStyle), + RemixButton( + onPressed: () {}, + label: 'Turn on', + style: successStyle, + ), ], ), ); @@ -54,26 +58,54 @@ class ButtonExample extends StatelessWidget { .paddingX(16) .paddingY(10) .backgroundColor(const Color(0xFF4D1919)) - .shadow(.color(Colors.redAccent).blurRadius(10).spreadRadius(0)) - .label(.uppercase().color(Colors.redAccent)) + .shadow( + .color(Colors.redAccent) + .blurRadius(10) + .spreadRadius(0), + ) + .label( + .uppercase() + .color(Colors.redAccent), + ) .shapeBeveledRectangle( - borderRadius: .bottomLeft(.circular(12)).topRight(.circular(12)), + borderRadius: .bottomLeft(.circular(12)) + .topRight(.circular(12)), side: .width(1).color(Colors.redAccent), ) .wrap(.scale(x: 1, y: 1)) - .onPressed(.scale(0.90)) - .onHovered(.color(const Color(0xFF732D2D)).animate(.spring(300.ms))) - .onFocused(.color(const Color(0xFF732D2D))); + .onPressed( + .scale(0.90), + ) + .onHovered( + .color(const Color(0xFF732D2D)) + .animate(.spring(300.ms)), + ) + .onFocused( + .color(const Color(0xFF732D2D)), + ); } ButtonStyler get successStyle { return destructiveStyle .backgroundColor(const Color.fromARGB(255, 15, 61, 15)) - .label(.uppercase().color(Colors.greenAccent)) - .shapeBeveledRectangle(side: .color(Colors.greenAccent)) - .shadow(.color(Colors.greenAccent).blurRadius(10).spreadRadius(0)) - .onHovered(.color(const Color(0xFF357857))) - .onFocused(.color(const Color(0xFF357857))); + .label( + .uppercase() + .color(Colors.greenAccent), + ) + .shapeBeveledRectangle( + side: .color(Colors.greenAccent), + ) + .shadow( + .color(Colors.greenAccent) + .blurRadius(10) + .spreadRadius(0), + ) + .onHovered( + .color(const Color(0xFF357857)), + ) + .onFocused( + .color(const Color(0xFF357857)), + ); } } ``` @@ -97,15 +129,30 @@ class FortalButtonExample extends StatelessWidget { spacing: 16, children: [ // Solid variant - High emphasis, primary actions - FortalButton.solid(label: 'Solid Button', onPressed: () {}), + FortalButton.solid( + label: 'Solid Button', + onPressed: () {}, + ), // Soft variant - Medium emphasis, secondary actions - FortalButton.soft(label: 'Soft Button', onPressed: () {}), + FortalButton.soft( + label: 'Soft Button', + onPressed: () {}, + ), // Surface variant - Subtle emphasis with border - FortalButton.surface(label: 'Surface Button', onPressed: () {}), + FortalButton.surface( + label: 'Surface Button', + onPressed: () {}, + ), // Outline variant - Low emphasis, tertiary actions - FortalButton.outline(label: 'Outline Button', onPressed: () {}), + FortalButton.outline( + label: 'Outline Button', + onPressed: () {}, + ), // Ghost variant - Minimal styling, inline actions - FortalButton.ghost(label: 'Ghost Button', onPressed: () {}), + FortalButton.ghost( + label: 'Ghost Button', + onPressed: () {}, + ), ], ); } diff --git a/src/content/documentation/remix/components/callout.mdx b/src/content/documentation/remix/components/callout.mdx index e2c9937f..1449d49d 100644 --- a/src/content/documentation/remix/components/callout.mdx +++ b/src/content/documentation/remix/components/callout.mdx @@ -51,9 +51,9 @@ class CalloutExample extends StatelessWidget { .color(Colors.white) .wrap( .box( - .color( - Colors.blue.shade900, - ).paddingX(12).height(double.infinity), + .color(Colors.blue.shade900) + .paddingX(12) + .height(double.infinity), ), ), ) @@ -84,7 +84,10 @@ class FortalCalloutExample extends StatelessWidget { text: 'Surface callout', icon: Icons.info_outline, ), - FortalCallout.soft(text: 'Soft callout', icon: Icons.lightbulb_outline), + FortalCallout.soft( + text: 'Soft callout', + icon: Icons.lightbulb_outline, + ), FortalCallout.outline( text: 'Outline callout', icon: Icons.border_outer, diff --git a/src/content/documentation/remix/components/card.mdx b/src/content/documentation/remix/components/card.mdx index f7c365a7..7efadd76 100644 --- a/src/content/documentation/remix/components/card.mdx +++ b/src/content/documentation/remix/components/card.mdx @@ -35,7 +35,10 @@ class CardExample extends StatelessWidget { Widget build(BuildContext context) { return RemixCard( style: style, - child: const Text('Card content', style: TextStyle(color: Colors.white)), + child: const Text( + 'Card content', + style: TextStyle(color: Colors.white), + ), ); } diff --git a/src/content/documentation/remix/components/checkbox.mdx b/src/content/documentation/remix/components/checkbox.mdx index c48023c5..b40ec704 100644 --- a/src/content/documentation/remix/components/checkbox.mdx +++ b/src/content/documentation/remix/components/checkbox.mdx @@ -57,7 +57,12 @@ class _CheckboxExampleState extends State { .icon(.size(20).color(Colors.white)) .onSelected(.color(Colors.grey.shade900)) .borderRadius(.circular(3)) - .border(.all(.color(Colors.black87).width(2))); + .border( + .all( + .color(Colors.black87) + .width(2), + ), + ); } } ``` diff --git a/src/content/documentation/remix/components/dialog.mdx b/src/content/documentation/remix/components/dialog.mdx index 8dd09b78..a20cab31 100644 --- a/src/content/documentation/remix/components/dialog.mdx +++ b/src/content/documentation/remix/components/dialog.mdx @@ -40,7 +40,8 @@ class DialogExample extends StatelessWidget { builder: (context) => Center( child: FortalDialog( title: 'Revoke access', - description: 'This application will no longer be accessible.', + description: + 'This application will no longer be accessible.', actions: [ FortalButton.ghost( label: 'Cancel', @@ -117,7 +118,10 @@ class FortalDialogExample extends StatelessWidget { label: 'Cancel', onPressed: () => Navigator.pop(context), ), - FortalButton(label: 'Save', onPressed: () => Navigator.pop(context)), + FortalButton( + label: 'Save', + onPressed: () => Navigator.pop(context), + ), ], ); } diff --git a/src/content/documentation/remix/components/divider.mdx b/src/content/documentation/remix/components/divider.mdx index a7c6534e..592c23f3 100644 --- a/src/content/documentation/remix/components/divider.mdx +++ b/src/content/documentation/remix/components/divider.mdx @@ -33,7 +33,9 @@ class DividerExample extends StatelessWidget { @override Widget build(BuildContext context) { - return RemixDivider(style: style); + return RemixDivider( + style: style, + ); } RemixDividerStyler get style { diff --git a/src/content/documentation/remix/components/icon_button.mdx b/src/content/documentation/remix/components/icon_button.mdx index f0158638..ffeca867 100644 --- a/src/content/documentation/remix/components/icon_button.mdx +++ b/src/content/documentation/remix/components/icon_button.mdx @@ -62,7 +62,9 @@ class IconButtonExample extends StatelessWidget { .border(.all(.color(Colors.blueGrey.shade100).width(1.5))) .borderRadius(.circular(8)) .spinner( - .size(22).strokeWidth(1.3).indicatorColor(Colors.blueGrey.shade600), + .size(22) + .strokeWidth(1.3) + .indicatorColor(Colors.blueGrey.shade600), ) .onHovered(.color(Colors.blueGrey.shade100.withValues(alpha: 0.4))) .onPressed(.color(Colors.blueGrey.shade100.withValues(alpha: 0.8))); @@ -89,11 +91,26 @@ class FortalIconButtonExample extends StatelessWidget { spacing: 16, runSpacing: 16, children: [ - FortalIconButton.solid(icon: Icons.add, onPressed: () {}), - FortalIconButton.soft(icon: Icons.edit, onPressed: () {}), - FortalIconButton.surface(icon: Icons.layers, onPressed: () {}), - FortalIconButton.outline(icon: Icons.border_style, onPressed: () {}), - FortalIconButton.ghost(icon: Icons.delete, onPressed: () {}), + FortalIconButton.solid( + icon: Icons.add, + onPressed: () {}, + ), + FortalIconButton.soft( + icon: Icons.edit, + onPressed: () {}, + ), + FortalIconButton.surface( + icon: Icons.layers, + onPressed: () {}, + ), + FortalIconButton.outline( + icon: Icons.border_style, + onPressed: () {}, + ), + FortalIconButton.ghost( + icon: Icons.delete, + onPressed: () {}, + ), ], ); } diff --git a/src/content/documentation/remix/components/menu.mdx b/src/content/documentation/remix/components/menu.mdx index e4eddd84..08c28fb6 100644 --- a/src/content/documentation/remix/components/menu.mdx +++ b/src/content/documentation/remix/components/menu.mdx @@ -89,25 +89,29 @@ class _MenuExampleState extends State { .borderRadius(.circular(12)) .border(.all(.color(Colors.blueGrey.shade100))) .boxShadow([ - .color( - Colors.blueGrey.withValues(alpha: 0.1), - ).blurRadius(3).offset(x: 0, y: 3), + .color(Colors.blueGrey.withValues(alpha: 0.1)) + .blurRadius(3) + .offset(x: 0, y: 3), ]), ) .constraints(.minHeight(40)) - .label(.color(Colors.blueGrey.shade700).fontWeight(.w400)), + .label( + .color(Colors.blueGrey.shade700) + .fontWeight(.w400), + ), ) .overlay( - .padding(.all(12)).decoration( - BoxDecorationMix.color(Colors.white) - .borderRadius(.circular(12)) - .border(.all(.color(Colors.blueGrey.shade100))) - .boxShadow([ - .color( - Colors.blueGrey.withValues(alpha: 0.1), - ).blurRadius(3).offset(x: 0, y: 3), - ]), - ), + .padding(.all(12)) + .decoration( + BoxDecorationMix.color(Colors.white) + .borderRadius(.circular(12)) + .border(.all(.color(Colors.blueGrey.shade100))) + .boxShadow([ + .color(Colors.blueGrey.withValues(alpha: 0.1)) + .blurRadius(3) + .offset(x: 0, y: 3), + ]), + ), ); } @@ -139,7 +143,11 @@ class FortalMenuExample extends StatelessWidget { @override Widget build(BuildContext context) { final items = >[ - RemixMenuItem(value: 'edit', label: 'Edit', leadingIcon: Icons.edit), + RemixMenuItem( + value: 'edit', + label: 'Edit', + leadingIcon: Icons.edit, + ), RemixMenuItem( value: 'delete', label: 'Delete', diff --git a/src/content/documentation/remix/components/progress.mdx b/src/content/documentation/remix/components/progress.mdx index d25e549b..bb403972 100644 --- a/src/content/documentation/remix/components/progress.mdx +++ b/src/content/documentation/remix/components/progress.mdx @@ -33,7 +33,10 @@ class ProgressExample extends StatelessWidget { @override Widget build(BuildContext context) { - return RemixProgress(value: 0.3, style: style); + return RemixProgress( + value: 0.3, + style: style, + ); } RemixProgressStyler get style { @@ -65,8 +68,12 @@ class FortalProgressExample extends StatelessWidget { return Column( spacing: 16, children: [ - FortalProgress.surface(value: 0.6), - FortalProgress.soft(value: 0.4), + FortalProgress.surface( + value: 0.6, + ), + FortalProgress.soft( + value: 0.4, + ), ], ); } diff --git a/src/content/documentation/remix/components/radio.mdx b/src/content/documentation/remix/components/radio.mdx index 35a34bfa..8035725f 100644 --- a/src/content/documentation/remix/components/radio.mdx +++ b/src/content/documentation/remix/components/radio.mdx @@ -79,33 +79,33 @@ class _RadioExampleState extends State { .size(22, 22) .border( .all( - .color( - Colors.blueGrey.shade100, - ).width(2.4).strokeAlign(BorderSide.strokeAlignInside), + .color(Colors.blueGrey.shade100) + .width(2.4) + .strokeAlign(BorderSide.strokeAlignInside), ), ) .onHovered( .shadow( - .color( - Colors.blueGrey.shade50.withValues(alpha: 0.7), - ).blurRadius(0).spreadRadius(9), + .color(Colors.blueGrey.shade50.withValues(alpha: 0.7)) + .blurRadius(0) + .spreadRadius(9), ), ) .onPressed( .border( .all( - .color( - Colors.blueGrey.shade100, - ).width(6).strokeAlign(BorderSide.strokeAlignInside), + .color(Colors.blueGrey.shade100) + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ), ) .onSelected( .border( .all( - .color( - Colors.blueAccent.shade700, - ).width(6).strokeAlign(BorderSide.strokeAlignInside), + .color(Colors.blueAccent.shade700) + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ), ); @@ -142,14 +142,18 @@ class _FortalRadioExampleState extends State { children: [ Row( children: [ - FortalRadio.surface(value: 'surface'), + FortalRadio.surface( + value: 'surface', + ), const SizedBox(width: 8), const Text('Surface'), ], ), Row( children: [ - FortalRadio.soft(value: 'soft'), + FortalRadio.soft( + value: 'soft', + ), const SizedBox(width: 8), const Text('Soft'), ], diff --git a/src/content/documentation/remix/components/slider.mdx b/src/content/documentation/remix/components/slider.mdx index 894f478f..afcc14ba 100644 --- a/src/content/documentation/remix/components/slider.mdx +++ b/src/content/documentation/remix/components/slider.mdx @@ -58,9 +58,12 @@ class _SliderExampleState extends State { return RemixSliderStyler() .thumbSize(const .square(24)) .thumb( - .shape( - .circle(), - ).shadow(.color(Colors.black45).blurRadius(4).offset(x: 0, y: 2)), + .shape(.circle()) + .shadow( + .color(Colors.black45) + .blurRadius(4) + .offset(x: 0, y: 2), + ), ) .thumbColor(Colors.black) .thickness(2) diff --git a/src/content/documentation/remix/components/switch.mdx b/src/content/documentation/remix/components/switch.mdx index 34ca92fa..ddf46117 100644 --- a/src/content/documentation/remix/components/switch.mdx +++ b/src/content/documentation/remix/components/switch.mdx @@ -63,7 +63,9 @@ class _SwitchExampleState extends State { .trackColor(Colors.deepPurpleAccent.shade200) .size(65, 30) .borderRadius(.circular(40)) - .alignment(_selected.value ? .centerRight : .centerLeft) + .alignment( + _selected.value ? .centerRight : .centerLeft, + ) .animate(.easeOut(300.ms)) .thumb( .color(Colors.white) diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx index 1d974b8c..20bb3a2d 100644 --- a/src/content/documentation/remix/components/tabs.mdx +++ b/src/content/documentation/remix/components/tabs.mdx @@ -101,7 +101,8 @@ class _TabsExampleState extends State { .labelColor(Colors.indigo.shade600) .iconColor(Colors.indigo.shade500) .onHovered( - .color(Colors.indigo.shade50).label(.color(Colors.indigo.shade700)), + .color(Colors.indigo.shade50) + .label(.color(Colors.indigo.shade700)), ) .onSelected( .color(Colors.white) @@ -151,8 +152,14 @@ class _FortalTabsExampleState extends State { FortalTabBar( child: Row( children: [ - FortalTab(tabId: 'tab1', label: 'Tab 1'), - FortalTab(tabId: 'tab2', label: 'Tab 2'), + FortalTab( + tabId: 'tab1', + label: 'Tab 1', + ), + FortalTab( + tabId: 'tab2', + label: 'Tab 2', + ), ], ), ), diff --git a/src/content/documentation/remix/components/textfield.mdx b/src/content/documentation/remix/components/textfield.mdx index 3699fc3c..4995b13b 100644 --- a/src/content/documentation/remix/components/textfield.mdx +++ b/src/content/documentation/remix/components/textfield.mdx @@ -60,17 +60,31 @@ class _TextfieldExampleState extends State { .height(44) .paddingX(12) .spacing(8) - .label(.color(Colors.blueGrey.shade900).fontWeight(.w500)) - .helperText(.fontWeight(.w300).color(Colors.blueGrey.shade600)) + .label( + .color(Colors.blueGrey.shade900) + .fontWeight(.w500), + ) + .helperText( + .fontWeight(.w300) + .color(Colors.blueGrey.shade600), + ) .hintColor(Colors.blueGrey.shade500) - .shadow(.blurRadius(1).color(Colors.black12).offset(x: 0, y: 1)) - .border(.all(.color(Colors.grey.shade300))) + .shadow( + .blurRadius(1) + .color(Colors.black12) + .offset(x: 0, y: 1), + ) + .border( + .all( + .color(Colors.grey.shade300), + ), + ) .onFocused( .border( .all( - .color( - Colors.deepPurpleAccent, - ).width(3).strokeAlign(BorderSide.strokeAlignCenter), + .color(Colors.deepPurpleAccent) + .width(3) + .strokeAlign(BorderSide.strokeAlignCenter), ), ), ); diff --git a/src/content/documentation/remix/components/toggle.mdx b/src/content/documentation/remix/components/toggle.mdx index f1f0fcad..f1a53e9c 100644 --- a/src/content/documentation/remix/components/toggle.mdx +++ b/src/content/documentation/remix/components/toggle.mdx @@ -59,9 +59,9 @@ class _ToggleExampleState extends State { .onHovered(.color(Colors.grey.shade200)) .onPressed(.scale(0.93)) .onSelected( - .color( - Colors.deepPurple.shade50, - ).label(.color(Colors.deepPurple)).iconColor(Colors.deepPurple), + .color(Colors.deepPurple.shade50) + .label(.color(Colors.deepPurple)) + .iconColor(Colors.deepPurple), ) .animate(.easeOut(200.ms)); } diff --git a/src/content/documentation/remix/components/toggle_group.mdx b/src/content/documentation/remix/components/toggle_group.mdx index e9533a99..1d75e345 100644 --- a/src/content/documentation/remix/components/toggle_group.mdx +++ b/src/content/documentation/remix/components/toggle_group.mdx @@ -115,15 +115,15 @@ RemixToggleGroup( RemixToggleGroupItem( value: 'published', label: 'Published', - style: .label(.color(Colors.green)).icon(.color(Colors.green)), + style: .label(.color(Colors.green)) + .icon(.color(Colors.green)), ), ], selectedValue: value, onChanged: onChanged, style: .item( - .padding( - .horizontal(12).vertical(8), - ).onSelected(.color(Colors.green.shade50)), + .padding(.horizontal(12).vertical(8)) + .onSelected(.color(Colors.green.shade50)), ), ) ``` diff --git a/src/content/documentation/remix/components/tooltip.mdx b/src/content/documentation/remix/components/tooltip.mdx index 3752f37c..60e4f009 100644 --- a/src/content/documentation/remix/components/tooltip.mdx +++ b/src/content/documentation/remix/components/tooltip.mdx @@ -61,7 +61,11 @@ class TooltipExample extends StatelessWidget { .padding(.symmetric(horizontal: 12, vertical: 8)) .backgroundColor(Colors.black87) .borderRadius(.circular(6)) - .wrap(.defaultTextStyle(style: .color(Colors.white).fontSize(14))); + .wrap( + .defaultTextStyle( + style: .color(Colors.white).fontSize(14), + ), + ); } RemixTooltipStyler get styleFast { @@ -72,7 +76,9 @@ class TooltipExample extends StatelessWidget { } RemixTooltipStyler get styleSlow { - return styleDefault.waitDuration(1.s).showDuration(3.s); + return styleDefault + .waitDuration(1.s) + .showDuration(3.s); } } @@ -85,7 +91,10 @@ class _TriggerButton extends StatelessWidget { Widget build(BuildContext context) { return Container( padding: const .symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration(color: Colors.blue, borderRadius: .circular(8)), + decoration: BoxDecoration( + color: Colors.blue, + borderRadius: .circular(8), + ), child: Text(label, style: const .new(color: Colors.white)), ); } diff --git a/src/content/documentation/remix/fortal.mdx b/src/content/documentation/remix/fortal.mdx index 34ef8b9e..f80206d8 100644 --- a/src/content/documentation/remix/fortal.mdx +++ b/src/content/documentation/remix/fortal.mdx @@ -39,7 +39,10 @@ class MyApp extends StatelessWidget { home: FortalScope( child: Scaffold( body: Center( - child: FortalButton.solid(onPressed: () {}, label: 'Fortal Button'), + child: FortalButton.solid( + onPressed: () {}, + label: 'Fortal Button', + ), ), ), ), @@ -65,7 +68,11 @@ FortalButton.ghost(label: 'Save', onPressed: () {}) Use the unnamed constructor when the variant is selected dynamically: ```dart -FortalButton(variant: selectedVariant, onPressed: () {}, label: 'Save'); +FortalButton( + variant: selectedVariant, + onPressed: () {}, + label: 'Save', +); ``` Call the matching `fortal*Styler` directly when you need a custom Remix widget composition or want to extend the preset style. @@ -118,9 +125,10 @@ This mapping is consistent across every Radix-based design system — if you kno Because every `fortal*Styler` returns a regular Remix style, you can chain additional methods to override or extend any piece of it: ```dart -final style = fortalButtonStyler( - variant: .solid, -).borderRadius(.circular(8)).paddingX(32).onHovered(.scale(1.05)); +final style = fortalButtonStyler(variant: .solid) + .borderRadius(.circular(8)) + .paddingX(32) + .onHovered(.scale(1.05)); ``` The chain above starts from Fortal's `solid` button, overrides the border radius and horizontal padding, and adds a scale-on-hover modifier. Every other Fortal property — colors, state styling, typography — passes through untouched. diff --git a/src/content/documentation/remix/index.mdx b/src/content/documentation/remix/index.mdx index 8f1e163c..761a0c5c 100644 --- a/src/content/documentation/remix/index.mdx +++ b/src/content/documentation/remix/index.mdx @@ -99,7 +99,10 @@ class Example extends StatelessWidget { @override Widget build(BuildContext context) { - return _button(label: 'Click Me', onPressed: () {}); + return _button( + label: 'Click Me', + onPressed: () {}, + ); } } ``` @@ -157,7 +160,9 @@ final baseButton = ButtonStyler() .paddingY(10) .borderRadius(.circular(8)); -final primaryButton = baseButton.color(Colors.blue).label(.color(Colors.white)); +final primaryButton = baseButton + .color(Colors.blue) + .label(.color(Colors.white)); final destructiveButton = baseButton .color(Colors.red) @@ -171,7 +176,10 @@ Each chain call returns a new style, so `baseButton` stays unchanged and every v Remix gives you the freedom to build any design system from scratch, but you don't have to start there. **Fortal** is a prebuilt set of component styles based on [Radix](https://www.radix-ui.com/), ready to drop in and customize. Reach for Fortal when you want a polished, modern look without defining every token yourself — and extend it when you need something specific. ```dart -FortalButton.solid(onPressed: () {}, label: 'Fortal Button'); +FortalButton.solid( + onPressed: () {}, + label: 'Fortal Button', +); ``` See the [Fortal](/documentation/remix/fortal) page for variants, tokens, and customization. From f868cdd8263e1b8b7ae6716b44759951e4501f8f Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Fri, 17 Jul 2026 05:17:07 -0400 Subject: [PATCH 5/8] Align nested MDX chains --- .../mix/guides/dynamic-styling.mdx | 2 +- .../tutorials/controlling-widget-state.mdx | 12 ++--- .../mix/tutorials/creating-a-widget.mdx | 20 +++---- src/content/documentation/mix/widgets/box.mdx | 4 +- .../documentation/mix/widgets/pressable.mdx | 14 ++--- .../remix/components/accordion.mdx | 10 ++-- .../documentation/remix/components/badge.mdx | 8 +-- .../documentation/remix/components/button.mdx | 14 ++--- .../remix/components/callout.mdx | 16 +++--- .../remix/components/checkbox.mdx | 2 +- .../remix/components/icon_button.mdx | 4 +- .../documentation/remix/components/menu.mdx | 54 +++++++++---------- .../documentation/remix/components/radio.mdx | 16 +++--- .../documentation/remix/components/select.mdx | 16 +++--- .../documentation/remix/components/slider.mdx | 14 ++--- .../documentation/remix/components/switch.mdx | 18 +++---- .../documentation/remix/components/tabs.mdx | 8 +-- .../remix/components/textfield.mdx | 12 ++--- .../documentation/remix/components/toggle.mdx | 4 +- .../remix/components/toggle_group.mdx | 2 +- 20 files changed, 125 insertions(+), 125 deletions(-) diff --git a/src/content/documentation/mix/guides/dynamic-styling.mdx b/src/content/documentation/mix/guides/dynamic-styling.mdx index dc609e44..b786cd5b 100644 --- a/src/content/documentation/mix/guides/dynamic-styling.mdx +++ b/src/content/documentation/mix/guides/dynamic-styling.mdx @@ -41,7 +41,7 @@ final styleA = BoxStyler() .borderRadius(.circular(10)) .onHovered( .color(Colors.blue) - .width(200), + .width(200), ); final styleB = styleA.onHovered(.color(Colors.green)); diff --git a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx index 835d4e0a..d0294ef4 100644 --- a/src/content/documentation/mix/tutorials/controlling-widget-state.mdx +++ b/src/content/documentation/mix/tutorials/controlling-widget-state.mdx @@ -150,12 +150,12 @@ class _ToggleButtonState extends State { .variant( ContextVariant.widgetState(.selected), .color(Colors.blue.shade500) - .border(.color(Colors.blue.shade600).width(2)) - .shadow( - .color(Colors.blue.shade200) - .blurRadius(10) - .spreadRadius(2), - ), + .border(.color(Colors.blue.shade600).width(2)) + .shadow( + .color(Colors.blue.shade200) + .blurRadius(10) + .spreadRadius(2), + ), ); final textStyle = TextStyler() diff --git a/src/content/documentation/mix/tutorials/creating-a-widget.mdx b/src/content/documentation/mix/tutorials/creating-a-widget.mdx index 15da4ac0..e79aae1d 100644 --- a/src/content/documentation/mix/tutorials/creating-a-widget.mdx +++ b/src/content/documentation/mix/tutorials/creating-a-widget.mdx @@ -287,7 +287,7 @@ enum ButtonVariant { return ButtonStyler() .container( .color(Colors.transparent) - .border(.color(Colors.blueAccent).width(1.5)), + .border(.color(Colors.blueAccent).width(1.5)), ) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); @@ -300,7 +300,7 @@ enum ButtonVariant { .container( .shadow( .color(Colors.blueAccent.shade700) - .offset(x: 0, y: 5), + .offset(x: 0, y: 5), ), ); @@ -308,7 +308,7 @@ enum ButtonVariant { return ButtonStyler() .container( .border(.style(.none)) - .color(Colors.transparent), + .color(Colors.transparent), ) .textColor(Colors.blueAccent) .iconColor(Colors.blueAccent); @@ -333,7 +333,7 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { final label = TextStyler().style( .fontSize(16) - .fontWeight(.w500), + .fontWeight(.w500), ); final icon = IconStyler().size(18); @@ -350,12 +350,12 @@ ButtonStyler buttonStyle(ButtonStyler? style, ButtonVariant? variant) { ) .onDisabled( .container(.color(Colors.blueGrey.shade100)) - .label( - .style( - .color(Colors.blueGrey.shade700), - ), - ) - .icon(.color(Colors.blueGrey.shade700)), + .label( + .style( + .color(Colors.blueGrey.shade700), + ), + ) + .icon(.color(Colors.blueGrey.shade700)), ) .merge(style); } diff --git a/src/content/documentation/mix/widgets/box.mdx b/src/content/documentation/mix/widgets/box.mdx index f41098b2..85fefbf3 100644 --- a/src/content/documentation/mix/widgets/box.mdx +++ b/src/content/documentation/mix/widgets/box.mdx @@ -20,8 +20,8 @@ final style = BoxStyler() .padding(.all(16)) .shadow( .color(Colors.blue.shade200) - .blurRadius(12) - .offset(x: 0, y: 4), + .blurRadius(12) + .offset(x: 0, y: 4), ); final label = TextStyler() diff --git a/src/content/documentation/mix/widgets/pressable.mdx b/src/content/documentation/mix/widgets/pressable.mdx index f1505691..fa66bb6b 100644 --- a/src/content/documentation/mix/widgets/pressable.mdx +++ b/src/content/documentation/mix/widgets/pressable.mdx @@ -18,16 +18,16 @@ final buttonStyle = BoxStyler() .borderRadius(.circular(10)) .shadow( .color(Colors.blue.shade200) - .blurRadius(8) - .offset(x: 0, y: 2), + .blurRadius(8) + .offset(x: 0, y: 2), ) .onHovered( .color(Colors.blue.shade700) - .shadow( - .color(Colors.blue.shade300) - .blurRadius(12) - .offset(x: 0, y: 4), - ), + .shadow( + .color(Colors.blue.shade300) + .blurRadius(12) + .offset(x: 0, y: 4), + ), ) .onPressed(.color(Colors.blue.shade900).scale(0.97)) .animate(.ease(150.ms)); diff --git a/src/content/documentation/remix/components/accordion.mdx b/src/content/documentation/remix/components/accordion.mdx index c1d5d14d..b9a8e27a 100644 --- a/src/content/documentation/remix/components/accordion.mdx +++ b/src/content/documentation/remix/components/accordion.mdx @@ -96,21 +96,21 @@ class _AccordionExampleState extends State { .border( .all( .color(Colors.grey.shade300) - .width(1), + .width(1), ), ) .borderRadius(.circular(8)), ) .trigger( .direction(.horizontal) - .mainAxisAlignment(.spaceBetween) - .spacing(12), + .mainAxisAlignment(.spaceBetween) + .spacing(12), ) .leadingIcon(.color(Colors.grey.shade700).size(20)) .title( .color(Colors.grey.shade900) - .fontWeight(.w500) - .fontSize(14), + .fontWeight(.w500) + .fontSize(14), ) .trailingIcon(.color(Colors.grey.shade700).size(20)); } diff --git a/src/content/documentation/remix/components/badge.mdx b/src/content/documentation/remix/components/badge.mdx index 1daf09ba..9c55a95e 100644 --- a/src/content/documentation/remix/components/badge.mdx +++ b/src/content/documentation/remix/components/badge.mdx @@ -55,8 +55,8 @@ class BadgeExample extends StatelessWidget { .wrap(.clipOval()) .label( .fontSize(15) - .textAlign(.center) - .fontFeatures([const .tabularFigures()]), + .textAlign(.center) + .fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.greenAccent.shade700) .labelColor(Colors.white) @@ -70,8 +70,8 @@ class BadgeExample extends StatelessWidget { .wrap(.clipOval()) .label( .fontSize(15) - .textAlign(.center) - .fontFeatures([const .tabularFigures()]), + .textAlign(.center) + .fontFeatures([const .tabularFigures()]), ) .foregroundColor(Colors.redAccent) .wrap(.iconTheme(color: Colors.white, size: 15)); diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 2ad4bd36..21afe44b 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -60,12 +60,12 @@ class ButtonExample extends StatelessWidget { .backgroundColor(const Color(0xFF4D1919)) .shadow( .color(Colors.redAccent) - .blurRadius(10) - .spreadRadius(0), + .blurRadius(10) + .spreadRadius(0), ) .label( .uppercase() - .color(Colors.redAccent), + .color(Colors.redAccent), ) .shapeBeveledRectangle( borderRadius: .bottomLeft(.circular(12)) @@ -78,7 +78,7 @@ class ButtonExample extends StatelessWidget { ) .onHovered( .color(const Color(0xFF732D2D)) - .animate(.spring(300.ms)), + .animate(.spring(300.ms)), ) .onFocused( .color(const Color(0xFF732D2D)), @@ -90,15 +90,15 @@ class ButtonExample extends StatelessWidget { .backgroundColor(const Color.fromARGB(255, 15, 61, 15)) .label( .uppercase() - .color(Colors.greenAccent), + .color(Colors.greenAccent), ) .shapeBeveledRectangle( side: .color(Colors.greenAccent), ) .shadow( .color(Colors.greenAccent) - .blurRadius(10) - .spreadRadius(0), + .blurRadius(10) + .spreadRadius(0), ) .onHovered( .color(const Color(0xFF357857)), diff --git a/src/content/documentation/remix/components/callout.mdx b/src/content/documentation/remix/components/callout.mdx index 1449d49d..f69cbe6a 100644 --- a/src/content/documentation/remix/components/callout.mdx +++ b/src/content/documentation/remix/components/callout.mdx @@ -48,14 +48,14 @@ class CalloutExample extends StatelessWidget { .paddingRight(12) .icon( .size(24) - .color(Colors.white) - .wrap( - .box( - .color(Colors.blue.shade900) - .paddingX(12) - .height(double.infinity), - ), - ), + .color(Colors.white) + .wrap( + .box( + .color(Colors.blue.shade900) + .paddingX(12) + .height(double.infinity), + ), + ), ) .mainAxisSize(.min); } diff --git a/src/content/documentation/remix/components/checkbox.mdx b/src/content/documentation/remix/components/checkbox.mdx index b40ec704..66f1ac79 100644 --- a/src/content/documentation/remix/components/checkbox.mdx +++ b/src/content/documentation/remix/components/checkbox.mdx @@ -60,7 +60,7 @@ class _CheckboxExampleState extends State { .border( .all( .color(Colors.black87) - .width(2), + .width(2), ), ); } diff --git a/src/content/documentation/remix/components/icon_button.mdx b/src/content/documentation/remix/components/icon_button.mdx index ffeca867..dfb39b46 100644 --- a/src/content/documentation/remix/components/icon_button.mdx +++ b/src/content/documentation/remix/components/icon_button.mdx @@ -63,8 +63,8 @@ class IconButtonExample extends StatelessWidget { .borderRadius(.circular(8)) .spinner( .size(22) - .strokeWidth(1.3) - .indicatorColor(Colors.blueGrey.shade600), + .strokeWidth(1.3) + .indicatorColor(Colors.blueGrey.shade600), ) .onHovered(.color(Colors.blueGrey.shade100.withValues(alpha: 0.4))) .onPressed(.color(Colors.blueGrey.shade100.withValues(alpha: 0.8))); diff --git a/src/content/documentation/remix/components/menu.mdx b/src/content/documentation/remix/components/menu.mdx index 08c28fb6..ba48d1fb 100644 --- a/src/content/documentation/remix/components/menu.mdx +++ b/src/content/documentation/remix/components/menu.mdx @@ -62,8 +62,8 @@ class _MenuExampleState extends State { label: 'Logout', style: menuItemStyle.onHovered( .color(Colors.redAccent.withValues(alpha: 0.05)) - .label(.color(Colors.redAccent)) - .leadingIcon(.color(Colors.redAccent)), + .label(.color(Colors.redAccent)) + .leadingIcon(.color(Colors.redAccent)), ), ), ], @@ -84,34 +84,34 @@ class _MenuExampleState extends State { return RemixMenuStyler() .trigger( .padding(.symmetric(horizontal: 14)) - .decoration( - BoxDecorationMix.color(Colors.white) - .borderRadius(.circular(12)) - .border(.all(.color(Colors.blueGrey.shade100))) - .boxShadow([ - .color(Colors.blueGrey.withValues(alpha: 0.1)) - .blurRadius(3) - .offset(x: 0, y: 3), - ]), - ) - .constraints(.minHeight(40)) - .label( - .color(Colors.blueGrey.shade700) - .fontWeight(.w400), - ), + .decoration( + BoxDecorationMix.color(Colors.white) + .borderRadius(.circular(12)) + .border(.all(.color(Colors.blueGrey.shade100))) + .boxShadow([ + .color(Colors.blueGrey.withValues(alpha: 0.1)) + .blurRadius(3) + .offset(x: 0, y: 3), + ]), + ) + .constraints(.minHeight(40)) + .label( + .color(Colors.blueGrey.shade700) + .fontWeight(.w400), + ), ) .overlay( .padding(.all(12)) - .decoration( - BoxDecorationMix.color(Colors.white) - .borderRadius(.circular(12)) - .border(.all(.color(Colors.blueGrey.shade100))) - .boxShadow([ - .color(Colors.blueGrey.withValues(alpha: 0.1)) - .blurRadius(3) - .offset(x: 0, y: 3), - ]), - ), + .decoration( + BoxDecorationMix.color(Colors.white) + .borderRadius(.circular(12)) + .border(.all(.color(Colors.blueGrey.shade100))) + .boxShadow([ + .color(Colors.blueGrey.withValues(alpha: 0.1)) + .blurRadius(3) + .offset(x: 0, y: 3), + ]), + ), ); } diff --git a/src/content/documentation/remix/components/radio.mdx b/src/content/documentation/remix/components/radio.mdx index 8035725f..a17aa5dc 100644 --- a/src/content/documentation/remix/components/radio.mdx +++ b/src/content/documentation/remix/components/radio.mdx @@ -80,23 +80,23 @@ class _RadioExampleState extends State { .border( .all( .color(Colors.blueGrey.shade100) - .width(2.4) - .strokeAlign(BorderSide.strokeAlignInside), + .width(2.4) + .strokeAlign(BorderSide.strokeAlignInside), ), ) .onHovered( .shadow( .color(Colors.blueGrey.shade50.withValues(alpha: 0.7)) - .blurRadius(0) - .spreadRadius(9), + .blurRadius(0) + .spreadRadius(9), ), ) .onPressed( .border( .all( .color(Colors.blueGrey.shade100) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ), ) @@ -104,8 +104,8 @@ class _RadioExampleState extends State { .border( .all( .color(Colors.blueAccent.shade700) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ), ); diff --git a/src/content/documentation/remix/components/select.mdx b/src/content/documentation/remix/components/select.mdx index 5e07af49..d00a6cbe 100644 --- a/src/content/documentation/remix/components/select.mdx +++ b/src/content/documentation/remix/components/select.mdx @@ -82,17 +82,17 @@ class _SelectExampleState extends State { return RemixSelectStyler() .trigger( .color(Colors.transparent) - .border(.all(.color(const Color(0xFF898988)))) - .paddingY(10) - .paddingX(12) - .borderRadius(.circular(12)), + .border(.all(.color(const Color(0xFF898988)))) + .paddingY(10) + .paddingX(12) + .borderRadius(.circular(12)), ) .menuContainer( .width(200) - .marginY(5) - .paddingAll(6) - .color(Colors.white) - .borderRadius(.circular(12)), + .marginY(5) + .paddingAll(6) + .color(Colors.white) + .borderRadius(.circular(12)), ); } } diff --git a/src/content/documentation/remix/components/slider.mdx b/src/content/documentation/remix/components/slider.mdx index afcc14ba..88eeac5b 100644 --- a/src/content/documentation/remix/components/slider.mdx +++ b/src/content/documentation/remix/components/slider.mdx @@ -59,11 +59,11 @@ class _SliderExampleState extends State { .thumbSize(const .square(24)) .thumb( .shape(.circle()) - .shadow( - .color(Colors.black45) - .blurRadius(4) - .offset(x: 0, y: 2), - ), + .shadow( + .color(Colors.black45) + .blurRadius(4) + .offset(x: 0, y: 2), + ), ) .thumbColor(Colors.black) .thickness(2) @@ -71,8 +71,8 @@ class _SliderExampleState extends State { .rangeColor(Colors.black) .onDisabled( .trackColor(Colors.grey.shade300) - .rangeColor(Colors.blueGrey) - .thumb(.color(Colors.white.withValues(alpha: 0.6))), + .rangeColor(Colors.blueGrey) + .thumb(.color(Colors.white.withValues(alpha: 0.6))), ); } } diff --git a/src/content/documentation/remix/components/switch.mdx b/src/content/documentation/remix/components/switch.mdx index ddf46117..e44522b4 100644 --- a/src/content/documentation/remix/components/switch.mdx +++ b/src/content/documentation/remix/components/switch.mdx @@ -69,15 +69,15 @@ class _SwitchExampleState extends State { .animate(.easeOut(300.ms)) .thumb( .color(Colors.white) - .size(40, 30) - .borderRounded(40) - .scale(0.85) - .shadowOnly( - color: Colors.black.withValues(alpha: 0.1), - offset: const .new(2, 4), - blurRadius: 4, - spreadRadius: 3, - ), + .size(40, 30) + .borderRounded(40) + .scale(0.85) + .shadowOnly( + color: Colors.black.withValues(alpha: 0.1), + offset: const .new(2, 4), + blurRadius: 4, + spreadRadius: 3, + ), ); } } diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx index 20bb3a2d..39d64816 100644 --- a/src/content/documentation/remix/components/tabs.mdx +++ b/src/content/documentation/remix/components/tabs.mdx @@ -102,13 +102,13 @@ class _TabsExampleState extends State { .iconColor(Colors.indigo.shade500) .onHovered( .color(Colors.indigo.shade50) - .label(.color(Colors.indigo.shade700)), + .label(.color(Colors.indigo.shade700)), ) .onSelected( .color(Colors.white) - .border(.all(.color(Colors.indigo.shade400).width(2))) - .label(.color(Colors.indigo.shade700)) - .iconColor(Colors.indigo.shade600), + .border(.all(.color(Colors.indigo.shade400).width(2))) + .label(.color(Colors.indigo.shade700)) + .iconColor(Colors.indigo.shade600), ); } diff --git a/src/content/documentation/remix/components/textfield.mdx b/src/content/documentation/remix/components/textfield.mdx index 4995b13b..4d530ef4 100644 --- a/src/content/documentation/remix/components/textfield.mdx +++ b/src/content/documentation/remix/components/textfield.mdx @@ -62,17 +62,17 @@ class _TextfieldExampleState extends State { .spacing(8) .label( .color(Colors.blueGrey.shade900) - .fontWeight(.w500), + .fontWeight(.w500), ) .helperText( .fontWeight(.w300) - .color(Colors.blueGrey.shade600), + .color(Colors.blueGrey.shade600), ) .hintColor(Colors.blueGrey.shade500) .shadow( .blurRadius(1) - .color(Colors.black12) - .offset(x: 0, y: 1), + .color(Colors.black12) + .offset(x: 0, y: 1), ) .border( .all( @@ -83,8 +83,8 @@ class _TextfieldExampleState extends State { .border( .all( .color(Colors.deepPurpleAccent) - .width(3) - .strokeAlign(BorderSide.strokeAlignCenter), + .width(3) + .strokeAlign(BorderSide.strokeAlignCenter), ), ), ); diff --git a/src/content/documentation/remix/components/toggle.mdx b/src/content/documentation/remix/components/toggle.mdx index f1a53e9c..697085a9 100644 --- a/src/content/documentation/remix/components/toggle.mdx +++ b/src/content/documentation/remix/components/toggle.mdx @@ -60,8 +60,8 @@ class _ToggleExampleState extends State { .onPressed(.scale(0.93)) .onSelected( .color(Colors.deepPurple.shade50) - .label(.color(Colors.deepPurple)) - .iconColor(Colors.deepPurple), + .label(.color(Colors.deepPurple)) + .iconColor(Colors.deepPurple), ) .animate(.easeOut(200.ms)); } diff --git a/src/content/documentation/remix/components/toggle_group.mdx b/src/content/documentation/remix/components/toggle_group.mdx index 1d75e345..f8f80e91 100644 --- a/src/content/documentation/remix/components/toggle_group.mdx +++ b/src/content/documentation/remix/components/toggle_group.mdx @@ -123,7 +123,7 @@ RemixToggleGroup( onChanged: onChanged, style: .item( .padding(.horizontal(12).vertical(8)) - .onSelected(.color(Colors.green.shade50)), + .onSelected(.color(Colors.green.shade50)), ), ) ``` From 9fce6abf2fa499dd5995ecf0418473b91d2de5b4 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Fri, 17 Jul 2026 05:31:11 -0400 Subject: [PATCH 6/8] Refine Mix example formatting --- components/RemixHome.tsx | 10 ++++++-- .../guides/animations/phase_tap_compress.dart | 5 +++- .../lib/homepage/hero_neon.dart | 4 ++-- .../documentation/mix/guides/animations.mdx | 5 +++- .../mix/guides/common-patterns.mdx | 12 +++++----- .../mix/guides/dynamic-styling.mdx | 6 ++--- .../mix/guides/widget-modifiers.mdx | 4 +++- .../documentation/mix/overview/comparison.mdx | 3 ++- .../mix/overview/getting-started.mdx | 6 ++++- .../documentation/mix/widgets/pressable.mdx | 16 ++++++------- .../mix/widgets/stylewidgets.mdx | 4 ++-- .../remix/components/accordion.mdx | 6 ++--- .../documentation/remix/components/button.mdx | 18 ++++---------- .../documentation/remix/components/card.mdx | 2 +- .../remix/components/checkbox.mdx | 6 ++--- .../remix/components/icon_button.mdx | 2 +- .../documentation/remix/components/menu.mdx | 4 ++-- .../remix/components/popover.mdx | 6 ++--- .../documentation/remix/components/radio.mdx | 24 +++++++------------ .../documentation/remix/components/select.mdx | 2 +- .../documentation/remix/components/switch.mdx | 10 ++++---- .../documentation/remix/components/tabs.mdx | 6 ++--- .../remix/components/textfield.mdx | 14 ++++------- .../remix/components/toggle_group.mdx | 2 +- 24 files changed, 85 insertions(+), 92 deletions(-) diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx index ad49cfbc..a19f7567 100644 --- a/components/RemixHome.tsx +++ b/components/RemixHome.tsx @@ -98,8 +98,14 @@ const THEMES = [ .paddingX(24) .paddingY(11) .borderRadius(.circular(2)) - .border(.all(.color(const Color(0xFF00F0FF)).width(1))) - .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22);`, + .border( + .color(const Color(0xFF00F0FF)) + .width(1), + ) + .shadow( + .color(const Color(0xFFFF00E5)) + .blurRadius(22), + );`, }, ]; diff --git a/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart b/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart index 1a911ac6..1ed3975a 100644 --- a/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart +++ b/packages/mix_docs_preview/lib/guides/animations/phase_tap_compress.dart @@ -48,7 +48,10 @@ class _PhaseTapCompressExampleState extends State { .initial => style.scale(1), .compress => style.scale(0.75).color(Colors.red.shade800), .expanded => - style.scale(1.25).borderRadius(.circular(20)).color(Colors.yellow.shade300), + style + .scale(1.25) + .borderRadius(.circular(20)) + .color(Colors.yellow.shade300), }, configBuilder: (phase) => switch (phase) { .initial => .springWithDampingRatio(800.ms, ratio: 0.3), diff --git a/packages/mix_docs_preview/lib/homepage/hero_neon.dart b/packages/mix_docs_preview/lib/homepage/hero_neon.dart index 19f29c28..dd85f81a 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_neon.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_neon.dart @@ -30,8 +30,8 @@ class _HeroButton extends StatelessWidget { .paddingX(24) .paddingY(11) .borderRadius(.circular(2)) - .border(.all(.color(const Color(0xFF00F0FF)).width(1))) - .shadowOnly(color: const Color(0xFFFF00E5), blurRadius: 22); + .border(.color(const Color(0xFF00F0FF)).width(1)) + .shadow(.color(const Color(0xFFFF00E5)).blurRadius(22)); // #enddocregion style return RemixButton(label: 'GET STARTED', onPressed: () {}, style: style); diff --git a/src/content/documentation/mix/guides/animations.mdx b/src/content/documentation/mix/guides/animations.mdx index 9b280425..9dc4a157 100644 --- a/src/content/documentation/mix/guides/animations.mdx +++ b/src/content/documentation/mix/guides/animations.mdx @@ -150,7 +150,10 @@ final box = BoxStyler() .initial => style.scale(1), .compress => style.scale(0.75).color(Colors.red.shade800), .expanded => - style.scale(1.25).borderRadius(.circular(20)).color(Colors.yellow.shade300), + style + .scale(1.25) + .borderRadius(.circular(20)) + .color(Colors.yellow.shade300), }, configBuilder: (phase) => switch (phase) { .initial => .springWithDampingRatio(800.ms, ratio: 0.3), diff --git a/src/content/documentation/mix/guides/common-patterns.mdx b/src/content/documentation/mix/guides/common-patterns.mdx index a33aea83..d190b298 100644 --- a/src/content/documentation/mix/guides/common-patterns.mdx +++ b/src/content/documentation/mix/guides/common-patterns.mdx @@ -19,12 +19,12 @@ Making a styled container respond to taps, hovers, and focus in plain Flutter me PressableBox( onPress: () => print('tapped'), style: .padding(.horizontal(24).vertical(12)) - .borderRadius(.circular(8)) - .color(Colors.blue) - .onHovered(.color(Colors.blue.shade700)) - .onPressed(.color(Colors.blue.shade900).scale(0.97)) - .onDisabled(.color(Colors.grey.shade300)) - .animate(.ease(150.ms)), + .borderRadius(.circular(8)) + .color(Colors.blue) + .onHovered(.color(Colors.blue.shade700)) + .onPressed(.color(Colors.blue.shade900).scale(0.97)) + .onDisabled(.color(Colors.grey.shade300)) + .animate(.ease(150.ms)), child: StyledText( 'Submit', style: TextStyler() diff --git a/src/content/documentation/mix/guides/dynamic-styling.mdx b/src/content/documentation/mix/guides/dynamic-styling.mdx index b786cd5b..a2ae442c 100644 --- a/src/content/documentation/mix/guides/dynamic-styling.mdx +++ b/src/content/documentation/mix/guides/dynamic-styling.mdx @@ -99,9 +99,7 @@ Context variants are applied **after** all regular style properties. This means final style = BoxStyler() .color(Colors.red) .onHovered(.color(Colors.blue)) - .color( - Colors.green, - ); // This overrides the base color, but NOT the hover color + .color(Colors.green); ``` To override a property set by a variant, you need another variant: @@ -146,7 +144,7 @@ Pressable( PressableBox( onPress: () {}, style: .color(Colors.grey) - .onFocused(.color(Colors.blue)), + .onFocused(.color(Colors.blue)), child: Text('Focus me'), ) ``` diff --git a/src/content/documentation/mix/guides/widget-modifiers.mdx b/src/content/documentation/mix/guides/widget-modifiers.mdx index e523c0ee..329e7c1c 100644 --- a/src/content/documentation/mix/guides/widget-modifiers.mdx +++ b/src/content/documentation/mix/guides/widget-modifiers.mdx @@ -128,7 +128,9 @@ MixScope( ClipRRectModifier, OpacityModifier, ], - colors: { /* ... */ }, + colors: { + // ... + }, child: MyApp(), ); ``` diff --git a/src/content/documentation/mix/overview/comparison.mdx b/src/content/documentation/mix/overview/comparison.mdx index cf623d3f..20f504b5 100644 --- a/src/content/documentation/mix/overview/comparison.mdx +++ b/src/content/documentation/mix/overview/comparison.mdx @@ -36,7 +36,8 @@ class CustomMixWidget extends StatelessWidget { .animate(.easeInOut(100.ms)) .scale(1) .onHovered( - .color(accentColor.withValues(alpha: 0.0)).border(.color(accentColor)), + .color(accentColor.withValues(alpha: 0.0)) + .border(.color(accentColor)), ) .onPressed(.scale(0.96)); diff --git a/src/content/documentation/mix/overview/getting-started.mdx b/src/content/documentation/mix/overview/getting-started.mdx index e832da4d..2b611cb5 100644 --- a/src/content/documentation/mix/overview/getting-started.mdx +++ b/src/content/documentation/mix/overview/getting-started.mdx @@ -56,7 +56,11 @@ class Example extends StatelessWidget { .color(Colors.blue) .alignment(.center) .borderRadius(.circular(12)) - .border(.color(Colors.black).width(1).style(.solid)); + .border( + .color(Colors.black) + .width(1) + .style(.solid), + ); TextStyler get _text => TextStyler().color(Colors.white).fontSize(18); diff --git a/src/content/documentation/mix/widgets/pressable.mdx b/src/content/documentation/mix/widgets/pressable.mdx index fa66bb6b..9c421c58 100644 --- a/src/content/documentation/mix/widgets/pressable.mdx +++ b/src/content/documentation/mix/widgets/pressable.mdx @@ -109,8 +109,8 @@ When `mouseCursor` is null, `Pressable` chooses `SystemMouseCursors.click` when ```dart PressableBox( style: .color(Colors.blue) - .padding(.all(16)) - .borderRadius(.circular(8)), + .padding(.all(16)) + .borderRadius(.circular(8)), onPress: () => print('PressableBox pressed'), child: StyledText('Styled Button'), ); @@ -139,12 +139,12 @@ PressableBox( ```dart PressableBox( style: .color(Colors.blue) - .padding(.all(16)) - .borderRadius(.circular(8)) - .onPressed(.color(Colors.red)) - .onHovered(.color(Colors.green)) - .onFocused(.border(.color(Colors.white).width(2))) - .onDisabled(.color(Colors.grey)), + .padding(.all(16)) + .borderRadius(.circular(8)) + .onPressed(.color(Colors.red)) + .onHovered(.color(Colors.green)) + .onFocused(.border(.color(Colors.white).width(2))) + .onDisabled(.color(Colors.grey)), onPress: () => print('Interactive button pressed'), child: StyledText('Interactive Button'), ); diff --git a/src/content/documentation/mix/widgets/stylewidgets.mdx b/src/content/documentation/mix/widgets/stylewidgets.mdx index e98fa7c5..430d768d 100644 --- a/src/content/documentation/mix/widgets/stylewidgets.mdx +++ b/src/content/documentation/mix/widgets/stylewidgets.mdx @@ -120,8 +120,8 @@ Pressable( ```dart PressableBox( style: .color(Colors.blue) - .padding(.all(16)) - .borderRadius(.circular(8)), + .padding(.all(16)) + .borderRadius(.circular(8)), onPress: () => print('PressableBox pressed'), child: StyledText('Styled Button'), ); diff --git a/src/content/documentation/remix/components/accordion.mdx b/src/content/documentation/remix/components/accordion.mdx index b9a8e27a..f0a09588 100644 --- a/src/content/documentation/remix/components/accordion.mdx +++ b/src/content/documentation/remix/components/accordion.mdx @@ -94,10 +94,8 @@ class _AccordionExampleState extends State { .decoration( BoxDecorationMix.color(Colors.white) .border( - .all( - .color(Colors.grey.shade300) - .width(1), - ), + .color(Colors.grey.shade300) + .width(1), ) .borderRadius(.circular(8)), ) diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 21afe44b..84fad721 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -69,20 +69,16 @@ class ButtonExample extends StatelessWidget { ) .shapeBeveledRectangle( borderRadius: .bottomLeft(.circular(12)) - .topRight(.circular(12)), + .topRight(.circular(12)), side: .width(1).color(Colors.redAccent), ) .wrap(.scale(x: 1, y: 1)) - .onPressed( - .scale(0.90), - ) + .onPressed(.scale(0.90)) .onHovered( .color(const Color(0xFF732D2D)) .animate(.spring(300.ms)), ) - .onFocused( - .color(const Color(0xFF732D2D)), - ); + .onFocused(.color(const Color(0xFF732D2D))); } ButtonStyler get successStyle { @@ -100,12 +96,8 @@ class ButtonExample extends StatelessWidget { .blurRadius(10) .spreadRadius(0), ) - .onHovered( - .color(const Color(0xFF357857)), - ) - .onFocused( - .color(const Color(0xFF357857)), - ); + .onHovered(.color(const Color(0xFF357857))) + .onFocused(.color(const Color(0xFF357857))); } } ``` diff --git a/src/content/documentation/remix/components/card.mdx b/src/content/documentation/remix/components/card.mdx index 7efadd76..dd6620f9 100644 --- a/src/content/documentation/remix/components/card.mdx +++ b/src/content/documentation/remix/components/card.mdx @@ -48,7 +48,7 @@ class CardExample extends StatelessWidget { .backgroundColor(const Color(0xFF111827)) .padding(.all(24)) .borderRadius(.circular(4)) - .border(.all(.color(Colors.grey.shade300))); + .border(.color(Colors.grey.shade300)); } } ``` diff --git a/src/content/documentation/remix/components/checkbox.mdx b/src/content/documentation/remix/components/checkbox.mdx index 66f1ac79..eb95f169 100644 --- a/src/content/documentation/remix/components/checkbox.mdx +++ b/src/content/documentation/remix/components/checkbox.mdx @@ -58,10 +58,8 @@ class _CheckboxExampleState extends State { .onSelected(.color(Colors.grey.shade900)) .borderRadius(.circular(3)) .border( - .all( - .color(Colors.black87) - .width(2), - ), + .color(Colors.black87) + .width(2), ); } } diff --git a/src/content/documentation/remix/components/icon_button.mdx b/src/content/documentation/remix/components/icon_button.mdx index dfb39b46..dc63790f 100644 --- a/src/content/documentation/remix/components/icon_button.mdx +++ b/src/content/documentation/remix/components/icon_button.mdx @@ -59,7 +59,7 @@ class IconButtonExample extends StatelessWidget { .iconSize(22) .size(40, 40) .backgroundColor(Colors.blueGrey.shade50.withValues(alpha: 0.6)) - .border(.all(.color(Colors.blueGrey.shade100).width(1.5))) + .border(.color(Colors.blueGrey.shade100).width(1.5)) .borderRadius(.circular(8)) .spinner( .size(22) diff --git a/src/content/documentation/remix/components/menu.mdx b/src/content/documentation/remix/components/menu.mdx index ba48d1fb..2a2a4728 100644 --- a/src/content/documentation/remix/components/menu.mdx +++ b/src/content/documentation/remix/components/menu.mdx @@ -87,7 +87,7 @@ class _MenuExampleState extends State { .decoration( BoxDecorationMix.color(Colors.white) .borderRadius(.circular(12)) - .border(.all(.color(Colors.blueGrey.shade100))) + .border(.color(Colors.blueGrey.shade100)) .boxShadow([ .color(Colors.blueGrey.withValues(alpha: 0.1)) .blurRadius(3) @@ -105,7 +105,7 @@ class _MenuExampleState extends State { .decoration( BoxDecorationMix.color(Colors.white) .borderRadius(.circular(12)) - .border(.all(.color(Colors.blueGrey.shade100))) + .border(.color(Colors.blueGrey.shade100)) .boxShadow([ .color(Colors.blueGrey.withValues(alpha: 0.1)) .blurRadius(3) diff --git a/src/content/documentation/remix/components/popover.mdx b/src/content/documentation/remix/components/popover.mdx index 6adc55cc..6535fac4 100644 --- a/src/content/documentation/remix/components/popover.mdx +++ b/src/content/documentation/remix/components/popover.mdx @@ -113,9 +113,9 @@ visual styling. ```dart RemixPopover( style: .padding(.all(16)) - .constraints(.maxWidth(320)) - .backgroundColor(Colors.white) - .borderRadius(.circular(12)), + .constraints(.maxWidth(320)) + .backgroundColor(Colors.white) + .borderRadius(.circular(12)), popoverChild: const Text('Custom popover'), child: const Text('Open'), ) diff --git a/src/content/documentation/remix/components/radio.mdx b/src/content/documentation/remix/components/radio.mdx index a17aa5dc..b3fb89cd 100644 --- a/src/content/documentation/remix/components/radio.mdx +++ b/src/content/documentation/remix/components/radio.mdx @@ -78,11 +78,9 @@ class _RadioExampleState extends State { .borderRadius(.circular(30)) .size(22, 22) .border( - .all( - .color(Colors.blueGrey.shade100) - .width(2.4) - .strokeAlign(BorderSide.strokeAlignInside), - ), + .color(Colors.blueGrey.shade100) + .width(2.4) + .strokeAlign(BorderSide.strokeAlignInside), ) .onHovered( .shadow( @@ -93,20 +91,16 @@ class _RadioExampleState extends State { ) .onPressed( .border( - .all( - .color(Colors.blueGrey.shade100) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), - ), + .color(Colors.blueGrey.shade100) + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ) .onSelected( .border( - .all( - .color(Colors.blueAccent.shade700) - .width(6) - .strokeAlign(BorderSide.strokeAlignInside), - ), + .color(Colors.blueAccent.shade700) + .width(6) + .strokeAlign(BorderSide.strokeAlignInside), ), ); } diff --git a/src/content/documentation/remix/components/select.mdx b/src/content/documentation/remix/components/select.mdx index d00a6cbe..56b5a13f 100644 --- a/src/content/documentation/remix/components/select.mdx +++ b/src/content/documentation/remix/components/select.mdx @@ -82,7 +82,7 @@ class _SelectExampleState extends State { return RemixSelectStyler() .trigger( .color(Colors.transparent) - .border(.all(.color(const Color(0xFF898988)))) + .border(.color(const Color(0xFF898988))) .paddingY(10) .paddingX(12) .borderRadius(.circular(12)), diff --git a/src/content/documentation/remix/components/switch.mdx b/src/content/documentation/remix/components/switch.mdx index e44522b4..33c79318 100644 --- a/src/content/documentation/remix/components/switch.mdx +++ b/src/content/documentation/remix/components/switch.mdx @@ -72,11 +72,11 @@ class _SwitchExampleState extends State { .size(40, 30) .borderRounded(40) .scale(0.85) - .shadowOnly( - color: Colors.black.withValues(alpha: 0.1), - offset: const .new(2, 4), - blurRadius: 4, - spreadRadius: 3, + .shadow( + .color(Colors.black.withValues(alpha: 0.1)) + .offset(x: 2, y: 4) + .blurRadius(4) + .spreadRadius(3), ), ); } diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx index 39d64816..0c4940ea 100644 --- a/src/content/documentation/remix/components/tabs.mdx +++ b/src/content/documentation/remix/components/tabs.mdx @@ -87,7 +87,7 @@ class _TabsExampleState extends State { .paddingAll(4) .borderRounded(12) .color(const Color(0xFFF4F6FF)) - .border(.all(.color(Colors.indigo.shade100))); + .border(.color(Colors.indigo.shade100)); } RemixTabStyler get tabStyle { @@ -106,7 +106,7 @@ class _TabsExampleState extends State { ) .onSelected( .color(Colors.white) - .border(.all(.color(Colors.indigo.shade400).width(2))) + .border(.color(Colors.indigo.shade400).width(2)) .label(.color(Colors.indigo.shade700)) .iconColor(Colors.indigo.shade600), ); @@ -117,7 +117,7 @@ class _TabsExampleState extends State { .paddingAll(20) .borderRounded(14) .color(Colors.white) - .border(.all(.color(Colors.indigo.shade100))); + .border(.color(Colors.indigo.shade100)); } } ``` diff --git a/src/content/documentation/remix/components/textfield.mdx b/src/content/documentation/remix/components/textfield.mdx index 4d530ef4..d245b9d9 100644 --- a/src/content/documentation/remix/components/textfield.mdx +++ b/src/content/documentation/remix/components/textfield.mdx @@ -74,18 +74,12 @@ class _TextfieldExampleState extends State { .color(Colors.black12) .offset(x: 0, y: 1), ) - .border( - .all( - .color(Colors.grey.shade300), - ), - ) + .border(.color(Colors.grey.shade300)) .onFocused( .border( - .all( - .color(Colors.deepPurpleAccent) - .width(3) - .strokeAlign(BorderSide.strokeAlignCenter), - ), + .color(Colors.deepPurpleAccent) + .width(3) + .strokeAlign(BorderSide.strokeAlignCenter), ), ); } diff --git a/src/content/documentation/remix/components/toggle_group.mdx b/src/content/documentation/remix/components/toggle_group.mdx index f8f80e91..44b35e7f 100644 --- a/src/content/documentation/remix/components/toggle_group.mdx +++ b/src/content/documentation/remix/components/toggle_group.mdx @@ -116,7 +116,7 @@ RemixToggleGroup( value: 'published', label: 'Published', style: .label(.color(Colors.green)) - .icon(.color(Colors.green)), + .icon(.color(Colors.green)), ), ], selectedValue: value, From 198d11e8a69da659b9fb8ae6de9a42e46d32448c Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Fri, 17 Jul 2026 05:36:45 -0400 Subject: [PATCH 7/8] Use dot shorthand for header text style --- .../mix_docs_preview/lib/components/custom_scaffold.dart | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mix_docs_preview/lib/components/custom_scaffold.dart b/packages/mix_docs_preview/lib/components/custom_scaffold.dart index 9f5ccf85..e619ac40 100644 --- a/packages/mix_docs_preview/lib/components/custom_scaffold.dart +++ b/packages/mix_docs_preview/lib/components/custom_scaffold.dart @@ -11,11 +11,7 @@ final appHeaderContainer = BoxStyler.height(80) .color(Colors.black) .padding(.all(16)) .alignment(.center) - .wrap( - .defaultText( - TextStyler.fontSize(20).fontWeight(.bold).color(Colors.white), - ), - ); + .wrap(.defaultText(.fontSize(20).fontWeight(.bold).color(Colors.white))); final scaffoldBodyContainer = BoxStyler.color( Colors.grey.shade50, From 3ebfdc92e87dc9212af01bf86a07c1f5fac6e7fa Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Fri, 17 Jul 2026 05:50:05 -0400 Subject: [PATCH 8/8] Use named colors in documentation examples --- components/RemixHome.tsx | 21 +++++++++++-------- .../lib/homepage/hero_classic.dart | 6 +++--- .../lib/homepage/hero_gradient.dart | 7 +++++-- .../lib/homepage/hero_neon.dart | 8 +++---- .../documentation/mix/tutorials/theming.mdx | 20 +++++++++--------- .../documentation/remix/components/button.mdx | 12 +++++------ .../documentation/remix/components/card.mdx | 2 +- .../documentation/remix/components/select.mdx | 2 +- .../documentation/remix/components/tabs.mdx | 2 +- 9 files changed, 43 insertions(+), 37 deletions(-) diff --git a/components/RemixHome.tsx b/components/RemixHome.tsx index a19f7567..bf18d366 100644 --- a/components/RemixHome.tsx +++ b/components/RemixHome.tsx @@ -66,12 +66,12 @@ const THEMES = [ name: "Classic", previewId: "homepage/hero-classic", code: `final style = ButtonStyler() - .color(const Color(0xFF00EB03)) - .labelColor(const Color(0xFF05040A)) + .color(Colors.greenAccent.shade400) + .labelColor(Colors.black) .paddingX(22) .paddingY(11) .borderRadius(.circular(10)) - .onHovered(.color(const Color(0xFF33FF36)));`, + .onHovered(.color(Colors.lightGreenAccent.shade400));`, }, { key: "gradient", @@ -81,9 +81,12 @@ const THEMES = [ .linearGradient( begin: .topLeft, end: .bottomRight, - colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], + colors: [ + Colors.greenAccent.shade400, + Colors.deepPurpleAccent.shade200, + ], ) - .labelColor(const Color(0xFF05040A)) + .labelColor(Colors.black) .paddingX(22) .paddingY(11) .borderRadius(.circular(12));`, @@ -93,17 +96,17 @@ const THEMES = [ name: "Neon", previewId: "homepage/hero-neon", code: `final style = ButtonStyler() - .color(const Color(0xFF0A0014)) - .labelColor(const Color(0xFF00F0FF)) + .color(Colors.black) + .labelColor(Colors.cyanAccent.shade400) .paddingX(24) .paddingY(11) .borderRadius(.circular(2)) .border( - .color(const Color(0xFF00F0FF)) + .color(Colors.cyanAccent.shade400) .width(1), ) .shadow( - .color(const Color(0xFFFF00E5)) + .color(Colors.purpleAccent.shade400) .blurRadius(22), );`, }, diff --git a/packages/mix_docs_preview/lib/homepage/hero_classic.dart b/packages/mix_docs_preview/lib/homepage/hero_classic.dart index f0faba81..8f4befba 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_classic.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_classic.dart @@ -25,12 +25,12 @@ class _HeroButton extends StatelessWidget { Widget build(BuildContext context) { // #docregion style final style = ButtonStyler() - .color(const Color(0xFF00EB03)) - .labelColor(const Color(0xFF05040A)) + .color(Colors.greenAccent.shade400) + .labelColor(Colors.black) .paddingX(22) .paddingY(11) .borderRadius(.circular(10)) - .onHovered(.color(const Color(0xFF33FF36))); + .onHovered(.color(Colors.lightGreenAccent.shade400)); // #enddocregion style return RemixButton(label: 'Get started', onPressed: () {}, style: style); diff --git a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart index cb680a6d..cfc6a134 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_gradient.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_gradient.dart @@ -28,9 +28,12 @@ class _HeroButton extends StatelessWidget { .linearGradient( begin: .topLeft, end: .bottomRight, - colors: const [Color(0xFF00EB03), Color(0xFF8B5CF6)], + colors: [ + Colors.greenAccent.shade400, + Colors.deepPurpleAccent.shade200, + ], ) - .labelColor(const Color(0xFF05040A)) + .labelColor(Colors.black) .paddingX(22) .paddingY(11) .borderRadius(.circular(12)); diff --git a/packages/mix_docs_preview/lib/homepage/hero_neon.dart b/packages/mix_docs_preview/lib/homepage/hero_neon.dart index dd85f81a..1e2b285a 100644 --- a/packages/mix_docs_preview/lib/homepage/hero_neon.dart +++ b/packages/mix_docs_preview/lib/homepage/hero_neon.dart @@ -25,13 +25,13 @@ class _HeroButton extends StatelessWidget { Widget build(BuildContext context) { // #docregion style final style = ButtonStyler() - .color(const Color(0xFF0A0014)) - .labelColor(const Color(0xFF00F0FF)) + .color(Colors.black) + .labelColor(Colors.cyanAccent.shade400) .paddingX(24) .paddingY(11) .borderRadius(.circular(2)) - .border(.color(const Color(0xFF00F0FF)).width(1)) - .shadow(.color(const Color(0xFFFF00E5)).blurRadius(22)); + .border(.color(Colors.cyanAccent.shade400).width(1)) + .shadow(.color(Colors.purpleAccent.shade400).blurRadius(22)); // #enddocregion style return RemixButton(label: 'GET STARTED', onPressed: () {}, style: style); diff --git a/src/content/documentation/mix/tutorials/theming.mdx b/src/content/documentation/mix/tutorials/theming.mdx index 27a26252..130cf552 100644 --- a/src/content/documentation/mix/tutorials/theming.mdx +++ b/src/content/documentation/mix/tutorials/theming.mdx @@ -127,11 +127,11 @@ Here's the `LightBlueTheme`: ```dart class LightBlueTheme { static Map get colors => { - CustomColorTokens.primary.token: const Color(0xFF0093B9), - CustomColorTokens.onPrimary.token: const Color(0xFFFAFAFA), - CustomColorTokens.surface.token: const Color(0xFFFAFAFA), - CustomColorTokens.onSurface.token: const Color(0xFF141C24), - CustomColorTokens.onSurfaceVariant.token: const Color(0xFF405473), + CustomColorTokens.primary.token: Colors.cyan.shade700, + CustomColorTokens.onPrimary.token: Colors.grey.shade50, + CustomColorTokens.surface.token: Colors.grey.shade50, + CustomColorTokens.onSurface.token: Colors.blueGrey.shade900, + CustomColorTokens.onSurfaceVariant.token: Colors.blueGrey.shade700, }; static Map get textStyles => { @@ -179,11 +179,11 @@ And the `DarkPurpleTheme`: ```dart class DarkPurpleTheme { static Map get colors => { - CustomColorTokens.primary.token: const Color(0xFF617AFA), - CustomColorTokens.onPrimary.token: const Color(0xFFFAFAFA), - CustomColorTokens.surface.token: const Color(0xFF1C1C21), - CustomColorTokens.onSurface.token: const Color(0xFFFAFAFA), - CustomColorTokens.onSurfaceVariant.token: const Color(0xFFD6D6DE), + CustomColorTokens.primary.token: Colors.indigoAccent.shade200, + CustomColorTokens.onPrimary.token: Colors.grey.shade50, + CustomColorTokens.surface.token: Colors.grey.shade900, + CustomColorTokens.onSurface.token: Colors.grey.shade50, + CustomColorTokens.onSurfaceVariant.token: Colors.grey.shade300, }; static Map get textStyles => { diff --git a/src/content/documentation/remix/components/button.mdx b/src/content/documentation/remix/components/button.mdx index 84fad721..b78b8f76 100644 --- a/src/content/documentation/remix/components/button.mdx +++ b/src/content/documentation/remix/components/button.mdx @@ -57,7 +57,7 @@ class ButtonExample extends StatelessWidget { return ButtonStyler() .paddingX(16) .paddingY(10) - .backgroundColor(const Color(0xFF4D1919)) + .backgroundColor(Colors.red.shade900) .shadow( .color(Colors.redAccent) .blurRadius(10) @@ -75,15 +75,15 @@ class ButtonExample extends StatelessWidget { .wrap(.scale(x: 1, y: 1)) .onPressed(.scale(0.90)) .onHovered( - .color(const Color(0xFF732D2D)) + .color(Colors.red.shade800) .animate(.spring(300.ms)), ) - .onFocused(.color(const Color(0xFF732D2D))); + .onFocused(.color(Colors.red.shade800)); } ButtonStyler get successStyle { return destructiveStyle - .backgroundColor(const Color.fromARGB(255, 15, 61, 15)) + .backgroundColor(Colors.green.shade900) .label( .uppercase() .color(Colors.greenAccent), @@ -96,8 +96,8 @@ class ButtonExample extends StatelessWidget { .blurRadius(10) .spreadRadius(0), ) - .onHovered(.color(const Color(0xFF357857))) - .onFocused(.color(const Color(0xFF357857))); + .onHovered(.color(Colors.green.shade700)) + .onFocused(.color(Colors.green.shade700)); } } ``` diff --git a/src/content/documentation/remix/components/card.mdx b/src/content/documentation/remix/components/card.mdx index dd6620f9..542f3269 100644 --- a/src/content/documentation/remix/components/card.mdx +++ b/src/content/documentation/remix/components/card.mdx @@ -45,7 +45,7 @@ class CardExample extends StatelessWidget { RemixCardStyler get style { return RemixCardStyler() .size(300, 200) - .backgroundColor(const Color(0xFF111827)) + .backgroundColor(Colors.blueGrey.shade900) .padding(.all(24)) .borderRadius(.circular(4)) .border(.color(Colors.grey.shade300)); diff --git a/src/content/documentation/remix/components/select.mdx b/src/content/documentation/remix/components/select.mdx index 56b5a13f..a81a5861 100644 --- a/src/content/documentation/remix/components/select.mdx +++ b/src/content/documentation/remix/components/select.mdx @@ -82,7 +82,7 @@ class _SelectExampleState extends State { return RemixSelectStyler() .trigger( .color(Colors.transparent) - .border(.color(const Color(0xFF898988))) + .border(.color(Colors.grey.shade600)) .paddingY(10) .paddingX(12) .borderRadius(.circular(12)), diff --git a/src/content/documentation/remix/components/tabs.mdx b/src/content/documentation/remix/components/tabs.mdx index 0c4940ea..d31b6570 100644 --- a/src/content/documentation/remix/components/tabs.mdx +++ b/src/content/documentation/remix/components/tabs.mdx @@ -86,7 +86,7 @@ class _TabsExampleState extends State { return RemixTabBarStyler() .paddingAll(4) .borderRounded(12) - .color(const Color(0xFFF4F6FF)) + .color(Colors.indigo.shade50) .border(.color(Colors.indigo.shade100)); }