Skip to content

Commit

Permalink
feat(UX-1111): Integrate color tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed Dec 20, 2024
1 parent 6eab70b commit 10d92f3
Show file tree
Hide file tree
Showing 139 changed files with 3,969 additions and 6,428 deletions.
62 changes: 61 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ builder: (context, themeData, themeMode) {
To tie everything together, use the `ZetaProvider` constructor. The `builder` argument is mandatory, while the others are optional but allow you to set initial values:

```dart
@override
Widget build(BuildContext context) {
return ZetaProvider(
Expand All @@ -104,6 +103,67 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
}
```

### Customization

#### Creating custom themes

Custom themes can be made by creating `ZetaCustomTheme` objects. `ZetaCustomTheme` can be constructed by passing in a primary or secondary color and, optionally, their dark variants:

```dart
ZetaCustomTheme(
id: 'custom-theme-red',
primary: Colors.red,
primaryDark : // Dark variant here,
secondary: Colors.blue,
secondaryDark: // Dark variant here,
)
```

Color arguments can be of type `ZetaColorSwatch`, `MaterialColor`, or `Color`. If only a `Color` is provided, Zeta will generate a `ZetaColorSwatch`. <b>To have control over every shade of a given color, we reccomend providing either a `ZetaColorSwatch` or a `MaterialColor`.</b>

If a dark variant of a color is not provided, Zeta generate one by inverting the corresponding color swatch.

#### Adding custom themes

Once you have defined the custom themes for your app, give them to the ZetaProvider by passing them through the construtor. You can also initialize the custom theme by setting the `initialTheme` argument to the id of the desired theme.

```dart
ZetaProvider(
initialTheme: 'custom-theme-red'
customThemes: [
ZetaCustomTheme(
id: 'custom-theme-red',
primary: Colors.red,
secondary: Colors.purple
),
ZetaCustomTheme(
id: 'custom-theme-purple',
primary: Colors.purple,
secondary: Colors.green
),
]
)
```

You can also get and set the custom themes via the `ZetaProvider`:

`ZetaProvider.of(context).customThemes`
`ZetaProvider.of(context).setCustomThemes(newCustomThemes)`

#### Changing the custom theme

To change the custom theme, call the `updateCustomTheme` function on `ZetaProvider` with an id corresponding to a `ZetaCustomTheme` object:

`ZetaProvider.of(context).updateCustomTheme('custom-theme-purple')`

If the id provided does not correspond to a given theme, Zeta will fall back to its default theme.

You can fetch the id of the currently applied custom theme via the `Zeta` object:

`Zeta.of(context).customThemeId`

This will return null if no custom theme is in use.

With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application.

## Licensing
Expand Down
72 changes: 42 additions & 30 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,58 @@
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:zeta_example/theme_service.dart';
import 'package:zeta_flutter/zeta_flutter.dart';
import 'home.dart';

void main() async {
WidgetsFlutterBinding.ensureInitialized();

final preferences = await SharedPreferences.getInstance();
final themeService = SharedPrefsThemeService(preferences);
final themePreferences = await themeService.loadTheme();

runApp(
ZetaExample(
themeService: themeService,
initialZetaThemeData: themePreferences.$1 ?? ZetaThemeData(),
initialThemeMode: themePreferences.$2 ?? ThemeMode.system,
initialContrast: themePreferences.$3 ?? ZetaContrast.aa,
),
);
runApp(ZetaExample());
}

class ZetaExample extends StatelessWidget {
const ZetaExample({
super.key,
required this.themeService,
required this.initialContrast,
required this.initialThemeMode,
required this.initialZetaThemeData,
});

final ZetaThemeService themeService;
final ZetaContrast initialContrast;
final ThemeMode initialThemeMode;
final ZetaThemeData initialZetaThemeData;
const ZetaExample({super.key});

@override
Widget build(BuildContext context) {
return ZetaProvider.base(
initialZetaThemeData: initialZetaThemeData,
initialThemeMode: initialThemeMode,
initialContrast: initialContrast,
return ZetaProvider(
// initialContrast: ZetaContrast.aa,
// initialThemeMode: ThemeMode.system,
customThemes: [
ZetaCustomTheme(
id: 'teal',
primary: ZetaPrimitivesLight().teal,
primaryDark: ZetaPrimitivesDark().teal,
secondary: ZetaPrimitivesLight().yellow,
secondaryDark: ZetaPrimitivesDark().yellow,
),
ZetaCustomTheme(
id: 'yellow',
primary: ZetaPrimitivesLight().yellow,
primaryDark: ZetaPrimitivesDark().yellow,
secondary: ZetaPrimitivesLight().red,
secondaryDark: ZetaPrimitivesDark().red,
),
ZetaCustomTheme(
id: 'red',
primary: ZetaPrimitivesLight().red,
primaryDark: ZetaPrimitivesDark().red,
secondary: ZetaPrimitivesLight().purple,
secondaryDark: ZetaPrimitivesDark().purple,
),
ZetaCustomTheme(
id: 'purple',
primary: ZetaPrimitivesLight().purple,
primaryDark: ZetaPrimitivesDark().purple,
secondary: ZetaPrimitivesLight().green,
secondaryDark: ZetaPrimitivesDark().green,
),
ZetaCustomTheme(
id: 'green',
primary: ZetaPrimitivesLight().green,
primaryDark: ZetaPrimitivesDark().green,
secondary: ZetaPrimitivesLight().blue,
secondaryDark: ZetaPrimitivesDark().blue,
),
],
builder: (context, lightTheme, darkTheme, themeMode) {
return MaterialApp.router(
routerConfig: router,
Expand Down
29 changes: 15 additions & 14 deletions example/lib/pages/components/avatar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
initials: 'W W',
size: ZetaAvatarSize.xxs,
backgroundColor: Zeta.of(context).colors.green,
backgroundColor: Zeta.of(context).colors.borderPositive,
),
],
name: AvatarExample.name,
Expand All @@ -35,7 +35,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
initials: 'WW',
size: ZetaAvatarSize.xxs,
backgroundColor: Zeta.of(context).colors.green,
backgroundColor: Zeta.of(context).colors.borderPositive,
),
Column(
children: [
Expand Down Expand Up @@ -69,7 +69,7 @@ class AvatarExample extends StatelessWidget {
children: ZetaAvatarSize.values
.map((size) => Column(
children: [
ZetaAvatar.image(size: size),
ZetaAvatar.image(size: size, image: image),
const SizedBox(height: 20),
],
))
Expand All @@ -82,7 +82,8 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
image: image,
borderColor: Zeta.of(context).colors.borderPositive,
),
const SizedBox(height: 20),
],
Expand Down Expand Up @@ -110,7 +111,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
image: image,
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -171,7 +172,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
),
const SizedBox(height: 20),
],
Expand Down Expand Up @@ -230,7 +231,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -260,7 +261,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
upperBadge: ZetaAvatarBadge.notification(value: 3),
image: image,
),
Expand Down Expand Up @@ -323,7 +324,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
upperBadge: ZetaAvatarBadge.notification(value: 3),
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -383,7 +384,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -413,7 +414,7 @@ class AvatarExample extends StatelessWidget {
children: [
ZetaAvatar.image(
size: size,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
lowerBadge: ZetaAvatarBadge.icon(),
image: image,
),
Expand Down Expand Up @@ -476,7 +477,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
lowerBadge: ZetaAvatarBadge.icon(),
),
const SizedBox(height: 20),
Expand Down Expand Up @@ -539,7 +540,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.image(
size: size,
image: image,
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
Expand Down Expand Up @@ -571,7 +572,7 @@ class AvatarExample extends StatelessWidget {
ZetaAvatar.initials(
size: size,
initials: 'AB',
borderColor: Zeta.of(context).colors.green,
borderColor: Zeta.of(context).colors.borderPositive,
upperBadge: ZetaAvatarBadge.notification(value: 3),
lowerBadge: ZetaAvatarBadge.icon(),
),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/list_item_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class _ListItemExampleState extends State<ListItemExample> {
return ExampleScaffold(
name: ListItemExample.name,
child: Container(
color: zetaColors.surfaceSecondary,
color: zetaColors.surfaceWarm,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/navigation_rail_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class _NavigationRailExampleState extends State<NavigationRailExample> {
_titles[_selectedIndex!],
textAlign: TextAlign.center,
style: ZetaTextStyles.titleMedium.copyWith(
color: zeta.colors.textDefault,
color: zeta.colors.mainDefault,
fontWeight: FontWeight.bold,
),
),
Expand Down
6 changes: 3 additions & 3 deletions example/lib/pages/components/notification_list_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class NotificationListItemExample extends StatelessWidget {
avatar: ZetaAvatar.initials(
initials: "JS",
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
color: Zeta.of(context).colors.surfacePositive,
icon: Icons.check,
),
)),
Expand Down Expand Up @@ -63,7 +63,7 @@ class NotificationListItemExample extends StatelessWidget {
avatar: ZetaAvatar.initials(
initials: "JS",
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
color: Zeta.of(context).colors.surfacePositive,
icon: Icons.check,
),
)),
Expand All @@ -88,7 +88,7 @@ class NotificationListItemExample extends StatelessWidget {
initials: "JS",
semanticUpperBadgeLabel: 'Urgent',
lowerBadge: ZetaAvatarBadge.icon(
color: ZetaColors().surfacePositive,
color: Zeta.of(context).colors.surfacePositive,
icon: Icons.check,
),
),
Expand Down
Loading

0 comments on commit 10d92f3

Please sign in to comment.