chore(preview): bump mix to ^2.0.2 and update showcases for new API

packages/mix_docs_preview/lib/homepage/buttons_showcase.dart

@@ -22,28 +22,30 @@ class Example extends StatelessWidget {
         .animate(.easeInOut(180.ms))
         .scale(1)
         .onPressed(.scale(0.95))
-        .wrap(.defaultText(TextStyler().fontSize(14).fontWeight(.w600)));
+        .textStyle(.fontSize(14).fontWeight(.w600).color(Colors.white));
 
     final solidButtonStyle = buttonStyle
         .color(Colors.deepPurpleAccent)
-        .wrap(.defaultText(.color(Colors.white)));
+        .textStyle(.fontSize(14).fontWeight(.w600).color(Colors.white));
 
     final outlinedButtonStyle = buttonStyle
         .border(.all(.color(Colors.deepPurpleAccent).width(1.5)))
-        .wrap(.defaultText(.color(Colors.deepPurpleAccent)));
+        .textStyle(
+          .fontSize(14).fontWeight(.w600).color(Colors.deepPurpleAccent),
+        );
 
     return Center(
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           Pressable(
             onPress: () {},
-            child: solidButtonStyle(child: const Text('Solid')),
+            child: solidButtonStyle(child: StyledText('Solid')),
           ),
           const SizedBox(width: 12),
           Pressable(
             onPress: () {},
-            child: outlinedButtonStyle(child: const Text('Outlined')),
+            child: outlinedButtonStyle(child: StyledText('Outlined')),
           ),
         ],
       ),

packages/mix_docs_preview/lib/homepage/variants_showcase.dart

@@ -19,16 +19,12 @@ class Example extends StatelessWidget {
         .borderRadius(.circular(16))
         .color(Colors.cyan)
         .alignment(.center)
-        .animate(.easeInOut(220.ms))
+        .textStyle(.color(Colors.white).fontSize(16))
         .scale(1)
-        .onHovered(.color(Colors.cyanAccent).scale(1.2));
+        .onHovered(.color(Colors.cyanAccent).scale(1.2))
+        .animate(.easeInOut(220.ms));
 
-    return box(
-      child: const Text(
-        'Hover',
-        style: TextStyle(color: Colors.white, fontSize: 16),
-      ),
-    );
+    return box(child: StyledText('Hover'));
     // #enddocregion showcase
   }
 }

packages/mix_docs_preview/lib/remix/components/accordion.dart

