feat(fortal): align visuals with Radix Themes 3.3.0

README.md

@@ -194,10 +194,11 @@ class MyApp extends StatelessWidget {
 
 ### Customizing Fortal Styles
 
-Generated Fortal widgets call the matching `fortal*Styler` internally. Use those stylers directly when you need a custom Remix widget composition:
+Generated Fortal widgets call the matching `fortal*Style` recipe internally.
+Use those recipes directly when you need a custom Remix widget composition:
 
 ```dart
-final style = fortalButtonStyler(variant: FortalButtonVariant.solid)
+final style = fortalButtonStyle(variant: FortalButtonVariant.solid)
   .borderRadiusAll(const Radius.circular(8))
   .paddingX(32)
   .onHovered(.scale(1.05));

docs/components/accordion.mdx

@@ -111,7 +111,7 @@ class _AccordionExampleState extends State<AccordionExample> {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal widget" defaultLanguage="dart">
 ```dart
@@ -161,22 +161,26 @@ class _FortalAccordionExampleState extends State<FortalAccordionExample> {
 </CodeGroup>
 
 <Info>
-  See the [fortalAccordionStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/accordion/fortal_accordion_styles.dart) for all available options.
+  See the [fortalAccordionStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/accordion/fortal_accordion_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
+import 'package:flutter/material.dart';
+import 'package:naked_ui/naked_ui.dart';
+import 'package:remix/remix.dart';
+
 // Accordion Group
-const RemixAccordionGroup({
+RemixAccordionGroup<T> remixAccordionGroupConstructor<T>({
   Key? key,
   required Widget child,
   required RemixAccordionController<T> controller,
   List<T> initialExpandedValues = const [],
-})
+}) => throw UnimplementedError();
 
 // Accordion Item
-const RemixAccordion({
+RemixAccordion<T> remixAccordionConstructor<T>({
   Key? key,
   required T value,
   required Widget child,
@@ -193,10 +197,11 @@ const RemixAccordion({
   ValueChanged<bool>? onHoverChange,
   ValueChanged<bool>? onPressChange,
   String? semanticLabel,
-  Widget Function(Widget, Animation<double>) transitionBuilder = defaultAccordionTransitionBuilder,
+  Widget Function(Widget, Animation<double>) transitionBuilder =
+      RemixAccordion.defaultAccordionTransitionBuilder,
   RemixAccordionStyler style = const RemixAccordionStyler.create(),
   RemixAccordionSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/avatar.mdx

@@ -77,7 +77,7 @@ class AvatarExample extends StatelessWidget {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -95,10 +95,12 @@ class FortalAvatarExample extends StatelessWidget {
         // Soft variant - Subtle background
         FortalAvatar.soft(
           label: 'AB',
+          fallbackLength: 2,
         ),
         // Solid variant - Bold background
         FortalAvatar.solid(
           label: 'CD',
+          fallbackLength: 2,
         ),
       ],
     );
@@ -108,13 +110,17 @@ class FortalAvatarExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalAvatarStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/avatar/fortal_avatar_styles.dart) for all available options.
+  Set `fallbackLength: 2` for two-character labels so the generated widget uses
+  the pinned two-initial typography. See the [fortalAvatarStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/avatar/fortal_avatar_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixAvatar({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixAvatar remixAvatarConstructor({
   Key? key,
   ImageProvider? backgroundImage,
   ImageProvider? foregroundImage,
@@ -127,7 +133,7 @@ const RemixAvatar({
   RemixAvatarIconBuilder? iconBuilder,
   RemixAvatarStyler style = const RemixAvatarStyler.create(),
   RemixAvatarSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/badge.mdx

@@ -76,7 +76,7 @@ class BadgeExample extends StatelessWidget {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -111,20 +111,23 @@ class FortalBadgeExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalBadgeStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/badge/fortal_badge_styles.dart) for all available options.
+  See the [fortalBadgeStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/badge/fortal_badge_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixBadge({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixBadge remixBadgeConstructor({
   Key? key,
   String? label,
   Widget? child,
   RemixBadgeLabelBuilder? labelBuilder,
   RemixBadgeStyler style = const RemixBadgeStyler.create(),
   RemixBadgeSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/button.mdx

@@ -101,7 +101,7 @@ class ButtonExample extends StatelessWidget {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -149,13 +149,16 @@ class FortalButtonExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalButtonStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/button/fortal_button_styles.dart) for all available options.
+  See the [fortalButtonStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/button/fortal_button_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixButton({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixButton remixButtonConstructor({
   Key? key,
   required String label,
   IconData? leadingIcon,
@@ -177,7 +180,7 @@ const RemixButton({
   MouseCursor mouseCursor = SystemMouseCursors.click,
   ButtonStyler style = const ButtonStyler.create(),
   RemixButtonSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/callout.mdx

@@ -59,7 +59,7 @@ class CalloutExample extends StatelessWidget {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -94,20 +94,23 @@ class FortalCalloutExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalCalloutStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/callout/fortal_callout_styles.dart) for all available options.
+  See the [fortalCalloutStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/callout/fortal_callout_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixCallout({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixCallout remixCalloutConstructor({
   Key? key,
   String? text,
   IconData? icon,
   Widget? child,
   RemixCalloutStyler style = const RemixCalloutStyler.create(),
   RemixCalloutSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/card.mdx

@@ -48,7 +48,7 @@ class CardExample extends StatelessWidget {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -74,18 +74,21 @@ class FortalCardExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalCardStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/card/fortal_card_styles.dart) for all available options.
+  See the [fortalCardStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/card/fortal_card_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixCard({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixCard remixCardConstructor({
   Key? key,
   Widget? child,
   RemixCardStyler style = const RemixCardStyler.create(),
   RemixCardSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/checkbox.mdx

@@ -61,7 +61,7 @@ class _CheckboxExampleState extends State<CheckboxExample> {
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal variants" defaultLanguage="dart">
 ```dart
@@ -99,13 +99,16 @@ class _FortalCheckboxExampleState extends State<FortalCheckboxExample> {
 </CodeGroup>
 
 <Info>
-  See the [fortalCheckboxStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/checkbox/fortal_checkbox_styles.dart) for all available options.
+  See the [fortalCheckboxStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/checkbox/fortal_checkbox_styles.dart) for all available options.
 </Info>
 
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixCheckbox({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixCheckbox remixCheckboxConstructor({
   Key? key,
   required bool? selected,
   ValueChanged<bool?>? onChanged,
@@ -121,7 +124,7 @@ const RemixCheckbox({
   MouseCursor mouseCursor = SystemMouseCursors.click,
   RemixCheckboxStyler style = const RemixCheckboxStyler.create(),
   RemixCheckboxSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>
 

docs/components/dialog.mdx

@@ -65,32 +65,37 @@ configuration is needed.
 
 <CodeGroup title="Destructive alert" defaultLanguage="dart">
 ```dart
-showRemixAlertDialog<void>(
-  context: context,
-  semanticLabel: 'Delete project confirmation',
-  builder: (context) => Center(
-    child: FortalDialog(
-      title: 'Delete project?',
-      description: 'This permanently deletes the project and all of its data.',
-      actions: [
-        FortalButton.ghost(
-          label: 'Cancel',
-          onPressed: () => Navigator.pop(context),
-        ),
-        FortalButton(
-          label: 'Delete project',
-          onPressed: () => Navigator.pop(context),
-        ),
-      ],
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+Future<void> showDeleteDialog(BuildContext context) async {
+  await showRemixAlertDialog<void>(
+    context: context,
+    semanticLabel: 'Delete project confirmation',
+    builder: (context) => Center(
+      child: FortalDialog(
+        title: 'Delete project?',
+        description: 'This permanently deletes the project and all of its data.',
+        actions: [
+          FortalButton.ghost(
+            label: 'Cancel',
+            onPressed: () => Navigator.pop(context),
+          ),
+          FortalButton(
+            label: 'Delete project',
+            onPressed: () => Navigator.pop(context),
+          ),
+        ],
+      ),
     ),
-  ),
-);
+  );
+}
 ```
 </CodeGroup>
 
 ## Fortal widgets
 
-Remix includes a generated Fortal-themed widget for this component:
+Remix includes a Fortal-themed widget for this component:
 
 <CodeGroup title="Fortal widget" defaultLanguage="dart">
 ```dart
@@ -122,7 +127,7 @@ class FortalDialogExample extends StatelessWidget {
 </CodeGroup>
 
 <Info>
-  See the [fortalDialogStyler source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/dialog/fortal_dialog_styles.dart) for all available options.
+  See the [fortalDialogStyle source code](https://github.com/btwld/remix/blob/main/packages/remix/lib/src/components/dialog/fortal_dialog_styles.dart) for all available options.
 </Info>
 
 ## Show function
@@ -176,7 +181,10 @@ the alert with a `null` result.
 ## Constructor
 <CodeGroup title="Constructor" defaultLanguage="dart">
 ```dart
-const RemixDialog({
+import 'package:flutter/material.dart';
+import 'package:remix/remix.dart';
+
+RemixDialog remixDialogConstructor({
   Key? key,
   Widget? child,
   String? title,
@@ -186,7 +194,7 @@ const RemixDialog({
   String? semanticLabel,
   RemixDialogStyler style = const RemixDialogStyler.create(),
   RemixDialogSpec? styleSpec,
-})
+}) => throw UnimplementedError();
 ```
 </CodeGroup>