Skip to content
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

feat: improve Fortaleza Theme Customization #547

Merged
merged 1 commit into from
Dec 26, 2024
Merged

feat: improve Fortaleza Theme Customization #547

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
149 changes: 83 additions & 66 deletions packages/remix/lib/src/themes/fortaleza/components/button_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:flutter/widgets.dart';
import 'package:mix/mix.dart';

import '../../../components/button/button.dart';
Expand All @@ -9,17 +10,87 @@ class FortalezaButtonStyle extends ButtonStyle {
static const surface = Variant('for.button.surface');
static const ghost = Variant('for.button.ghost');

const FortalezaButtonStyle();
final Color? color;
final TextStyle? textStyle;
final EdgeInsets? padding;
final double? radius;

static List<Variant> get variants => [soft, outline, surface, ghost];

const FortalezaButtonStyle({
this.color,
this.textStyle,
this.padding,
this.radius,
});

@override
Style makeStyle(SpecConfiguration<ButtonSpecUtility> spec) {
final $ = spec.utilities;

final baseStyle = super.makeStyle(spec);
Style setColor() {
final color = this.color ?? spec.context.$color.accent();

final disabled = Style(
$.container.color.$neutral(4),
);

final borderedDisabled = Style(
disabled(),
$.container.border.color.$neutral(7),
);

return Style.create([
$.container.color(color),
spec.on.hover(
$.container.color(color.withOpacity(0.8)),
),
soft(
$.container.color(color.withOpacity(0.1)),
$.label.style.color(color),
spec.on.hover(
$.container.color(color.withOpacity(0.2)),
),
spec.on.disabled(
disabled(),
),
),
outline(
$.container.color.transparent(),
$.container.border.color(color),
$.label.style.color(color),
spec.on.hover(
$.label.style.color.withOpacity(0.8),
$.container.color.transparent(),
),
spec.on.disabled(
borderedDisabled(),
),
),
surface(
$.container.color(color.withOpacity(0.1)),
$.container.border.color(color.withOpacity(0.7)),
$.label.style.color(color),
spec.on.hover(
$.container.color(color.withOpacity(0.2)),
$.container.border.color.withOpacity(0.8),
),
spec.on.disabled(
borderedDisabled(),
),
),
ghost(
$.container.color.transparent(),
$.label.style.color(color),
spec.on.hover(
$.container.color.withOpacity(0.1),
),
),
]);
}

final baseOverrides = Style(
baseStyle(),
super.makeStyle(spec).call(),
$.container.chain
..padding.vertical.$space2()
..padding.horizontal.$space3()
Expand All @@ -30,78 +101,24 @@ class FortalezaButtonStyle extends ButtonStyle {
);

final onDisabledForeground = $on.disabled(
$.container.color.$neutral(7),
$.container.color.$neutralAlpha(4),
$.label.style.color.$neutral(8),
$.icon.color.$neutral(8),
$.spinner.color.$neutral(7),
);

final spinnerDisabled = $.spinner.color.$neutralAlpha(7);

final solidVariant = Style(
$.container.color.$accent(),
$.label.style.color.white(),
$.spinner.color.white(),
$.icon.color.white(),
spec.on.hover($.container.color.$accent(10)),
spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled),
$.spinner.color.$neutral(8),
);

final softVariant = Style(
$.container.color.$accentAlpha(3),
$.label.style.color.$accentAlpha(11),
$.spinner.color.$accentAlpha(11),
$.icon.color.$accentAlpha(11),
spec.on.hover($.container.color.$accentAlpha(4)),
spec.on.disabled($.container.color.$neutralAlpha(3)),
);

final outlineVariant = Style(
$.container.chain
..color.transparent()
..border.width(1)
..border.strokeAlign(0)
..border.color.$accentAlpha(8),
$.spinner.color.$accentAlpha(11),
$.icon.color.$accentAlpha(11),
$.label.style.color.$accentAlpha(11),
spec.on.hover($.container.color.$accentAlpha(2)),
spec.on.disabled(
$.container.chain
..border.color.$neutralAlpha(8)
..color.transparent(),
),
);

final surfaceVariant = Style(
outlineVariant(),
$.container.color.$accentAlpha(3),
spec.on.hover(
$.container.color.$accentAlpha(4),
$.container.border.color.$accentAlpha(8),
),
spec.on.disabled($.container.color.$neutral(1)),
);

final ghostVariant = Style(
$.container.border.style.none(),
$.container.color.transparent(),
$.spinner.color.$accentAlpha(11),
$.icon.color.$accentAlpha(11),
$.label.style.color.$accentAlpha(11),
spec.on.hover($.container.color.$accentAlpha(3)),
spec.on.disabled($.container.color.transparent()),
);
final overrides = Style.create([
if (textStyle != null) $.label.style.as(textStyle!),
if (padding != null) $.container.padding.as(padding!),
if (radius != null) $.container.borderRadius(radius!),
]);

return Style.create(
[
baseOverrides(),
setColor().call(),
onDisabledForeground,
solidVariant(),
soft(softVariant()),
outline(outlineVariant()),
surface(surfaceVariant()),
ghost(ghostVariant()),
overrides(),
],
).animate(duration: const Duration(milliseconds: 200));
}
Expand Down
Loading