Skip to content

Commit c4b2d0c

Browse files
stamenionemergify[bot]
stamenione
and
mergify[bot]
authored
Admin UI: Setup enmeshed design (#581)
* feat: add themes to the admin ui and add dynamic color package * feat: add provider * chore: change variable name to camel case * ci: trigger pipelines * chore: remove unnecessary libs * refactor: rename a file * chore: remove theme manager * chore: simplify themes in material app * refactor: rename main app * refactor: rename the main app --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
1 parent 58052c8 commit c4b2d0c

File tree

3 files changed

+346
-7
lines changed

3 files changed

+346
-7
lines changed

‎AdminUi/apps/admin_ui/lib/main.dart

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'package:admin_ui/theme/colors/color_schemes.dart';
2+
import 'package:admin_ui/theme/colors/custom_colors.dart';
13
import 'package:flutter/material.dart';
24
import 'package:go_router/go_router.dart';
35

@@ -10,7 +12,9 @@ void main() async {
1012

1113
await setup();
1214

13-
runApp(const MainApp());
15+
runApp(
16+
const AdminUiApp(),
17+
);
1418
}
1519

1620
final _rootNavigatorKey = GlobalKey<NavigatorState>();
@@ -63,17 +67,23 @@ final _router = GoRouter(
6367
],
6468
);
6569

