Skip to content

Commit 10083ca

Browse files
tilucasolitilucasoli
authored
Update button_theme.dart (#547)
1 parent 6fdd211 commit 10083ca

File tree

1 file changed

+83
-66
lines changed

1 file changed

+83
-66
lines changed

‎packages/remix/lib/src/themes/fortaleza/components/button_theme.dart‎

Lines changed: 83 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:flutter/widgets.dart';
12
import 'package:mix/mix.dart';
23

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

12-
const FortalezaButtonStyle();
13+
final Color? color;
14+
final TextStyle? textStyle;
15+
final EdgeInsets? padding;
16+
final double? radius;
1317

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

20+
const FortalezaButtonStyle({
21+
this.color,
22+
this.textStyle,
23+
this.padding,
24+
this.radius,
25+
});
26+
1627
@override
1728
Style makeStyle(SpecConfiguration<ButtonSpecUtility> spec) {
1829
final $ = spec.utilities;
1930

20-
final baseStyle = super.makeStyle(spec);
31+
Style setColor() {
32+
final color = this.color ?? spec.context.$color.accent();
33+
34+
final disabled = Style(
35+
$.container.color.$neutral(4),
36+
);
37+
38+
final borderedDisabled = Style(
39+
disabled(),
40+
$.container.border.color.$neutral(7),
41+
);
42+
43+
return Style.create([
44+
$.container.color(color),
45+
spec.on.hover(
46+
$.container.color(color.withOpacity(0.8)),
47+
),
48+
soft(
49+
$.container.color(color.withOpacity(0.1)),
50+
$.label.style.color(color),
51+
spec.on.hover(
52+
$.container.color(color.withOpacity(0.2)),
53+
),
54+
spec.on.disabled(
55+
disabled(),
56+
),
57+
),
58+
outline(
59+
$.container.color.transparent(),
60+
$.container.border.color(color),
61+
$.label.style.color(color),
62+
spec.on.hover(
63+
$.label.style.color.withOpacity(0.8),
64+
$.container.color.transparent(),
65+
),
66+
spec.on.disabled(
67+
borderedDisabled(),
68+
),
69+
),
70+
surface(
71+
$.container.color(color.withOpacity(0.1)),
72+
$.container.border.color(color.withOpacity(0.7)),
73+
$.label.style.color(color),
74+
spec.on.hover(
75+
$.container.color(color.withOpacity(0.2)),
76+
$.container.border.color.withOpacity(0.8),
77+
),
78+
spec.on.disabled(
79+
borderedDisabled(),
80+
),
81+
),
82+
ghost(
83+
$.container.color.transparent(),
84+
$.label.style.color(color),
85+
spec.on.hover(
86+
$.container.color.withOpacity(0.1),
87+
),
88+
),
89+
]);
90+
}
91+
2192
final baseOverrides = Style(
22-
baseStyle(),
93+
super.makeStyle(spec).call(),
2394
$.container.chain
2495
..padding.vertical.$space2()
2596
..padding.horizontal.$space3()
@@ -30,78 +101,24 @@ class FortalezaButtonStyle extends ButtonStyle {
30101
);
31102

32103
final onDisabledForeground = $on.disabled(
33-
$.container.color.$neutral(7),
104+
$.container.color.$neutralAlpha(4),
34105
$.label.style.color.$neutral(8),
35106
$.icon.color.$neutral(8),
36-
$.spinner.color.$neutral(7),
37-
);
38-
39-
final spinnerDisabled = $.spinner.color.$neutralAlpha(7);
40-
41-
final solidVariant = Style(
42-
$.container.color.$accent(),
43-
$.label.style.color.white(),
44-
$.spinner.color.white(),
45-
$.icon.color.white(),
46-
spec.on.hover($.container.color.$accent(10)),
47-
spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled),
107+
$.spinner.color.$neutral(8),
48108
);
49109

50-
final softVariant = Style(
51-
$.container.color.$accentAlpha(3),
52-
$.label.style.color.$accentAlpha(11),
53-
$.spinner.color.$accentAlpha(11),
54-
$.icon.color.$accentAlpha(11),
55-
spec.on.hover($.container.color.$accentAlpha(4)),
56-
spec.on.disabled($.container.color.$neutralAlpha(3)),
57-
);
58-
59-
final outlineVariant = Style(
60-
$.container.chain
61-
..color.transparent()
62-
..border.width(1)
63-
..border.strokeAlign(0)
64-
..border.color.$accentAlpha(8),
65-
$.spinner.color.$accentAlpha(11),
66-
$.icon.color.$accentAlpha(11),
67-
$.label.style.color.$accentAlpha(11),
68-
spec.on.hover($.container.color.$accentAlpha(2)),
69-
spec.on.disabled(
70-
$.container.chain
71-
..border.color.$neutralAlpha(8)
72-
..color.transparent(),
73-
),
74-
);
75-
76-
final surfaceVariant = Style(
77-
outlineVariant(),
78-
$.container.color.$accentAlpha(3),
79-
spec.on.hover(
80-
$.container.color.$accentAlpha(4),
81-
$.container.border.color.$accentAlpha(8),
82-
),
83-
spec.on.disabled($.container.color.$neutral(1)),
84-
);
85-
86-
final ghostVariant = Style(
87-
$.container.border.style.none(),
88-
$.container.color.transparent(),
89-
$.spinner.color.$accentAlpha(11),
90-
$.icon.color.$accentAlpha(11),
91-
$.label.style.color.$accentAlpha(11),
92-
spec.on.hover($.container.color.$accentAlpha(3)),
93-
spec.on.disabled($.container.color.transparent()),
94-
);
110+
final overrides = Style.create([
111+
if (textStyle != null) $.label.style.as(textStyle!),
112+
if (padding != null) $.container.padding.as(padding!),
113+
if (radius != null) $.container.borderRadius(radius!),
114+
]);
95115

96116
return Style.create(
97117
[
98118
baseOverrides(),
119+
setColor().call(),
99120
onDisabledForeground,
100-
solidVariant(),
101-
soft(softVariant()),
102-
outline(outlineVariant()),
103-
surface(surfaceVariant()),
104-
ghost(ghostVariant()),
121+
overrides(),
105122
],
106123
).animate(duration: const Duration(milliseconds: 200));
107124
}

0 commit comments

Comments
 (0)