@@ -10,7 +10,7 @@ import 'package:mix_docs_preview/helpers.dart';
 import 'package:remix/remix.dart';
 
 void main() {
-  runMixApp(const Example());
+  runMixApp(FortalScope(child: const Example()));
 }
 
 class Example extends StatefulWidget {
@@ -21,7 +21,7 @@ class Example extends StatefulWidget {
 }
 
 class _ExampleState extends State<Example> {
-  final controller = RemixAccordionController(min: 0, max: 1);
+  final controller = RemixAccordionController<String>(min: 0, max: 1);
 
   @override
   void dispose() {
@@ -47,26 +47,23 @@ class _ExampleState extends State<Example> {
                 RemixAccordion(
                   value: 'accordion1',
                   title: 'How do I update my account information?',
-                  leadingIcon: Icons.help_outline,
-                  style: itemStyle,
+                  style: FortalAccordionStyle.base(),
                   child: const Text(
                     'Insert the accordion description here. It would look better as two lines of text.',
                   ),
                 ),
                 RemixAccordion(
                   value: 'accordion2',
                   title: 'What payment methods are accepted?',
-                  leadingIcon: Icons.help_outline,
-                  style: itemStyle,
+                  style: FortalAccordionStyle.base(),
                   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.',
                   ),
                 ),
                 RemixAccordion(
                   value: 'accordion3',
                   title: 'How can I track my order?',
-                  leadingIcon: Icons.help_outline,
-                  style: itemStyle,
+                  style: FortalAccordionStyle.base(),
                   child: const Text(
                     'You can track your order status in the "My Orders" section of your account.',
                   ),
@@ -81,34 +78,23 @@ class _ExampleState extends State<Example> {
 
   RemixAccordionStyle get itemStyle {
     return RemixAccordionStyle()
-        .content(BoxStyler().paddingX(16).paddingTop(8))
-        .wrap(WidgetModifierConfig.clipRRect(borderRadius: .circular(8)))
-        .paddingX(16)
-        .paddingY(14)
-        .borderRounded(8)
+        .content(BoxStyler().padding(.horizontal(16).top(8)))
+        .wrap(.clipRRect(borderRadius: .circular(8)))
+        .padding(.horizontal(16).vertical(14))
+        .borderRadius(.circular(8))
         .onHovered(RemixAccordionStyle().color(Colors.grey.shade100))
-        .decoration(
-          BoxDecorationMix(
-            color: Colors.white,
-            border: BoxBorderMix.all(
-              BorderSideMix().color(Colors.grey.shade300).width(1),
-            ),
-            borderRadius: BorderRadiusMix.circular(8),
-          ),
-        )
+        .color(Colors.white)
+        .border(.color(Colors.grey.shade300).width(1))
         .trigger(
           FlexBoxStyler()
               .direction(.horizontal)
               .mainAxisAlignment(.spaceBetween)
               .spacing(12),
         )
-        .leadingIcon(IconStyler().color(Colors.grey.shade700).size(20))
+        .leadingIcon(.color(Colors.grey.shade700).size(20))
         .title(
-          TextStyler()
-              .color(Colors.grey.shade900)
-              .fontWeight(FontWeight.w500)
-              .fontSize(14),
+          .color(Colors.grey.shade900).fontWeight(FontWeight.w500).fontSize(14),
         )
-        .trailingIcon(IconStyler().color(Colors.grey.shade700).size(20));
+        .trailingIcon(.color(Colors.grey.shade700).size(20));
   }
 }

packages/mix_docs_preview/lib/remix/components/avatar.dart

@@ -10,7 +10,7 @@ import 'package:mix_docs_preview/helpers.dart';
 import 'package:remix/remix.dart';
 
 void main() {
-  runMixApp(const Example());
+  runMixApp(FortalScope(child: const Example()));
 }
 
 class Example extends StatelessWidget {
@@ -23,39 +23,9 @@ class Example extends StatelessWidget {
       mainAxisSize: .min,
       spacing: 16,
       children: [
-        RemixAvatar(label: 'LF', style: labelStyle),
-        RemixAvatar(icon: Icons.person, style: iconStyle),
-        RemixAvatar(style: image),
+        RemixAvatar(label: 'LF', style: FortalAvatarStyles.soft()),
+        RemixAvatar(icon: Icons.person, style: FortalAvatarStyles.solid()),
       ],
     );
   }
-
-  RemixAvatarStyle get labelStyle {
-    return RemixAvatarStyle()
-        .textColor(Colors.deepPurpleAccent)
-        .size(50, 50)
-        .shapeCircle()
-        .wrap(WidgetModifierConfig.clipOval())
-        .labelColor(Colors.white)
-        .labelFontWeight(FontWeight.bold)
-        .labelFontSize(15);
-  }
-
-  RemixAvatarStyle get iconStyle {
-    return RemixAvatarStyle()
-        .textColor(Colors.deepOrangeAccent)
-        .size(70, 70)
-        .iconColor(Colors.white)
-        .iconSize(70)
-        .icon(IconStyler().wrap(WidgetModifierConfig.translate(x: 0, y: 12)))
-        .shapeCircle()
-        .wrap(WidgetModifierConfig.clipOval());
-  }
-
-  RemixAvatarStyle get image {
-    return RemixAvatarStyle()
-        .size(90, 90)
-        .backgroundImageUrl('https://i.pravatar.cc/150?img=48')
-        .shapeCircle();
-  }
 }

packages/mix_docs_preview/lib/remix/components/badge.dart

@@ -1,7 +1,6 @@
 /// RemixBadge Example
 ///
-/// Two circular badges — one with a number label, one with an icon.
-/// Inspired by line — https://designsystem.line.me/LDSG/components/indicators/badge-en
+/// Fortal badge variants — solid, soft, surface, and outline.
 
 library;
 
@@ -10,7 +9,7 @@ import 'package:mix_docs_preview/helpers.dart';
 import 'package:remix/remix.dart';
 
 void main() {
-  runMixApp(const Example());
+  runMixApp(FortalScope(child: const Example()));
 }
 
 class Example extends StatelessWidget {
@@ -23,39 +22,11 @@ class Example extends StatelessWidget {
       mainAxisSize: .min,
       spacing: 16,
       children: [
-        RemixBadge(label: '8', style: styleLabel),
-        RemixBadge(style: styleIcon, child: const Icon(Icons.camera_alt)),
+        RemixBadge(label: 'Solid', style: FortalBadgeStyles.solid()),
+        RemixBadge(label: 'Soft', style: FortalBadgeStyles.soft()),
+        RemixBadge(label: 'Surface', style: FortalBadgeStyles.surface()),
+        RemixBadge(label: 'Outline', style: FortalBadgeStyles.outline()),
       ],
     );
   }
-
-  RemixBadgeStyle get styleLabel {
-    return RemixBadgeStyle()
-        .size(24, 24)
-        .wrap(WidgetModifierConfig.clipOval())
-        .label(
-          TextStyler()
-              .fontSize(15)
-              .wrap(WidgetModifierConfig.align(alignment: .center))
-              .fontFeatures([const FontFeature.tabularFigures()]),
-        )
-        .foregroundColor(Colors.greenAccent.shade700)
-        .labelColor(Colors.white)
-        .labelFontWeight(FontWeight.bold)
-        .labelFontSize(15);
-  }
-
-  RemixBadgeStyle get styleIcon {
-    return RemixBadgeStyle()
-        .size(24, 24)
-        .wrap(WidgetModifierConfig.clipOval())
-        .label(
-          TextStyler()
-              .fontSize(15)
-              .wrap(WidgetModifierConfig.align(alignment: .center))
-              .fontFeatures([const FontFeature.tabularFigures()]),
-        )
-        .foregroundColor(Colors.redAccent)
-        .wrap(.iconTheme(color: Colors.white, size: 15));
-  }
 }

packages/mix_docs_preview/lib/remix/components/button.dart

@@ -1,7 +1,6 @@
 /// RemixButton Example
 ///
-/// Destructive and success buttons with beveled shape, glow shadow,
-/// and hover/press state transitions.
+/// Fortal button variants — solid, soft, surface, outline, and ghost.
 
 library;
 
@@ -10,77 +9,45 @@ import 'package:mix_docs_preview/helpers.dart';
 import 'package:remix/remix.dart';
 
 void main() {
-  runMixApp(const Example());
+  runMixApp(FortalScope(child: const Example()));
 }
 
 class Example extends StatelessWidget {
   const Example({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
-      color: Colors.black,
-      child: Center(
-        child: Row(
-          mainAxisAlignment: .center,
-          mainAxisSize: .min,
-          spacing: 16,
-          children: [
-            RemixButton(
-              onPressed: () {},
-              label: 'Turn Off',
-              style: destructiveStyle,
-            ),
-            RemixButton(
-              onPressed: () {},
-              label: 'Turn on',
-              style: successStyle,
-            ),
-          ],
+    return Row(
+      mainAxisAlignment: .center,
+      mainAxisSize: .min,
+      spacing: 12,
+      children: [
+        RemixButton(
+          onPressed: () {},
+          label: 'Solid',
+          style: FortalButtonStyle.solid(),
         ),
-      ),
+        RemixButton(
+          onPressed: () {},
+          label: 'Soft',
+          style: FortalButtonStyle.soft(),
+        ),
+        RemixButton(
+          onPressed: () {},
+          label: 'Surface',
+          style: FortalButtonStyle.surface(),
+        ),
+        RemixButton(
+          onPressed: () {},
+          label: 'Outline',
+          style: FortalButtonStyle.outline(),
+        ),
+        RemixButton(
+          onPressed: () {},
+          label: 'Ghost',
+          style: FortalButtonStyle.ghost(),
+        ),
+      ],
     );
   }
-
-  RemixButtonStyle get destructiveStyle {
-    return RemixButtonStyle()
-        .paddingX(16)
-        .paddingY(10)
-        .color(const Color(0xFF4D1919))
-        .shadow(
-          BoxShadowMix().color(Colors.redAccent).blurRadius(10).spreadRadius(0),
-        )
-        .label(TextStyler().uppercase().color(Colors.redAccent))
-        .shapeBeveledRectangle(
-          borderRadius: BorderRadiusMix()
-              .bottomLeft(const Radius.circular(12))
-              .topRight(const Radius.circular(12)),
-          side: BorderSideMix.width(1).color(Colors.redAccent),
-        )
-        .wrap(WidgetModifierConfig.scale(x: 1, y: 1))
-        .onPressed(
-          RemixButtonStyle().wrap(WidgetModifierConfig.scale(x: 0.90, y: 0.90)),
-        )
-        .onHovered(
-          RemixButtonStyle()
-              .color(const Color(0xFF732D2D))
-              .animate(.spring(300.ms)),
-        )
-        .onFocused(RemixButtonStyle().color(const Color(0xFF732D2D)));
-  }
-
-  RemixButtonStyle get successStyle {
-    return destructiveStyle
-        .color(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(RemixButtonStyle().color(const Color(0xFF357857)))
-        .onFocused(RemixButtonStyle().color(const Color(0xFF357857)));
-  }
 }