66-
class MainApp extends StatelessWidget {
67-
const MainApp({super.key});
70+
class AdminUiApp extends StatelessWidget {
71+
const AdminUiApp({super.key});
6872

6973
@override
7074
Widget build(BuildContext context) {
71-
const colorSchemeSeed = Color.fromARGB(255, 23, 66, 141);
7275
return MaterialApp.router(
76+
theme: ThemeData(
77+
useMaterial3: true,
78+
colorScheme: lightColorScheme,
79+
extensions: [lightCustomColors],
80+
),
81+
darkTheme: ThemeData(
82+
useMaterial3: true,
83+
colorScheme: darkColorScheme,
84+
extensions: [darkCustomColors],
85+
),
7386
debugShowCheckedModeBanner: false,
74-
themeMode: ThemeMode.light,
75-
theme: ThemeData(colorSchemeSeed: colorSchemeSeed, useMaterial3: true),
76-
darkTheme: ThemeData(brightness: Brightness.dark, colorSchemeSeed: colorSchemeSeed, useMaterial3: true),
7787
routerConfig: _router,
7888
);
7989
}

‎AdminUi/apps/admin_ui/lib/theme/colors/color_schemes.dart

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import 'package:flutter/material.dart';
2+
3+
const lightColorScheme = ColorScheme(
4+
brightness: Brightness.light,
5+
primary: Color(0xFF365CA8),
6+
onPrimary: Color(0xFFFFFFFF),
7+
primaryContainer: Color(0xFFD9E2FF),
8+
onPrimaryContainer: Color(0xFF001945),
9+
secondary: Color(0xFF0060A9),
10+
onSecondary: Color(0xFFFFFFFF),
11+
secondaryContainer: Color(0xFFD3E4FF),
12+
onSecondaryContainer: Color(0xFF001C38),
13+
tertiary: Color(0xFF9B4500),
14+
onTertiary: Color(0xFFFFFFFF),
15+
tertiaryContainer: Color(0xFFFFDBC9),
16+
onTertiaryContainer: Color(0xFF331200),
17+
error: Color(0xFFBA1A1A),
18+
errorContainer: Color(0xFFFFDAD6),
19+
onError: Color(0xFFFFFFFF),
20+
onErrorContainer: Color(0xFF410002),
21+
background: Color(0xFFF8FDFF),
22+
onBackground: Color(0xFF001F25),
23+
surface: Color(0xFFF8FDFF),
24+
onSurface: Color(0xFF001F25),
25+
surfaceVariant: Color(0xFFE1E2EC),
26+
onSurfaceVariant: Color(0xFF44464F),
27+
outline: Color(0xFF757780),
28+
onInverseSurface: Color(0xFFD6F6FF),
29+
inverseSurface: Color(0xFF00363F),
30+
inversePrimary: Color(0xFFB0C6FF),
31+
shadow: Color(0xFF000000),
32+
surfaceTint: Color(0xFF365CA8),
33+
outlineVariant: Color(0xFFC5C6D0),
34+
scrim: Color(0xFF000000),
35+
);
36+
37+
const darkColorScheme = ColorScheme(
38+
brightness: Brightness.dark,
39+
primary: Color(0xFFB0C6FF),
40+
onPrimary: Color(0xFF002D6E),
41+
primaryContainer: Color(0xFF18438F),
42+
onPrimaryContainer: Color(0xFFD9E2FF),
43+
secondary: Color(0xFFA2C9FF),
44+
onSecondary: Color(0xFF00315B),
45+
secondaryContainer: Color(0xFF004881),
46+
onSecondaryContainer: Color(0xFFD3E4FF),
47+
tertiary: Color(0xFFFFB68D),
48+
onTertiary: Color(0xFF532200),
49+
tertiaryContainer: Color(0xFF763300),
50+
onTertiaryContainer: Color(0xFFFFDBC9),
51+
error: Color(0xFFFFB4AB),
52+
errorContainer: Color(0xFF93000A),
53+
onError: Color(0xFF690005),
54+
onErrorContainer: Color(0xFFFFDAD6),
55+
background: Color(0xFF001F25),
56+
onBackground: Color(0xFFA6EEFF),
57+
surface: Color(0xFF001F25),
58+
onSurface: Color(0xFFA6EEFF),
59+
surfaceVariant: Color(0xFF44464F),
60+
onSurfaceVariant: Color(0xFFC5C6D0),
61+
outline: Color(0xFF8F9099),
62+
onInverseSurface: Color(0xFF001F25),
63+
inverseSurface: Color(0xFFA6EEFF),
64+
inversePrimary: Color(0xFF365CA8),
65+
shadow: Color(0xFF000000),
66+
surfaceTint: Color(0xFFB0C6FF),
67+
outlineVariant: Color(0xFF44464F),
68+
scrim: Color(0xFF000000),
69+
);

‎AdminUi/apps/admin_ui/lib/theme/colors/custom_colors.dart

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
import 'package:flutter/material.dart';
2+
3+
const neutralVariant = Color(0xFF333333);
4+
const decorative = Color(0xFF61178C);
5+
const decorative_2 = Color(0xFF8EB0E9);
6+
const error = Color(0xFF8C1742);
7+
const warning = Color(0xFF8C6117);
8+
const success = Color(0xFF428C17);
9+
10+
CustomColors lightCustomColors = const CustomColors(
11+
sourceNeutralvariant: Color(0xFF333333),
12+
neutralvariant: Color(0xFF006874),
13+
onNeutralvariant: Color(0xFFFFFFFF),
14+
neutralvariantContainer: Color(0xFF97F0FF),
15+
onNeutralvariantContainer: Color(0xFF001F24),
16+
sourceDecorative: Color(0xFF61178C),
17+
decorative: Color(0xFF833DAE),
18+
onDecorative: Color(0xFFFFFFFF),
19+
decorativeContainer: Color(0xFFF4D9FF),
20+
onDecorativeContainer: Color(0xFF30004B),
21+
sourceDecorative2: Color(0xFF8EB0E9),
22+
decorative2: Color(0xFF255EA6),
23+
onDecorative2: Color(0xFFFFFFFF),
24+
decorative2Container: Color(0xFFD5E3FF),
25+
onDecorative2Container: Color(0xFF001B3C),
26+
sourceError: Color(0xFF8C1742),
27+
error: Color(0xFFA93057),
28+
onError: Color(0xFFFFFFFF),
29+
errorContainer: Color(0xFFFFD9DF),
30+
onErrorContainer: Color(0xFF3F0018),
31+
sourceWarning: Color(0xFF8C6117),
32+
warning: Color(0xFF815600),
33+
onWarning: Color(0xFFFFFFFF),
34+
warningContainer: Color(0xFFFFDDB1),
35+
onWarningContainer: Color(0xFF291800),
36+
sourceSuccess: Color(0xFF428C17),
37+
success: Color(0xFF2B6C00),
38+
onSuccess: Color(0xFFFFFFFF),
39+
successContainer: Color(0xFFA6F878),
40+
onSuccessContainer: Color(0xFF082100),
41+
);
42+
43+
CustomColors darkCustomColors = const CustomColors(
44+
sourceNeutralvariant: Color(0xFF333333),
45+
neutralvariant: Color(0xFF4FD8EB),
46+
onNeutralvariant: Color(0xFF00363D),
47+
neutralvariantContainer: Color(0xFF004F58),
48+
onNeutralvariantContainer: Color(0xFF97F0FF),
49+
sourceDecorative: Color(0xFF61178C),
50+
decorative: Color(0xFFE5B4FF),
51+
onDecorative: Color(0xFF4F0077),
52+
decorativeContainer: Color(0xFF692194),
53+
onDecorativeContainer: Color(0xFFF4D9FF),
54+
sourceDecorative2: Color(0xFF8EB0E9),
55+
decorative2: Color(0xFFA8C8FF),
56+
onDecorative2: Color(0xFF003061),
57+
decorative2Container: Color(0xFF004689),
58+
onDecorative2Container: Color(0xFFD5E3FF),
59+
sourceError: Color(0xFF8C1742),
60+
error: Color(0xFFFFB1C2),
61+
onError: Color(0xFF66002B),
62+
errorContainer: Color(0xFF891440),
63+
onErrorContainer: Color(0xFFFFD9DF),
64+
sourceWarning: Color(0xFF8C6117),
65+
warning: Color(0xFFFFBA4B),
66+
onWarning: Color(0xFF442B00),
67+
warningContainer: Color(0xFF624000),
68+
onWarningContainer: Color(0xFFFFDDB1),
69+
sourceSuccess: Color(0xFF428C17),
70+
success: Color(0xFF8BDA5F),
71+
onSuccess: Color(0xFF133800),
72+
successContainer: Color(0xFF1F5100),
73+
onSuccessContainer: Color(0xFFA6F878),
74+
);
75+
76+
/// Defines a set of custom colors, each comprised of 4 complementary tones.
77+
///
78+
/// See also:
79+
/// * <https://m3.material.io/styles/color/the-color-system/custom-colors>
80+
@immutable
81+
class CustomColors extends ThemeExtension<CustomColors> {
82+
const CustomColors({
83+
required this.sourceNeutralvariant,
84+
required this.neutralvariant,
85+
required this.onNeutralvariant,
86+
required this.neutralvariantContainer,
87+
required this.onNeutralvariantContainer,
88+
required this.sourceDecorative,
89+
required this.decorative,
90+
required this.onDecorative,
91+
required this.decorativeContainer,
92+
required this.onDecorativeContainer,
93+
required this.sourceDecorative2,
94+
required this.decorative2,
95+
required this.onDecorative2,
96+
required this.decorative2Container,
97+
required this.onDecorative2Container,
98+
required this.sourceError,
99+
required this.error,
100+
required this.onError,
101+
required this.errorContainer,
102+
required this.onErrorContainer,
103+
required this.sourceWarning,
104+
required this.warning,
105+
required this.onWarning,
106+
required this.warningContainer,
107+
required this.onWarningContainer,
108+
required this.sourceSuccess,
109+
required this.success,
110+
required this.onSuccess,
111+
required this.successContainer,
112+
required this.onSuccessContainer,
113+
});
114+
115+
final Color? sourceNeutralvariant;
116+
final Color? neutralvariant;
117+
final Color? onNeutralvariant;
118+
final Color? neutralvariantContainer;
119+
final Color? onNeutralvariantContainer;
120+
final Color? sourceDecorative;
121+
final Color? decorative;
122+
final Color? onDecorative;
123+
final Color? decorativeContainer;
124+
final Color? onDecorativeContainer;
125+
final Color? sourceDecorative2;
126+
final Color? decorative2;
127+
final Color? onDecorative2;
128+
final Color? decorative2Container;
129+
final Color? onDecorative2Container;
130+
final Color? sourceError;
131+
final Color? error;
132+
final Color? onError;
133+
final Color? errorContainer;
134+
final Color? onErrorContainer;
135+
final Color? sourceWarning;
136+
final Color? warning;
137+
final Color? onWarning;
138+
final Color? warningContainer;
139+
final Color? onWarningContainer;
140+
final Color? sourceSuccess;
141+
final Color? success;
142+
final Color? onSuccess;
143+
final Color? successContainer;
144+
final Color? onSuccessContainer;
145+
146+
@override
147+
CustomColors copyWith({
148+
Color? sourceNeutralvariant,
149+
Color? neutralvariant,
150+
Color? onNeutralvariant,
151+
Color? neutralvariantContainer,
152+
Color? onNeutralvariantContainer,
153+
Color? sourceDecorative,
154+
Color? decorative,
155+
Color? onDecorative,
156+
Color? decorativeContainer,
157+
Color? onDecorativeContainer,
158+
Color? sourceDecorative2,
159+
Color? decorative2,
160+
Color? onDecorative2,
161+
Color? decorative2Container,
162+
Color? onDecorative2Container,
163+
Color? sourceError,
164+
Color? error,
165+
Color? onError,
166+
Color? errorContainer,
167+
Color? onErrorContainer,
168+
Color? sourceWarning,
169+
Color? warning,
170+
Color? onWarning,
171+
Color? warningContainer,
172+
Color? onWarningContainer,
173+
Color? sourceSuccess,
174+
Color? success,
175+
Color? onSuccess,
176+
Color? successContainer,
177+
Color? onSuccessContainer,
178+
}) {
179+
return CustomColors(
180+
sourceNeutralvariant: sourceNeutralvariant ?? this.sourceNeutralvariant,
181+
neutralvariant: neutralvariant ?? this.neutralvariant,
182+
onNeutralvariant: onNeutralvariant ?? this.onNeutralvariant,
183+
neutralvariantContainer: neutralvariantContainer ?? this.neutralvariantContainer,
184+
onNeutralvariantContainer: onNeutralvariantContainer ?? this.onNeutralvariantContainer,
185+
sourceDecorative: sourceDecorative ?? this.sourceDecorative,
186+
decorative: decorative ?? this.decorative,
187+
onDecorative: onDecorative ?? this.onDecorative,
188+
decorativeContainer: decorativeContainer ?? this.decorativeContainer,
189+
onDecorativeContainer: onDecorativeContainer ?? this.onDecorativeContainer,
190+
sourceDecorative2: sourceDecorative2 ?? this.sourceDecorative2,
191+
decorative2: decorative2 ?? this.decorative2,
192+
onDecorative2: onDecorative2 ?? this.onDecorative2,
193+
decorative2Container: decorative2Container ?? this.decorative2Container,
194+
onDecorative2Container: onDecorative2Container ?? this.onDecorative2Container,
195+
sourceError: sourceError ?? this.sourceError,
196+
error: error ?? this.error,
197+
onError: onError ?? this.onError,
198+
errorContainer: errorContainer ?? this.errorContainer,
199+
onErrorContainer: onErrorContainer ?? this.onErrorContainer,
200+
sourceWarning: sourceWarning ?? this.sourceWarning,
201+
warning: warning ?? this.warning,
202+
onWarning: onWarning ?? this.onWarning,
203+
warningContainer: warningContainer ?? this.warningContainer,
204+
onWarningContainer: onWarningContainer ?? this.onWarningContainer,
205+
sourceSuccess: sourceSuccess ?? this.sourceSuccess,
206+
success: success ?? this.success,
207+
onSuccess: onSuccess ?? this.onSuccess,
208+
successContainer: successContainer ?? this.successContainer,
209+
onSuccessContainer: onSuccessContainer ?? this.onSuccessContainer,
210+
);
211+
}
212+
213+
@override
214+
CustomColors lerp(ThemeExtension<CustomColors>? other, double t) {
215+
if (other is! CustomColors) {
216+
return this;
217+
}
218+
return CustomColors(
219+
sourceNeutralvariant: Color.lerp(sourceNeutralvariant, other.sourceNeutralvariant, t),
220+
neutralvariant: Color.lerp(neutralvariant, other.neutralvariant, t),
221+
onNeutralvariant: Color.lerp(onNeutralvariant, other.onNeutralvariant, t),
222+
neutralvariantContainer: Color.lerp(neutralvariantContainer, other.neutralvariantContainer, t),
223+
onNeutralvariantContainer: Color.lerp(onNeutralvariantContainer, other.onNeutralvariantContainer, t),
224+
sourceDecorative: Color.lerp(sourceDecorative, other.sourceDecorative, t),
225+
decorative: Color.lerp(decorative, other.decorative, t),
226+
onDecorative: Color.lerp(onDecorative, other.onDecorative, t),
227+
decorativeContainer: Color.lerp(decorativeContainer, other.decorativeContainer, t),
228+
onDecorativeContainer: Color.lerp(onDecorativeContainer, other.onDecorativeContainer, t),
229+
sourceDecorative2: Color.lerp(sourceDecorative2, other.sourceDecorative2, t),
230+
decorative2: Color.lerp(decorative2, other.decorative2, t),
231+
onDecorative2: Color.lerp(onDecorative2, other.onDecorative2, t),
232+
decorative2Container: Color.lerp(decorative2Container, other.decorative2Container, t),
233+
onDecorative2Container: Color.lerp(onDecorative2Container, other.onDecorative2Container, t),
234+
sourceError: Color.lerp(sourceError, other.sourceError, t),
235+
error: Color.lerp(error, other.error, t),
236+
onError: Color.lerp(onError, other.onError, t),
237+
errorContainer: Color.lerp(errorContainer, other.errorContainer, t),
238+
onErrorContainer: Color.lerp(onErrorContainer, other.onErrorContainer, t),
239+
sourceWarning: Color.lerp(sourceWarning, other.sourceWarning, t),
240+
warning: Color.lerp(warning, other.warning, t),
241+
onWarning: Color.lerp(onWarning, other.onWarning, t),
242+
warningContainer: Color.lerp(warningContainer, other.warningContainer, t),
243+
onWarningContainer: Color.lerp(onWarningContainer, other.onWarningContainer, t),
244+
sourceSuccess: Color.lerp(sourceSuccess, other.sourceSuccess, t),
245+
success: Color.lerp(success, other.success, t),
246+
onSuccess: Color.lerp(onSuccess, other.onSuccess, t),
247+
successContainer: Color.lerp(successContainer, other.successContainer, t),
248+
onSuccessContainer: Color.lerp(onSuccessContainer, other.onSuccessContainer, t),
249+
);
250+
}
251+
252+
/// Returns an instance of [CustomColors] in which the following custom
253+
/// colors are harmonized with [dynamic]'s [ColorScheme.primary].
254+
///
255+
/// See also:
256+
/// * <https://m3.material.io/styles/color/the-color-system/custom-colors#harmonization>
257+
CustomColors harmonized(ColorScheme dynamic) {
258+
return copyWith();
259+
}
260+
}

0 commit comments

Comments
 (0)