@@ -2,114 +2,194 @@ import 'package:flutter/material.dart';
2
2
import 'package:zeta_example/pages/theme/color_example.dart' ;
3
3
import 'package:zeta_flutter/zeta_flutter.dart' ;
4
4
5
+ import '../../utils/scaffold.dart' ;
6
+
5
7
Widget colorUseCase (BuildContext context) => ColorBody ();
6
8
7
9
class ColorBody extends StatelessWidget {
8
10
const ColorBody ({super .key});
9
11
10
12
@override
11
13
Widget build (BuildContext context) {
12
- return LayoutBuilder (builder: (_, constraints) {
13
- final colors = Zeta .of (context).colors;
14
+ final colors = Zeta .of (context).colors;
14
15
15
- final Map <String , ZetaColorSwatch > swatches = {
16
- // 'Blue': colors.blue,
17
- // 'Green': colors.green,
18
- // 'Red': colors.red,
19
- // 'Orange': colors.orange,
20
- // 'Purple': colors.purple,
21
- // 'Yellow': colors.yellow,
22
- // 'Teal': colors.teal,
23
- // 'Pink': colors.pink,
24
- // 'Grey Warm': colors.warm,
25
- // 'Grey Cool': colors.cool,
16
+ return WidgetbookScaffold (builder: (context, constraints) {
17
+ final blockSize = constraints.maxWidth / 11 ;
18
+ final Map <String , ZetaColorSwatch > primitives = {
19
+ 'cool' : colors.primitives.cool,
20
+ 'warm' : colors.primitives.warm,
21
+ 'blue' : colors.primitives.blue,
22
+ 'green' : colors.primitives.green,
23
+ 'red' : colors.primitives.red,
24
+ 'orange' : colors.primitives.orange,
25
+ 'purple' : colors.primitives.purple,
26
+ 'yellow' : colors.primitives.yellow,
27
+ 'teal' : colors.primitives.teal,
28
+ 'pink' : colors.primitives.pink,
26
29
};
27
- final Map <String , Color > textIcon = {
28
- 'main.defaultColor' : colors.main.defaultColor,
29
- 'main.subtle' : colors.main.subtle,
30
- 'main.disabled' : colors.main.disabled,
31
- 'main.inverse' : colors.main.inverse,
30
+ final Map <String , Color > primitivesPure = {
31
+ 'white' : colors.primitives.pure.shade0,
32
+ 'mid' : colors.primitives.pure.shade500,
33
+ 'black' : colors.primitives.pure.shade1000,
32
34
};
33
- final Map <String , Color > border = {
34
- 'border.defaultColor' : colors.border.defaultColor,
35
- 'border.subtle' : colors.border.subtle,
36
- 'border.disabled' : colors.border.disabled,
37
- 'border.selected' : colors.border.selected,
35
+
36
+ final Map <String , Color > mainColors = {
37
+ 'defaultColor' : colors.main.defaultColor,
38
+ 'subtle' : colors.main.subtle,
39
+ 'light' : colors.main.light,
40
+ 'inverse' : colors.main.inverse,
41
+ 'disabled' : colors.main.disabled,
42
+ 'primary' : colors.main.primary,
43
+ 'secondary' : colors.main.secondary,
44
+ 'positive' : colors.main.positive,
45
+ 'warning' : colors.main.warning,
46
+ 'negative' : colors.main.negative,
47
+ 'info' : colors.main.info,
38
48
};
39
- final Map <String , Color > backdrop = {
40
- 'surface.primary' : colors.surface.primary,
41
- 'surface.disabled' : colors.surface.disabled,
42
- 'surface.hover' : colors.surface.hover,
43
- 'surface.secondary' : colors.surface.secondary,
44
- // 'surfaceTertiary': colors.surfaceTertiary,
45
- 'surface.selectedHover' : colors.surface.selectedHover,
46
- 'surface.selected' : colors.surface.selected,
49
+ final Map <String , Color > borderColors = {
50
+ 'defaultColor' : colors.border.defaultColor,
51
+ 'subtle' : colors.border.subtle,
52
+ 'hover' : colors.border.hover,
53
+ 'selected' : colors.border.selected,
54
+ 'disabled' : colors.border.disabled,
55
+ 'pure' : colors.border.pure,
56
+ 'primaryMain' : colors.border.primaryMain,
57
+ 'primary' : colors.border.primary,
58
+ 'secondary' : colors.border.secondary,
59
+ 'positive' : colors.border.positive,
60
+ 'warning' : colors.border.warning,
61
+ 'negative' : colors.border.negative,
62
+ 'info' : colors.border.info,
47
63
};
48
- final Map <String , Color > alerts = {
64
+ final Map <String , Color > surfaceColors = {
65
+ 'defaultColor' : colors.surface.defaultColor,
66
+ 'defaultInverse' : colors.surface.defaultInverse,
67
+ 'hover' : colors.surface.hover,
68
+ 'selected' : colors.surface.selected,
69
+ 'selectedHover' : colors.surface.selectedHover,
70
+ 'disabled' : colors.surface.disabled,
71
+ 'cool' : colors.surface.cool,
72
+ 'warm' : colors.surface.warm,
73
+ 'primary' : colors.surface.primary,
74
+ 'primarySubtle' : colors.surface.primarySubtle,
75
+ 'secondary' : colors.surface.secondary,
76
+ 'secondarySubtle' : colors.surface.secondarySubtle,
49
77
'positive' : colors.surface.positive,
50
- 'negative ' : colors.surface.negative ,
78
+ 'positiveSubtle ' : colors.surface.positiveSubtle ,
51
79
'warning' : colors.surface.warning,
80
+ 'warningSubtle' : colors.surface.warningSubtle,
81
+ 'negative' : colors.surface.negative,
82
+ 'negativeSubtle' : colors.surface.negativeSubtle,
52
83
'info' : colors.surface.info,
84
+ 'infoSubtle' : colors.surface.infoSubtle,
85
+ };
86
+ final Map <String , Color > avatarColors = {
87
+ 'blue' : colors.surface.avatar.blue,
88
+ 'green' : colors.surface.avatar.green,
89
+ 'orange' : colors.surface.avatar.orange,
90
+ 'pink' : colors.surface.avatar.pink,
91
+ 'purple' : colors.surface.avatar.purple,
92
+ 'teal' : colors.surface.avatar.teal,
93
+ 'yellow' : colors.surface.avatar.yellow,
94
+ };
95
+ final Map <String , Color > disabled = {
96
+ 'disabled' : colors.state.disabled.disabled,
97
+ };
98
+ final Map <String , Color > defaultColors = {
99
+ 'enabled' : colors.state.defaultColor.enabled,
100
+ 'hover' : colors.state.defaultColor.hover,
101
+ 'selected' : colors.state.defaultColor.selected,
102
+ 'focus' : colors.state.defaultColor.focus,
103
+ };
104
+ final Map <String , Color > primary = {
105
+ 'enabled' : colors.state.primary.enabled,
106
+ 'hover' : colors.state.primary.hover,
107
+ 'selected' : colors.state.primary.selected,
108
+ 'focus' : colors.state.primary.focus,
109
+ };
110
+ final Map <String , Color > secondary = {
111
+ 'enabled' : colors.state.secondary.enabled,
112
+ 'hover' : colors.state.secondary.hover,
113
+ 'selected' : colors.state.secondary.selected,
114
+ 'focus' : colors.state.secondary.focus,
115
+ };
116
+ final Map <String , Color > positive = {
117
+ 'enabled' : colors.state.positive.enabled,
118
+ 'hover' : colors.state.positive.hover,
119
+ 'selected' : colors.state.positive.selected,
120
+ 'focus' : colors.state.positive.focus,
121
+ };
122
+ final Map <String , Color > negative = {
123
+ 'enabled' : colors.state.negative.enabled,
124
+ 'hover' : colors.state.negative.hover,
125
+ 'selected' : colors.state.negative.selected,
126
+ 'focus' : colors.state.negative.focus,
127
+ };
128
+ final Map <String , Color > info = {
129
+ 'enabled' : colors.state.info.enabled,
130
+ 'hover' : colors.state.info.hover,
131
+ 'selected' : colors.state.info.selected,
132
+ 'focus' : colors.state.info.focus,
133
+ };
134
+ final Map <String , Color > inverse = {
135
+ 'enabled' : colors.state.inverse.enabled,
136
+ 'hover' : colors.state.inverse.hover,
137
+ 'selected' : colors.state.inverse.selected,
138
+ 'focus' : colors.state.inverse.focus,
53
139
};
54
140
55
- return DefaultTextStyle (
56
- style: ZetaTextStyles .displayMedium.apply (
57
- color: Zeta .of (context).colors.main.defaultColor,
58
- decoration: TextDecoration .none,
59
- ),
60
- child: Container (
61
- padding: EdgeInsets .symmetric (horizontal: Zeta .of (context).spacing.xl_4),
62
- child: SingleChildScrollView (
63
- key: PageStorageKey (0 ),
64
- child: Column (
65
- children: [
66
- SizedBox (height: Zeta .of (context).spacing.xl_4),
67
- MyRow (children: textIcon, title: 'Text and icon styles' ),
68
- MyRow (children: border, title: 'Border styles' ),
69
- MyRow (children: backdrop, title: 'Backdrop colors' ),
70
- MyRow (children: alerts, title: 'Alert colors' ),
71
- Row (children: [Text ('Full color swatches' )]).paddingVertical (Zeta .of (context).spacing.xl_4),
72
- ...swatches.entries.map (
73
- (value) {
74
- return Row (
75
- children: List .generate (10 , (index) => 100 - (10 * index)).map (
76
- (e) {
77
- return Expanded (
78
- child: Container (
79
- height: constraints.maxWidth / 10 ,
80
- color: value.value[e],
81
- child: FittedBox (
82
- fit: BoxFit .scaleDown,
83
- child: Column (
84
- mainAxisAlignment: MainAxisAlignment .spaceEvenly,
85
- children: [
86
- DefaultTextStyle (
87
- style: ZetaTextStyles .bodyMedium.copyWith (
88
- color: calculateTextColor (value.value[e] ?? Colors .white),
89
- ),
90
- child: Column (
91
- children: [
92
- Text ('${value .key .toLowerCase ().replaceAll (' ' , '' )}-$e ' ),
93
- Text (
94
- value.value[e].toString ().replaceAll ('Color(0xff' , '#' ).substring (0 , 7 ),
95
- ),
96
- ],
97
- ),
98
- ),
99
- ],
100
- ),
101
- ),
102
- ),
103
- );
104
- },
105
- ).toList (),
106
- );
107
- },
108
- ),
109
- SizedBox (height: Zeta .of (context).spacing.xl_4),
110
- ],
141
+ return SingleChildScrollView (
142
+ padding: EdgeInsets .all (Zeta .of (context).spacing.medium),
143
+ child: Column (
144
+ children: [
145
+ Text ('Semantic colors' , style: ZetaTextStyles .displaySmall),
146
+ MyRow (children: mainColors, title: 'Main Colors' ),
147
+ MyRow (children: borderColors, title: 'Main Colors' ),
148
+ MyRow (children: surfaceColors, title: 'Surface Colors' ),
149
+ MyRow (children: avatarColors, title: 'Surface / Avatar Colors' ),
150
+ MyRow (children: disabled, title: 'State / disabled Colors' ),
151
+ MyRow (children: defaultColors, title: 'State / default Colors' ),
152
+ MyRow (children: primary, title: 'State / primary Colors' ),
153
+ MyRow (children: secondary, title: 'State / secondary Colors' ),
154
+ MyRow (children: positive, title: 'State / positive Colors' ),
155
+ MyRow (children: negative, title: 'State / negative Colors' ),
156
+ MyRow (children: info, title: 'State / info Colors' ),
157
+ MyRow (children: inverse, title: 'State / inverse Colors' ),
158
+ Row (children: [
159
+ Text ('Full color swatches' , style: ZetaTextStyles .displayMedium),
160
+ ]).paddingVertical (Zeta .of (context).spacing.xl_4),
161
+ Row (
162
+ children: primitivesPure.entries
163
+ .map (
164
+ (value) => SwatchBox (
165
+ color: value.value,
166
+ name: 'pure' ,
167
+ blockSize: blockSize,
168
+ value: value.key == 'mid'
169
+ ? 500
170
+ : value.key == 'white'
171
+ ? 0
172
+ : 1000 ,
173
+ ),
174
+ )
175
+ .toList (),
111
176
),
112
- ),
177
+ ...primitives.entries
178
+ .map (
179
+ (value) => Row (
180
+ children: List .generate (10 , (index) => 100 - (10 * index))
181
+ .map (
182
+ (e) => SwatchBox (
183
+ color: value.value[e] ?? Colors .white,
184
+ name: value.key,
185
+ blockSize: blockSize,
186
+ value: e,
187
+ ),
188
+ )
189
+ .toList ()),
190
+ )
191
+ .toList (),
192
+ ],
113
193
),
114
194
);
115
195
});
0 commit comments