Skip to content

feat(fortal): align visuals with Radix Themes 3.3.0 #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
leoafarias wants to merge 3 commits into
base: feat/fortal-generated-wrappers
Choose a base branch
from
Draft

feat(fortal): align visuals with Radix Themes 3.3.0 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
460d41d
feat(fortal): align visuals with Radix Themes 3.3
leoafarias Jul 24, 2026
4c5f0da
Merge remote-tracking branch 'origin/main' into feat/fortal-polish
leoafarias Jul 24, 2026
7b6b110
Merge remote-tracking branch 'origin/feat/fortal-generated-wrappers' …
leoafarias Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/avatar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/callout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/dialog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ showRemixAlertDialog<void>(

## 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/divider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class DividerExample 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 widget" defaultLanguage="dart">
```dart
Expand Down
2 changes: 1 addition & 1 deletion docs/components/icon_button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ class IconButtonExample 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
Expand Down
10 changes: 5 additions & 5 deletions docs/components/menu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ class _MenuExampleState extends State<MenuExample> {
),
],
positioning: const OverlayPositionConfig(
offset: Offset(0, 8),
followerAnchor: Alignment.topCenter,
targetAnchor: Alignment.bottomCenter,
sideOffset: 8,
side: OverlaySide.bottom,
alignment: OverlayAlignment.center,
),
style: menuStyle,
onSelected: (value) {
Expand Down Expand Up @@ -132,7 +132,7 @@ class _MenuExampleState extends State<MenuExample> {

## 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
Expand Down Expand Up @@ -247,7 +247,7 @@ Optional. Open/close interceptors (for example, to drive animations).

#### `onCloseRequested` → `RawMenuAnchorCloseRequestedCallback?`

Optional.
Optional.

#### `consumeOutsideTaps` → `bool`

Expand Down
20 changes: 10 additions & 10 deletions docs/components/popover.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ class AccountPopover extends StatelessWidget {
return FortalPopover(
semanticLabel: 'Show account details',
positioning: const OverlayPositionConfig(
targetAnchor: Alignment.bottomCenter,
followerAnchor: Alignment.topCenter,
side: OverlaySide.bottom,
alignment: OverlayAlignment.center,
),
popoverChild: const SizedBox(
width: 240,
Expand Down Expand Up @@ -85,15 +85,15 @@ callback to complete the state change.

## Positioning

`OverlayPositionConfig` aligns one point on the trigger with one point on the
overlay and can apply an additional offset.
`OverlayPositionConfig` places the overlay on a trigger side, aligns it along
that side, and can apply an additional offset.

```dart
const OverlayPositionConfig(
targetAnchor: Alignment.topRight,
followerAnchor: Alignment.bottomRight,
offset: Offset(0, -8),
)
side: OverlaySide.top,
alignment: OverlayAlignment.end,
sideOffset: 8,
);
```

The overlay is clamped to the available screen bounds.
Expand All @@ -109,10 +109,10 @@ RemixPopover(
.paddingAll(16)
.constraints(BoxConstraintsMix(maxWidth: 320))
.backgroundColor(Colors.white)
.borderRadiusAll(12),
.borderRadiusAll(const Radius.circular(12)),
popoverChild: const Text('Custom popover'),
child: const Text('Open'),
)
);
```

