Skip to content

Commit 12746ee

Browse files
thelukewaltonthelukewalton
committed
up to nav-bar done ish
1 parent c85bc93 commit 12746ee

File tree

104 files changed

+2196
-2231
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+2196
-2231
lines changed

‎example/lib/home.dart

+31-21
Original file line numberDiff line numberDiff line change
@@ -161,30 +161,40 @@ class _HomeState extends State<Home> {
161161
child: SingleChildScrollView(
162162
child: Column(
163163
children: [
164-
ExpansionTile(
165-
title: Text('Widgets'),
166-
backgroundColor: Zeta.of(context).colors.warm.shade30,
167-
children: _components
168-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
169-
.toList(),
170-
),
171-
ExpansionTile(
172-
title: Text('Theme'),
173-
backgroundColor: Zeta.of(context).colors.warm.shade30,
174-
children: _theme
175-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
176-
.toList(),
177-
),
178-
ExpansionTile(
179-
title: Text('Assets'),
180-
backgroundColor: Zeta.of(context).colors.warm.shade30,
181-
children: _assets
182-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
183-
.toList(),
184-
),
164+
ExampleListTile(name: 'Components', children: _components),
165+
ExampleListTile(name: 'Theme', children: _theme),
166+
ExampleListTile(name: 'Assets', children: _assets),
185167
],
186168
),
187169
),
188170
);
189171
}
190172
}
173+
174+
class ExampleListTile extends StatelessWidget {
175+
const ExampleListTile({
176+
super.key,
177+
required this.children,
178+
required this.name,
179+
});
180+
181+
final List<Component> children;
182+
final String name;
183+
184+
@override
185+
Widget build(BuildContext context) {
186+
return ExpansionTile(
187+
title: Text(name),
188+
children: children
189+
.map(
190+
(item) => ListTile(
191+
title: Text(item.name),
192+
onTap: () => context.go('/${item.name}'),
193+
hoverColor: Zeta.of(context).colors.surface.hover,
194+
tileColor: Zeta.of(context).colors.surface.defaultColor,
195+
),
196+
)
197+
.toList(),
198+
);
199+
}
200+
}

