@@ -2,114 +2,194 @@ import 'package:flutter/material.dart';
22import 'package:zeta_example/pages/theme/color_example.dart' ;
33import 'package:zeta_flutter/zeta_flutter.dart' ;
44
5+ import '../../utils/scaffold.dart' ;
6+
57Widget colorUseCase (BuildContext context) => ColorBody ();
68
79class ColorBody extends StatelessWidget {
810 const ColorBody ({super .key});
911
1012 @override
1113 Widget build (BuildContext context) {
12- return LayoutBuilder (builder: (_, constraints) {
13- final colors = Zeta .of (context).colors;
14+ final colors = Zeta .of (context).colors;
1415
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,
2629 };
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,
3234 };
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,
3848 };
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,
4763 };
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,
4977 'positive' : colors.surface.positive,
50- 'negative ' : colors.surface.negative ,
78+ 'positiveSubtle ' : colors.surface.positiveSubtle ,
5179 'warning' : colors.surface.warning,
80+ 'warningSubtle' : colors.surface.warningSubtle,
81+ 'negative' : colors.surface.negative,
82+ 'negativeSubtle' : colors.surface.negativeSubtle,
5283 '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,
53139 };
54140
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 (),
111176 ),
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+ ],
113193 ),
114194 );
115195 });
0 commit comments