The `FortalPopover` preset adds Fortal spacing, border, radius, surface color,
Expand Down
2 changes: 1 addition & 1 deletion docs/components/progress.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class ProgressExample 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/radio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ class _RadioExampleState extends State<RadioExample> {

## 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
Expand Down
6 changes: 3 additions & 3 deletions docs/components/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class _SelectExampleState extends State<SelectExample> {

## 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
Expand Down Expand Up @@ -165,8 +165,8 @@ const RemixSelect({
required List<RemixSelectItem<T>> items,
T? selectedValue,
OverlayPositionConfig positioning = const OverlayPositionConfig(
targetAnchor: Alignment.bottomCenter,
followerAnchor: Alignment.topCenter,
side: OverlaySide.bottom,
alignment: OverlayAlignment.center,
),
ValueChanged<T?>? onChanged,
VoidCallback? onOpen,
Expand Down
4 changes: 2 additions & 2 deletions docs/components/slider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ class _SliderExampleState extends State<SliderExample> {
BoxShadowMix()
.color(Colors.black45)
.blurRadius(4)
.offset(const Offset(0, 2)),
.offset(x: 0, y: 2),
),
)
.thumbColor(Colors.black)
Expand All @@ -74,7 +74,7 @@ class _SliderExampleState extends State<SliderExample> {

## 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/spinner.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class SpinnerExample 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 widget" defaultLanguage="dart">
```dart
Expand Down
2 changes: 1 addition & 1 deletion docs/components/switch.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ class _SwitchExampleState extends State<SwitchExample> {

## 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ class _TabsExampleState extends State<TabsExample> {

## 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
Expand Down
4 changes: 2 additions & 2 deletions docs/components/textfield.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class _TextfieldExampleState extends State<TextfieldExample> {
BoxShadowMix()
.blurRadius(1)
.color(Colors.black12)
.offset(const Offset(0, 1)),
.offset(x: 0, y: 1),
)
.border(
BoxBorderMix.all(BorderSideMix(color: Colors.grey.shade300)),
Expand All @@ -89,7 +89,7 @@ class _TextfieldExampleState extends State<TextfieldExample> {

## 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/toggle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class _ToggleExampleState extends State<ToggleExample> {

## 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
Expand Down
2 changes: 1 addition & 1 deletion docs/components/tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ class _TriggerButton 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 widget" defaultLanguage="dart">
```dart
Expand Down
12 changes: 6 additions & 6 deletions docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ While Remix gives you complete freedom to build any design system, it also inclu

### Quick Start with Fortal

To use Fortal widgets, wrap your app with `FortalScope` to provide the design tokens, then use the generated `Fortal*` widgets. Named constructors select a fixed variant; use the unnamed constructor with `variant:` when the choice is dynamic:
To use Fortal widgets, wrap your app with `FortalScope` to provide the design tokens, then use the `Fortal*` widgets. Named constructors select a fixed variant; use the unnamed constructor with `variant:` when the choice is dynamic:

```dart
import 'package:flutter/material.dart';
Expand All @@ -178,10 +178,10 @@ import 'package:remix/remix.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: FortalScope(
child: Center(
return FortalScope(
child: MaterialApp(
home: Scaffold(
body: Center(
child: FortalButton.solid(
onPressed: () {},
label: 'Fortal Button',
Expand All @@ -196,7 +196,7 @@ 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:
Fortal widgets call the matching `fortal*Styler` internally. Use those stylers directly when you need a custom Remix widget composition:

```dart
final style = fortalButtonStyler(variant: FortalButtonVariant.solid)
Expand Down
18 changes: 6 additions & 12 deletions docs/styler-api.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ final style = ButtonStyler()
The following expressions are equivalent:

```dart
RemixCardStyler.color(Colors.blue)
RemixCardStyler().color(Colors.blue)
RemixCardStyler.color(Colors.blue);
RemixCardStyler().color(Colors.blue);
```

## Factory policy
Expand Down Expand Up @@ -127,13 +127,7 @@ operation without ambiguous overloads.

## Generation boundary

Component stylers are generated from `@MixableSpec`. Fortal widget wrapper
classes are source-authored even though they were previously emitted by
`@MixWidget`. Both upstream generators write shared parts for the same library;
during a clean build, the widget generator cannot resolve a Styler that the
spec generator has not yet combined into that library.

Only the wrapper shell was materialized—the `fortal*Styler` recipes and widget
behavior remain unchanged. This keeps clean builds deterministic and preserves
the former generated constructors and fields. The widget builder can be
re-enabled once upstream generation supports that dependency ordering.
Component stylers are generated from `@MixableSpec`, and Fortal wrapper classes
are generated from `@MixWidget`. The annotations identify the target Remix
constructor and which recipe parameters become wrapper fields. Generated files
remain deterministic build artifacts and should never be edited directly.
2 changes: 1 addition & 1 deletion packages/demo/PREVIEW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Widget createRemixPreview(Widget child) {

### Key Features
- **Remix Tokens**: Full access to design system tokens
- **Theme Support**: Automatic light/dark theme handling
- **Theme Support**: Automatic light/dark theme handling
- **Hot Reload**: Changes reflect immediately
- **No Interaction**: Uses empty callbacks for preview safety
- **Consistent Styling**: All previews use same wrapper
Expand Down
4 changes: 2 additions & 2 deletions packages/demo/lib/components/menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ Widget buildMenuUseCase(BuildContext context) {
child: Center(
child: FortalMenu(
positioning: const OverlayPositionConfig(
followerAnchor: .topCenter,
targetAnchor: .bottomCenter,
side: .bottom,
alignment: .center,
),
trigger: const RemixMenuTrigger(
label: 'Menu',
Expand Down
4 changes: 2 additions & 2 deletions packages/demo/lib/components/popover.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Widget buildPopoverUseCase(BuildContext context) {
consumeOutsideTaps: consumeOutsideTaps,
semanticLabel: 'Show collaboration details',
positioning: const OverlayPositionConfig(
targetAnchor: .bottomCenter,
followerAnchor: .topCenter,
side: .bottom,
alignment: .center,
),
popoverChild: SizedBox(
width: 280,
Expand Down
6 changes: 3 additions & 3 deletions packages/example/lib/api/menu.0.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ class _MenuExampleState extends State<MenuExample> {
),
],
positioning: const OverlayPositionConfig(
offset: Offset(0, 8),
followerAnchor: .topCenter,
targetAnchor: .bottomCenter,
side: .bottom,
alignment: .center,
sideOffset: 8,
),
style: menuStyle,
onSelected: (value) {
Expand Down
Loading
Loading