‎example/lib/pages/assets/icons_example.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ class _IconsExampleState extends State<IconsExample> {
4040
height: 120,
4141
child: InkWell(
4242
borderRadius: Zeta.of(context).radii.rounded,
43-
hoverColor: Zeta.of(context).colors.surfaceHover,
43+
hoverColor: Zeta.of(context).colors.surface.hover,
4444
onTap: () async {
4545
await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
4646
ScaffoldMessenger.of(context).showMaterialBanner(

‎example/lib/pages/components/avatar_example.dart

+10-248
Large diffs are not rendered by default.

‎example/lib/pages/components/chat_item_example.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'package:zeta_example/widgets.dart';
33
import 'package:zeta_flutter/zeta_flutter.dart';
44

55
class ChatItemExample extends StatelessWidget {
6-
static const String name = 'Chat Item';
6+
static const String name = 'ChatItem';
77

88
const ChatItemExample({Key? key}) : super(key: key);
99

‎example/lib/pages/components/chip_example.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ class _ChipExampleState extends State<ChipExample> {
8080
builder: (context, _, __) {
8181
return Container(
8282
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
83-
color: colors.surfaceSelectedHover,
83+
color: colors.surface.selectedHover,
8484
height: 100,
8585
width: 200,
8686
child: Center(child: Text('Last chip dragged here: $chipType')),

‎example/lib/pages/components/dialog_example.dart

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class DialogExample extends StatelessWidget {
2222
title: 'Dialog Title',
2323
icon: ZetaIcon(
2424
ZetaIcons.warning,
25-
color: zeta.colors.surfaceWarning,
25+
color: zeta.colors.surface.warning,
2626
),
2727
message:
2828
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
@@ -37,7 +37,7 @@ class DialogExample extends StatelessWidget {
3737
title: 'Dialog Title',
3838
icon: ZetaIcon(
3939
ZetaIcons.warning,
40-
color: zeta.colors.surfaceWarning,
40+
color: zeta.colors.surface.warning,
4141
),
4242
message:
4343
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
@@ -53,7 +53,7 @@ class DialogExample extends StatelessWidget {
5353
title: 'Dialog Title',
5454
icon: ZetaIcon(
5555
ZetaIcons.warning,
56-
color: zeta.colors.surfaceWarning,
56+
color: zeta.colors.surface.warning,
5757
),
5858
message:
5959
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
@@ -71,7 +71,7 @@ class DialogExample extends StatelessWidget {
7171
title: 'Dialog Title',
7272
icon: ZetaIcon(
7373
ZetaIcons.warning,
74-
color: zeta.colors.surfaceWarning,
74+
color: zeta.colors.surface.warning,
7575
),
7676
message:
7777
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',

‎example/lib/pages/components/list_item_example.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class _ListItemExampleState extends State<ListItemExample> {
2626
return ExampleScaffold(
2727
name: ListItemExample.name,
2828
child: Container(
29-
color: zetaColors.surfaceSecondary,
29+
color: zetaColors.surface.secondary,
3030
child: SingleChildScrollView(
3131
child: Padding(
3232
padding: const EdgeInsets.all(16),

‎example/lib/pages/components/navigation_rail_example.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ class _NavigationRailExampleState extends State<NavigationRailExample> {
6363
_titles[_selectedIndex!],
6464
textAlign: TextAlign.center,
6565
style: ZetaTextStyles.titleMedium.copyWith(
66-
color: zeta.colors.textDefault,
66+
color: zeta.colors.main.defaultColor,
6767
fontWeight: FontWeight.bold,
6868
),
6969
),

‎example/lib/pages/components/top_app_bar_example.dart

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
4343
return ExampleScaffold(
4444
name: TopAppBarExample.name,
4545
child: ColoredBox(
46-
color: colors.surfaceSecondary,
46+
color: colors.surface.warm,
4747
child: SingleChildScrollView(
4848
child: Column(
4949
children: [
@@ -178,7 +178,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
178178
child: Container(
179179
width: 800,
180180
height: 800,
181-
color: Zeta.of(context).colors.surfaceSecondary,
181+
color: Zeta.of(context).colors.surface.selectedHover,
182182
child: CustomPaint(
183183
painter: Painter(zeta: Zeta.of(context)),
184184
size: Size(800, 800),
@@ -220,7 +220,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
220220
child: Container(
221221
width: 800,
222222
height: 800,
223-
color: Zeta.of(context).colors.surfaceSecondary,
223+
color: Zeta.of(context).colors.surface.selectedHover,
224224
child: CustomPaint(
225225
painter: Painter(zeta: Zeta.of(context)),
226226
size: Size(800, 800),
@@ -249,7 +249,7 @@ class Painter extends CustomPainter {
249249
var p1 = Offset(i, -10);
250250
var p2 = Offset(800 + i, 810);
251251
var paint = Paint()
252-
..color = zeta.colors.primary
252+
..color = zeta.colors.surface.defaultColor
253253
..strokeWidth = zeta.spacing.minimum;
254254
canvas.drawLine(p1, p2, paint);
255255
}

‎example/lib/pages/theme/color_example.dart

+91-91
Original file line numberDiff line numberDiff line change
@@ -21,112 +21,112 @@ class _ColorExampleState extends State<ColorExample> {
2121
return LayoutBuilder(
2222
builder: (context, constraints) {
2323
final Map<String, ZetaColorSwatch> swatches = {
24-
'Blue': colors.blue,
25-
'Green': colors.green,
26-
'Red': colors.red,
27-
'Orange': colors.orange,
28-
'Purple': colors.purple,
29-
'Yellow': colors.yellow,
30-
'Teal': colors.teal,
31-
'Pink': colors.pink,
32-
'Grey Warm': colors.warm,
33-
'Grey Cool': colors.cool,
24+
// 'Blue': colors.blue,
25+
// 'Green': colors.green,
26+
// 'Red': colors.red,
27+
// 'Orange': colors.orange,
28+
// 'Purple': colors.purple,
29+
// 'Yellow': colors.yellow,
30+
// 'Teal': colors.teal,
31+
// 'Pink': colors.pink,
32+
// 'Grey Warm': colors.warm,
33+
// 'Grey Cool': colors.cool,
3434
};
3535

3636
final Map<String, ZetaColorSwatch> generatedSwatches = {
37-
'Gen-Blue': ZetaColorSwatch.fromColor(
38-
colors.blue,
39-
brightness: zeta.brightness,
40-
contrast: colors.contrast,
41-
),
42-
'Blue': colors.blue,
43-
'Gen-Green': ZetaColorSwatch.fromColor(
44-
colors.green,
45-
brightness: zeta.brightness,
46-
contrast: colors.contrast,
47-
),
48-
'Green': colors.green,
49-
'Gen-Red': ZetaColorSwatch.fromColor(
50-
colors.red,
51-
brightness: zeta.brightness,
52-
contrast: colors.contrast,
53-
),
54-
'Red': colors.red,
55-
'Gen-Orange': ZetaColorSwatch.fromColor(
56-
colors.orange,
57-
brightness: zeta.brightness,
58-
contrast: colors.contrast,
59-
),
60-
'Orange': colors.orange,
61-
'Gen-Purple': ZetaColorSwatch.fromColor(
62-
colors.purple,
63-
brightness: zeta.brightness,
64-
contrast: colors.contrast,
65-
),
66-
'Purple': colors.purple,
67-
'Gen-Yellow': ZetaColorSwatch.fromColor(
68-
colors.yellow,
69-
brightness: zeta.brightness,
70-
contrast: colors.contrast,
71-
),
72-
'Yellow': colors.yellow,
73-
'Gen-Teal': ZetaColorSwatch.fromColor(
74-
colors.teal,
75-
brightness: zeta.brightness,
76-
contrast: colors.contrast,
77-
),
78-
'Teal': colors.teal,
79-
'Gen-Pink': ZetaColorSwatch.fromColor(
80-
colors.pink,
81-
brightness: zeta.brightness,
82-
contrast: colors.contrast,
83-
),
84-
'Pink': colors.pink,
85-
'Gen-Grey Warm': ZetaColorSwatch.fromColor(
86-
colors.warm,
87-
brightness: zeta.brightness,
88-
contrast: colors.contrast,
89-
),
90-
'Grey Warm': colors.warm,
91-
'Gen-Grey Cool': ZetaColorSwatch.fromColor(
92-
colors.cool,
93-
brightness: zeta.brightness,
94-
contrast: colors.contrast,
95-
),
96-
'Grey Cool': colors.cool,
37+
// 'Gen-Blue': ZetaColorSwatch.fromColor(
38+
// colors.blue,
39+
// brightness: zeta.brightness,
40+
// contrast: colors.contrast,
41+
// ),
42+
// 'Blue': colors.blue,
43+
// 'Gen-Green': ZetaColorSwatch.fromColor(
44+
// colors.green,
45+
// brightness: zeta.brightness,
46+
// contrast: colors.contrast,
47+
// ),
48+
// 'Green': colors.green,
49+
// 'Gen-Red': ZetaColorSwatch.fromColor(
50+
// colors.red,
51+
// brightness: zeta.brightness,
52+
// contrast: colors.contrast,
53+
// ),
54+
// 'Red': colors.red,
55+
// 'Gen-Orange': ZetaColorSwatch.fromColor(
56+
// colors.orange,
57+
// brightness: zeta.brightness,
58+
// contrast: colors.contrast,
59+
// ),
60+
// 'Orange': colors.orange,
61+
// 'Gen-Purple': ZetaColorSwatch.fromColor(
62+
// colors.purple,
63+
// brightness: zeta.brightness,
64+
// contrast: colors.contrast,
65+
// ),
66+
// 'Purple': colors.purple,
67+
// 'Gen-Yellow': ZetaColorSwatch.fromColor(
68+
// colors.yellow,
69+
// brightness: zeta.brightness,
70+
// contrast: colors.contrast,
71+
// ),
72+
// 'Yellow': colors.yellow,
73+
// 'Gen-Teal': ZetaColorSwatch.fromColor(
74+
// colors.teal,
75+
// brightness: zeta.brightness,
76+
// contrast: colors.contrast,
77+
// ),
78+
// 'Teal': colors.teal,
79+
// 'Gen-Pink': ZetaColorSwatch.fromColor(
80+
// colors.pink,
81+
// brightness: zeta.brightness,
82+
// contrast: colors.contrast,
83+
// ),
84+
// 'Pink': colors.pink,
85+
// 'Gen-Grey Warm': ZetaColorSwatch.fromColor(
86+
// colors.warm,
87+
// brightness: zeta.brightness,
88+
// contrast: colors.contrast,
89+
// ),
90+
// 'Grey Warm': colors.warm,
91+
// 'Gen-Grey Cool': ZetaColorSwatch.fromColor(
92+
// colors.cool,
93+
// brightness: zeta.brightness,
94+
// contrast: colors.contrast,
95+
// ),
96+
// 'Grey Cool': colors.cool,
9797
};
9898

9999
final Map<String, Color> textIcon = {
100-
'textDefault': colors.textDefault,
101-
'textSubtle': colors.textSubtle,
102-
'textDisabled': colors.textDisabled,
103-
'textInverse': colors.textInverse,
100+
'main.defaultColor': colors.main.defaultColor,
101+
'main.subtle': colors.main.subtle,
102+
'main.disabled': colors.main.disabled,
103+
'main.inverse': colors.main.inverse,
104104
};
105105
final Map<String, Color> border = {
106-
'borderDefault': colors.borderDefault,
107-
'borderSubtle': colors.borderSubtle,
108-
'borderDisabled': colors.borderDisabled,
109-
'borderSelected': colors.borderSelected,
106+
'border.defaultColor': colors.border.defaultColor,
107+
'border.subtle': colors.border.subtle,
108+
'border.disabled': colors.border.disabled,
109+
'border.selected': colors.border.selected,
110110
};
111111
final Map<String, Color> backdrop = {
112-
'surfacePrimary': colors.surfacePrimary,
113-
'surfaceDisabled': colors.surfaceDisabled,
114-
'surfaceHover': colors.surfaceHover,
115-
'surfaceSecondary': colors.surfaceSecondary,
116-
'surfaceTertiary': colors.surfaceTertiary,
117-
'surfaceSelectedHover': colors.surfaceSelectedHover,
118-
'surfaceSelected': colors.surfaceSelected,
112+
'surface.primary': colors.surface.primary,
113+
'surface.disabled': colors.surface.disabled,
114+
'surface.hover': colors.surface.hover,
115+
'surface.secondary': colors.surface.secondary,
116+
// 'surfaceTertiary': colors.surfaceTertiary,
117+
'surface.selectedHover': colors.surface.selectedHover,
118+
'surface.selected': colors.surface.selected,
119119
};
120120

121121
final Map<String, Color> primaries = {
122-
'primaryColor': colors.primary.text,
123-
'secondaryColor': colors.secondary.text,
122+
'primaryColor': colors.main.primary,
123+
'secondaryColor': colors.main.secondary,
124124
};
125125

126126
final Map<String, Color> alerts = {
127-
'negative': colors.surfaceNegative,
128-
'warning': colors.surfaceWarning,
129-
'info': colors.surfaceInfo,
127+
'negative': colors.surface.negative,
128+
'warning': colors.surface.warning,
129+
'info': colors.surface.info,
130130
};
131131

132132
return ExampleScaffold(
@@ -187,7 +187,7 @@ class _ColorExampleState extends State<ColorExample> {
187187
(e) => Expanded(
188188
child: Container(
189189
height: constraints.maxWidth / 10,
190-
color: e == 110 ? colors.surfacePrimary : value.value[e],
190+
color: e == 110 ? colors.surface.primary : value.value[e],
191191
child: e == 110
192192
? Nothing()
193193
: FittedBox(

0 commit comments

Comments
 (0)