From d22898f7e77704b5a4dd628320662530f1c2a1b4 Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Tue, 27 Aug 2024 15:13:19 +0100 Subject: [PATCH] fix(UX-1141): Update Spacing tokens (#159) --- example/lib/pages/assets/icons_example.dart | 11 +- .../pages/components/accordion_example.dart | 2 +- .../lib/pages/components/avatar_example.dart | 38 +++--- .../lib/pages/components/badges_example.dart | 30 ++--- .../components/bottom_sheet_example.dart | 2 +- .../lib/pages/components/button_example.dart | 12 +- .../pages/components/chat_item_example.dart | 2 +- .../lib/pages/components/chip_example.dart | 6 +- .../lib/pages/components/dialpad_example.dart | 2 +- .../components/filter_selection_example.dart | 2 +- .../components/global_header_example.dart | 2 +- .../components/navigation_rail_example.dart | 2 +- .../components/notification_list_example.dart | 2 +- .../pages/components/pagination_example.dart | 2 +- .../components/password_input_example.dart | 6 +- .../components/segmented_control_example.dart | 6 +- .../pages/components/snackbar_example.dart | 20 ++-- .../lib/pages/components/stepper_example.dart | 2 +- .../lib/pages/components/tabs_example.dart | 4 +- .../lib/pages/components/tooltip_example.dart | 8 +- .../pages/components/top_app_bar_example.dart | 16 +-- example/lib/pages/theme/color_example.dart | 10 +- example/lib/pages/theme/radius_example.dart | 6 +- example/lib/pages/theme/spacing_example.dart | 81 ++++++------- .../lib/pages/theme/typography_example.dart | 6 +- example/lib/utils/rounded_switch.dart | 2 +- example/lib/utils/theme_constrast_switch.dart | 2 +- .../pages/assets/icon_widgetbook.dart | 12 +- .../components/accordion_widgetbook.dart | 2 +- .../pages/components/badges_widgetbook.dart | 10 +- .../pages/components/banner_widgetbook.dart | 2 +- .../components/bottom_sheet_widgetbook.dart | 8 +- .../pages/components/button_widgetbook.dart | 4 +- .../components/chat_item_widgetbook.dart | 2 +- .../components/date_input_widgetbook.dart | 2 +- .../pages/components/dialog_widgetbook.dart | 2 +- .../filter_selection_widgetbook.dart | 2 +- .../components/in_page_banner_widgetbook.dart | 2 +- .../navigation_rail_widgetbook.dart | 2 +- .../components/phone_input_widgetbook.dart | 2 +- .../pages/components/progress_widgetbook.dart | 2 +- .../pages/components/radio_widgetbook.dart | 4 +- .../components/search_bar_widgetbook.dart | 4 +- .../segmented_control_widgetbook.dart | 4 +- .../components/select_input_widgetbook.dart | 2 +- .../pages/components/stepper_widgetbook.dart | 2 +- .../pages/components/switch_widgetbook.dart | 2 +- .../pages/components/tabs_widgetbook.dart | 4 +- .../components/text_input_widgetbook.dart | 2 +- .../components/time_input_widgetbook.dart | 2 +- .../pages/components/tooltip_widgetbook.dart | 2 +- .../components/top_app_bar_widgetbook.dart | 10 +- example/widgetbook/pages/introduction.dart | 22 ++-- .../pages/theme/color_widgetbook.dart | 8 +- .../pages/theme/radius_widgetbook.dart | 2 +- .../pages/theme/spacing_widgetbook.dart | 111 +++++++++--------- .../pages/theme/typography_widgetbook.dart | 2 +- lib/src/components/accordion/accordion.dart | 14 +-- lib/src/components/avatars/avatar.dart | 72 ++++++------ lib/src/components/badges/indicator.dart | 43 ++++--- lib/src/components/badges/label.dart | 2 +- lib/src/components/badges/priority_pill.dart | 8 +- lib/src/components/badges/status_label.dart | 9 +- lib/src/components/badges/tag.dart | 30 ++--- lib/src/components/banner/banner.dart | 4 +- .../bottom sheets/bottom_sheet.dart | 27 +++-- .../components/bottom sheets/menu_items.dart | 23 ++-- .../components/breadcrumbs/breadcrumbs.dart | 28 ++--- .../components/button_group/button_group.dart | 14 +-- lib/src/components/buttons/button.dart | 36 +++--- lib/src/components/buttons/button_style.dart | 4 +- lib/src/components/buttons/icon_button.dart | 20 ++-- .../components/buttons/input_icon_button.dart | 22 ++-- lib/src/components/chat_item/chat_item.dart | 46 ++++---- lib/src/components/checkbox/checkbox.dart | 12 +- lib/src/components/chips/chip.dart | 32 +++-- .../components/contact_item/contact_item.dart | 10 +- lib/src/components/dial_pad/dial_pad.dart | 11 +- lib/src/components/dialog/dialog.dart | 42 ++++--- lib/src/components/dropdown/dropdown.dart | 19 +-- lib/src/components/fabs/fab.dart | 40 ++++--- .../filter_selection/filter_selection.dart | 10 +- .../global_header/global_header.dart | 27 +++-- .../global_header/header_tab_item.dart | 4 +- .../in_page_banner/in_page_banner.dart | 93 ++++++++------- lib/src/components/list_item/list_item.dart | 18 +-- .../list_item/notification_list_item.dart | 19 +-- .../navigation bar/navigation_bar.dart | 49 ++++---- .../navigation_rail/navigation_rail.dart | 41 +++---- lib/src/components/pagination/pagination.dart | 42 +++---- .../components/phone_input/phone_input.dart | 23 ++-- lib/src/components/progress/progress_bar.dart | 6 +- .../components/progress/progress_circle.dart | 35 +++--- lib/src/components/radio/radio.dart | 19 +-- lib/src/components/search_bar/search_bar.dart | 34 +++--- .../segmented_control/segmented_control.dart | 18 +-- .../components/select_input/select_input.dart | 2 +- lib/src/components/slider/slider.dart | 8 +- lib/src/components/snack_bar/snack_bar.dart | 22 ++-- lib/src/components/stepper/stepper.dart | 34 +++--- .../stepper_input/stepper_input.dart | 8 +- .../components/switch/material_switch.dart | 2 +- lib/src/components/switch/zeta_switch.dart | 2 +- lib/src/components/tabs/tab.dart | 45 +++---- lib/src/components/tabs/tab_bar.dart | 2 +- lib/src/components/text_input/hint_text.dart | 8 +- .../components/text_input/input_label.dart | 2 +- .../text_input/internal_text_input.dart | 32 ++--- lib/src/components/tooltip/tooltip.dart | 14 +-- .../top_app_bar/extended_top_app_bar.dart | 34 +++--- .../top_app_bar/search_top_app_bar.dart | 6 +- .../components/top_app_bar/top_app_bar.dart | 10 +- lib/src/theme/tokens.dart | 9 ++ lib/src/utils/zeta.dart | 6 +- test/src/components/button/button_test.dart | 2 +- test/src/components/fabs/fab_test.dart | 2 +- .../tooltip/tooltip_test.mocks.dart | 47 ++++++-- test/src/utils/extensions_test.mocks.dart | 31 ++++- test/src/utils/rounded_test.mocks.dart | 47 ++++++-- test/src/zeta_test.dart | 3 + 120 files changed, 1045 insertions(+), 860 deletions(-) diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart index 1cd26927..e33d29de 100644 --- a/example/lib/pages/assets/icons_example.dart +++ b/example/lib/pages/assets/icons_example.dart @@ -25,12 +25,13 @@ class _IconsExampleState extends State { child: Center( child: Column( children: [ - Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4), + Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium) + .paddingAll(Zeta.of(context).spacing.xl_4), Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium) - .paddingAll(ZetaSpacing.xl_4), + .paddingAll(Zeta.of(context).spacing.xl_4), Wrap( - spacing: ZetaSpacing.xl_4, - runSpacing: ZetaSpacing.xl_4, + spacing: Zeta.of(context).spacing.xl_4, + runSpacing: Zeta.of(context).spacing.xl_4, children: icons.entries.map( (e) { final nameArr = (e.key.split('_')).join(' ').capitalize(); @@ -57,7 +58,7 @@ class _IconsExampleState extends State { fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp, fontPackage: ZetaIcons.package, ), - size: ZetaSpacing.xl_6, + size: Zeta.of(context).spacing.xl_6, ), Text( nameArr, diff --git a/example/lib/pages/components/accordion_example.dart b/example/lib/pages/components/accordion_example.dart index 669835c8..2b34974f 100644 --- a/example/lib/pages/components/accordion_example.dart +++ b/example/lib/pages/components/accordion_example.dart @@ -12,7 +12,7 @@ class AccordionExample extends StatelessWidget { return ExampleScaffold( name: AccordionExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( children: [ Text('Divider'), diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart index de548db9..990f3c68 100644 --- a/example/lib/pages/components/avatar_example.dart +++ b/example/lib/pages/components/avatar_example.dart @@ -22,7 +22,7 @@ class AvatarExample extends StatelessWidget { child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( children: [ Column( @@ -36,7 +36,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -121,7 +121,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -181,7 +181,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -272,7 +272,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -334,7 +334,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -425,7 +425,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -487,7 +487,7 @@ class AvatarExample extends StatelessWidget { children: [ Column( children: ZetaAvatarSize.values.map((size) { - final height = size.pixelSize; + final height = size.pixelSize(context); final padding = (height - 14) / 2; return Column( children: [ @@ -572,7 +572,7 @@ class AvatarExample extends StatelessWidget { ), ], ), - ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(), ), ), ), @@ -581,26 +581,26 @@ class AvatarExample extends StatelessWidget { } extension on ZetaAvatarSize { - double get pixelSize { + double pixelSize(BuildContext context) { switch (this) { case ZetaAvatarSize.xxxl: - return ZetaSpacingBase.x50; + return Zeta.of(context).spacing.minimum * 50; case ZetaAvatarSize.xxl: - return ZetaSpacingBase.x30; + return Zeta.of(context).spacing.minimum * 30; case ZetaAvatarSize.xl: - return ZetaSpacing.xl_10; + return Zeta.of(context).spacing.xl_10; case ZetaAvatarSize.l: - return ZetaSpacing.xl_9; + return Zeta.of(context).spacing.xl_9; case ZetaAvatarSize.m: - return ZetaSpacing.xl_8; + return Zeta.of(context).spacing.xl_8; case ZetaAvatarSize.s: - return ZetaSpacing.xl_6; + return Zeta.of(context).spacing.xl_6; case ZetaAvatarSize.xs: - return ZetaSpacing.xl_5; + return Zeta.of(context).spacing.xl_5; case ZetaAvatarSize.xxs: - return ZetaSpacing.xl_4; + return Zeta.of(context).spacing.xl_4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.xl_2; + return Zeta.of(context).spacing.xl_2; } } } diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index e183b271..9622b2b0 100644 --- a/example/lib/pages/components/badges_example.dart +++ b/example/lib/pages/components/badges_example.dart @@ -20,7 +20,7 @@ class BadgesExample extends StatelessWidget { _StatusLabel(), _DividingText('Priority Pill'), _PriorityPill(ZetaPriorityPillSize.large), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), _PriorityPill(ZetaPriorityPillSize.small), _DividingText('Label'), _Label(), @@ -28,7 +28,7 @@ class BadgesExample extends StatelessWidget { _Indicators(), _DividingText('Tags'), _Tags(), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ], ), ), @@ -45,7 +45,7 @@ class _DividingText extends StatelessWidget { return Text( text, style: ZetaTextStyles.displayMedium, - ).paddingVertical(ZetaSpacing.xl_4); + ).paddingVertical(Zeta.of(context).spacing.xl_4); } } @@ -72,7 +72,7 @@ class _StatusLabel extends StatelessWidget { statusLabelExampleRow(ZetaWidgetStatus.positive), statusLabelExampleRow(ZetaWidgetStatus.warning), statusLabelExampleRow(ZetaWidgetStatus.negative), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ); } } @@ -94,7 +94,7 @@ class _PriorityPill extends StatelessWidget { ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.high), ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.medium), ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.low), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -103,7 +103,7 @@ class _PriorityPill extends StatelessWidget { ZetaPriorityPill(size: size, type: ZetaPriorityPillType.high), ZetaPriorityPill(size: size, type: ZetaPriorityPillType.medium), ZetaPriorityPill(size: size, type: ZetaPriorityPillType.low), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), ], ); @@ -132,7 +132,7 @@ class _Label extends StatelessWidget { badgeExampleRow(ZetaWidgetStatus.warning), badgeExampleRow(ZetaWidgetStatus.negative), badgeExampleRow(ZetaWidgetStatus.neutral), - ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(), ); } } @@ -164,23 +164,23 @@ class _Indicators extends StatelessWidget { ZetaIndicator.icon(), ZetaIndicator.icon(size: ZetaWidgetSize.medium), ZetaIndicator.icon(size: ZetaWidgetSize.small), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), Row( children: [ ZetaIndicator.icon(inverse: true), ZetaIndicator.icon(size: ZetaWidgetSize.medium, inverse: true), ZetaIndicator.icon(size: ZetaWidgetSize.small, inverse: true), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.small)).toList(), ), const SizedBox(width: 50), ], ), ], ), - const SizedBox.square(dimension: ZetaSpacing.xl_9), + SizedBox.square(dimension: Zeta.of(context).spacing.xl_9), Column( children: [ Text( @@ -200,16 +200,16 @@ class _Indicators extends StatelessWidget { ZetaIndicator.notification(value: 3), ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3), ZetaIndicator.notification(size: ZetaWidgetSize.small), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), Row( children: [ ZetaIndicator.notification(value: 3, inverse: true), ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3, inverse: true), ZetaIndicator.notification(size: ZetaWidgetSize.small, inverse: true), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.medium)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.medium)).toList(), ), ], ), @@ -232,7 +232,7 @@ class _Tags extends StatelessWidget { children: [ ZetaTag.left(label: 'Left'), ZetaTag.right(label: 'Right'), - ].divide(SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), ); } diff --git a/example/lib/pages/components/bottom_sheet_example.dart b/example/lib/pages/components/bottom_sheet_example.dart index 16d51987..6757fc34 100644 --- a/example/lib/pages/components/bottom_sheet_example.dart +++ b/example/lib/pages/components/bottom_sheet_example.dart @@ -19,7 +19,7 @@ class _BottomSheetExampleState extends State { return ExampleScaffold( name: BottomSheetExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( children: [ ZetaMenuItem.horizontal( diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart index 517d710c..926379d9 100644 --- a/example/lib/pages/components/button_example.dart +++ b/example/lib/pages/components/button_example.dart @@ -125,7 +125,7 @@ class _ButtonExampleState extends State { Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium), Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium), Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), ), ], @@ -151,10 +151,10 @@ class _ButtonExampleState extends State { size: ZetaWidgetSize.values[index == 0 ? 0 : index - 1], borderType: borderType, ), - ).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ).divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); + ).reversed.divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(); } List iconButtons(ZetaWidgetBorder? borderType) { @@ -175,10 +175,10 @@ class _ButtonExampleState extends State { ? ZetaIcons.delete : ZetaIcons.more_horizontal, ), - ).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), + ).divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); + ).reversed.divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(); } List groupButtons(ZetaWidgetBorder? ZetaWidgetBorder) { @@ -256,6 +256,6 @@ class _ButtonExampleState extends State { ), ], ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(); } } diff --git a/example/lib/pages/components/chat_item_example.dart b/example/lib/pages/components/chat_item_example.dart index 81263db7..a0d92f60 100644 --- a/example/lib/pages/components/chat_item_example.dart +++ b/example/lib/pages/components/chat_item_example.dart @@ -76,7 +76,7 @@ class ChatItemExample extends StatelessWidget { "Dummy text to represent the first lines of most recent message", ), ), - ].gap(ZetaSpacing.large), + ].gap(Zeta.of(context).spacing.large), ), ), ); diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart index 44231c66..72a96407 100644 --- a/example/lib/pages/components/chip_example.dart +++ b/example/lib/pages/components/chip_example.dart @@ -23,7 +23,7 @@ class _ChipExampleState extends State { const SizedBox(height: 10), ZetaInputChip( label: 'Label', - leading: const ZetaIcon(ZetaIcons.user), + leading: ZetaIcon(ZetaIcons.user), trailing: IconButton(icon: Icon(ZetaIcons.close), onPressed: () {}), ), ]); @@ -67,7 +67,7 @@ class _ChipExampleState extends State { return ExampleScaffold( name: ChipExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ @@ -79,7 +79,7 @@ class _ChipExampleState extends State { onAcceptWithDetails: (details) => setState(() => chipType = details.data), builder: (context, _, __) { return Container( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), color: colors.surfaceSelectedHover, height: 100, width: 200, diff --git a/example/lib/pages/components/dialpad_example.dart b/example/lib/pages/components/dialpad_example.dart index 09a5c783..c9546c95 100644 --- a/example/lib/pages/components/dialpad_example.dart +++ b/example/lib/pages/components/dialpad_example.dart @@ -84,7 +84,7 @@ class _DialPadExampleState extends State { borderType: ZetaWidgetBorder.full, onPressed: () => setState(() => number = text = ''), ) - ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), + ].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(), ), ), ), diff --git a/example/lib/pages/components/filter_selection_example.dart b/example/lib/pages/components/filter_selection_example.dart index e79cfaff..92213250 100644 --- a/example/lib/pages/components/filter_selection_example.dart +++ b/example/lib/pages/components/filter_selection_example.dart @@ -22,7 +22,7 @@ class _FilterSelectionExampleState extends State { name: FilterSelectionExample.name, child: Column( children: [ - const SizedBox(height: ZetaSpacing.large), + SizedBox(height: Zeta.of(context).spacing.large), ZetaFilterSelection( buttonSemanticLabel: 'Filter', items: [ diff --git a/example/lib/pages/components/global_header_example.dart b/example/lib/pages/components/global_header_example.dart index 5a1a2b9c..9346a881 100644 --- a/example/lib/pages/components/global_header_example.dart +++ b/example/lib/pages/components/global_header_example.dart @@ -42,7 +42,7 @@ class _GroupHeaderExampleState extends State { ], avatar: const ZetaAvatar(initials: 'PS'), ), - const SizedBox(height: ZetaSpacing.xl_1), + SizedBox(height: Zeta.of(context).spacing.xl), ZetaGlobalHeader(title: "Title", tabItems: childrenTwo), ]), ), diff --git a/example/lib/pages/components/navigation_rail_example.dart b/example/lib/pages/components/navigation_rail_example.dart index bb050ef1..f1429f9b 100644 --- a/example/lib/pages/components/navigation_rail_example.dart +++ b/example/lib/pages/components/navigation_rail_example.dart @@ -56,7 +56,7 @@ class _NavigationRailExampleState extends State { ), Expanded( child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: _selectedIndex == null ? const Nothing() : Text( diff --git a/example/lib/pages/components/notification_list_example.dart b/example/lib/pages/components/notification_list_example.dart index c675051b..5d259f41 100644 --- a/example/lib/pages/components/notification_list_example.dart +++ b/example/lib/pages/components/notification_list_example.dart @@ -38,7 +38,7 @@ class NotificationListItemExample extends StatelessWidget { onPressed: () {}, ), ), - ].gap(ZetaSpacing.xl_4), + ].gap(Zeta.of(context).spacing.xl_4), ), ); } diff --git a/example/lib/pages/components/pagination_example.dart b/example/lib/pages/components/pagination_example.dart index 7feeff1f..9754b96f 100644 --- a/example/lib/pages/components/pagination_example.dart +++ b/example/lib/pages/components/pagination_example.dart @@ -20,7 +20,7 @@ class _PaginationExampleState extends State { name: PaginationExample.name, child: Center( child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_9), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_9), child: Column( children: [ Expanded( diff --git a/example/lib/pages/components/password_input_example.dart b/example/lib/pages/components/password_input_example.dart index 4e9b5cf6..08e65203 100644 --- a/example/lib/pages/components/password_input_example.dart +++ b/example/lib/pages/components/password_input_example.dart @@ -60,11 +60,11 @@ class _PasswordInputExampleState extends State { ), ], ), - SizedBox(height: ZetaSpacing.xl_6), + SizedBox(height: Zeta.of(context).spacing.xl_6), ...passwordInputExampleRow(ZetaWidgetSize.large), - Divider(height: ZetaSpacing.xl_10), + Divider(height: Zeta.of(context).spacing.xl_10), ...passwordInputExampleRow(ZetaWidgetSize.medium), - Divider(height: ZetaSpacing.xl_10), + Divider(height: Zeta.of(context).spacing.xl_10), ...passwordInputExampleRow(ZetaWidgetSize.small), ], ), diff --git a/example/lib/pages/components/segmented_control_example.dart b/example/lib/pages/components/segmented_control_example.dart index ac69b3a4..099eff2b 100644 --- a/example/lib/pages/components/segmented_control_example.dart +++ b/example/lib/pages/components/segmented_control_example.dart @@ -28,7 +28,7 @@ class _SegmentedControlExampleState extends State { children: [ // Text Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaSegmentedControl( semanticLabel: 'Segmented Control', segments: [ @@ -47,7 +47,7 @@ class _SegmentedControlExampleState extends State { // Numbers Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in _numberSegments) @@ -65,7 +65,7 @@ class _SegmentedControlExampleState extends State { // Icons Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in _iconsSegments) diff --git a/example/lib/pages/components/snackbar_example.dart b/example/lib/pages/components/snackbar_example.dart index 25d79864..9a1729e4 100644 --- a/example/lib/pages/components/snackbar_example.dart +++ b/example/lib/pages/components/snackbar_example.dart @@ -21,7 +21,7 @@ class SnackBarExample extends StatelessWidget { Row( children: [ Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Standard SnackBar", onPressed: () { @@ -43,7 +43,7 @@ class SnackBarExample extends StatelessWidget { // Default Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Contectual Default", onPressed: () { @@ -61,7 +61,7 @@ class SnackBarExample extends StatelessWidget { // Action Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Action", onPressed: () { @@ -80,7 +80,7 @@ class SnackBarExample extends StatelessWidget { // Positive Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Positive", onPressed: () { @@ -97,7 +97,7 @@ class SnackBarExample extends StatelessWidget { // Info Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Info", onPressed: () { @@ -114,7 +114,7 @@ class SnackBarExample extends StatelessWidget { // Info Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Info", onPressed: () { @@ -131,7 +131,7 @@ class SnackBarExample extends StatelessWidget { // Warning Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Warning", onPressed: () { @@ -148,7 +148,7 @@ class SnackBarExample extends StatelessWidget { // Error Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Error", onPressed: () { @@ -165,7 +165,7 @@ class SnackBarExample extends StatelessWidget { // Deletion Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "Deletion", onPressed: () { @@ -183,7 +183,7 @@ class SnackBarExample extends StatelessWidget { // View Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.large), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.large), child: ZetaButton.primary( label: "View", onPressed: () { diff --git a/example/lib/pages/components/stepper_example.dart b/example/lib/pages/components/stepper_example.dart index e782f386..ac7a2451 100644 --- a/example/lib/pages/components/stepper_example.dart +++ b/example/lib/pages/components/stepper_example.dart @@ -66,7 +66,7 @@ class _StepperExampleState extends State { ), ), Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_4), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.xl_4), child: ZetaStepper( type: ZetaStepperType.vertical, currentStep: _verticalStep, diff --git a/example/lib/pages/components/tabs_example.dart b/example/lib/pages/components/tabs_example.dart index be2a5f7c..b436eaec 100644 --- a/example/lib/pages/components/tabs_example.dart +++ b/example/lib/pages/components/tabs_example.dart @@ -30,7 +30,7 @@ class _TabsExampleState extends State { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.xl_4), child: DefaultTabController( length: 5, child: ZetaTabBar( @@ -48,7 +48,7 @@ class _TabsExampleState extends State { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.xl_4), child: DefaultTabController( length: 5, child: ZetaTabBar( diff --git a/example/lib/pages/components/tooltip_example.dart b/example/lib/pages/components/tooltip_example.dart index ff94c86a..8c6fa96a 100644 --- a/example/lib/pages/components/tooltip_example.dart +++ b/example/lib/pages/components/tooltip_example.dart @@ -18,21 +18,21 @@ class TooltipExample extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ZetaTooltip( child: Text('Label'), ), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.right, ), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.up, ), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.left, diff --git a/example/lib/pages/components/top_app_bar_example.dart b/example/lib/pages/components/top_app_bar_example.dart index 2837ae13..6adc0827 100644 --- a/example/lib/pages/components/top_app_bar_example.dart +++ b/example/lib/pages/components/top_app_bar_example.dart @@ -57,7 +57,7 @@ class _TopAppBarExampleState extends State { children: [ ZetaAvatar(size: ZetaAvatarSize.xs, image: image), Padding( - padding: EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: Text("Title"), ), ], @@ -154,7 +154,7 @@ class _TopAppBarExampleState extends State { children: [ ZetaAvatar(size: ZetaAvatarSize.xs, image: image), Padding( - padding: EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: Text("Title"), ), ], @@ -180,7 +180,7 @@ class _TopAppBarExampleState extends State { height: 800, color: Zeta.of(context).colors.surfaceSelectedHover, child: CustomPaint( - painter: Painter(zeta: Zeta.of(context)), + painter: Painter(context: context), size: Size(800, 800), ), ), @@ -222,7 +222,7 @@ class _TopAppBarExampleState extends State { height: 800, color: Zeta.of(context).colors.surfaceSelectedHover, child: CustomPaint( - painter: Painter(zeta: Zeta.of(context)), + painter: Painter(context: context), size: Size(800, 800), ), ), @@ -239,9 +239,9 @@ class _TopAppBarExampleState extends State { } class Painter extends CustomPainter { - final Zeta zeta; + final BuildContext context; - Painter({super.repaint, required this.zeta}); + Painter({super.repaint, required this.context}); @override void paint(Canvas canvas, Size size) { @@ -249,8 +249,8 @@ class Painter extends CustomPainter { var p1 = Offset(i, -10); var p2 = Offset(800 + i, 810); var paint = Paint() - ..color = zeta.colors.surfaceDefault - ..strokeWidth = ZetaSpacing.minimum; + ..color = Zeta.of(context).colors.surfaceDefault + ..strokeWidth = Zeta.of(context).spacing.minimum; canvas.drawLine(p1, p2, paint); } } diff --git a/example/lib/pages/theme/color_example.dart b/example/lib/pages/theme/color_example.dart index 950fe839..9bb96c64 100644 --- a/example/lib/pages/theme/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -132,7 +132,7 @@ class _ColorExampleState extends State { return ExampleScaffold( name: ColorExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( children: [ MyRow(children: textIcon, title: 'Text and icon styles'), @@ -141,7 +141,7 @@ class _ColorExampleState extends State { MyRow(children: primaries, title: 'Primary colors'), MyRow(children: alerts, title: 'Alert colors'), Row(children: [Text('Full color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(ZetaSpacing.xl_4), + .paddingVertical(Zeta.of(context).spacing.xl_4), ...swatches.entries.map( (value) => Row( children: List.generate(10, (index) => 100 - (10 * index)) @@ -174,11 +174,11 @@ class _ColorExampleState extends State { ), ElevatedButton( onPressed: () => setState(() => showGeneratedColors = !showGeneratedColors), - child: const Text('Toggle generated colors').paddingAll(ZetaSpacing.medium), - ).paddingAll(ZetaSpacing.medium), + child: const Text('Toggle generated colors').paddingAll(Zeta.of(context).spacing.medium), + ).paddingAll(Zeta.of(context).spacing.medium), if (showGeneratedColors) Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(ZetaSpacing.xl_4), + .paddingVertical(Zeta.of(context).spacing.xl_4), if (showGeneratedColors) ...generatedSwatches.entries.map( (value) => Row( diff --git a/example/lib/pages/theme/radius_example.dart b/example/lib/pages/theme/radius_example.dart index 6f9f28bc..199ce397 100644 --- a/example/lib/pages/theme/radius_example.dart +++ b/example/lib/pages/theme/radius_example.dart @@ -19,7 +19,7 @@ class RadiusExample extends StatelessWidget { return ExampleScaffold( name: name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -41,7 +41,7 @@ class RadiusExample extends StatelessWidget { color: Zeta.of(context).colors.surfacePrimary, border: Border.all(color: colors.blue.shade50, width: 3), ), - padding: EdgeInsets.all(ZetaSpacing.large), + padding: EdgeInsets.all(Zeta.of(context).spacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( @@ -54,7 +54,7 @@ class RadiusExample extends StatelessWidget { ), ); }) - .divide(const SizedBox(height: ZetaSpacing.xl_4)) + .divide(SizedBox(height: Zeta.of(context).spacing.xl_4)) .toList(), ), ], diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart index ce86c526..6ab0e78d 100644 --- a/example/lib/pages/theme/spacing_example.dart +++ b/example/lib/pages/theme/spacing_example.dart @@ -3,51 +3,48 @@ import 'package:path_drawing/path_drawing.dart'; import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -Map semanticSpacings = { - 'none': ZetaSpacing.none, - 'minimum': ZetaSpacing.minimum, - 'small': ZetaSpacing.small, - 'medium': ZetaSpacing.medium, - 'large': ZetaSpacing.large, - 'xl': ZetaSpacing.xl_1, - '2xl': ZetaSpacing.xl_2, - '3xl': ZetaSpacing.xl_3, - '4xl': ZetaSpacing.xl_4, - '5xl': ZetaSpacing.xl_5, - '6xl': ZetaSpacing.xl_6, - '7xl': ZetaSpacing.xl_7, - '8xl': ZetaSpacing.xl_8, - '9xl': ZetaSpacing.xl_9, - '10xl': ZetaSpacing.xl_10, - '11xl': ZetaSpacing.xl_11, -}; -Map baseSpacings = { - 'x1': ZetaSpacingBase.x1, - 'x2': ZetaSpacingBase.x2, - 'x3': ZetaSpacingBase.x3, - 'x3.5': ZetaSpacingBase.x3_5, - 'x4': ZetaSpacingBase.x4, - 'x5': ZetaSpacingBase.x5, - 'x6': ZetaSpacingBase.x6, - 'x7': ZetaSpacingBase.x7, - 'x8': ZetaSpacingBase.x8, - 'x9': ZetaSpacingBase.x9, - 'x10': ZetaSpacingBase.x10, - 'x11': ZetaSpacingBase.x11, - 'x12': ZetaSpacingBase.x12, - 'x13': ZetaSpacingBase.x13, - 'x14': ZetaSpacingBase.x14, - 'x15': ZetaSpacingBase.x15, - 'x30': ZetaSpacingBase.x30, - 'x50': ZetaSpacingBase.x50, -}; - class SpacingExample extends StatelessWidget { const SpacingExample({super.key}); static const String name = 'Spacing'; @override Widget build(BuildContext context) { + Map semanticSpacings = { + 'none': Zeta.of(context).spacing.none, + 'minimum': Zeta.of(context).spacing.minimum, + 'small': Zeta.of(context).spacing.small, + 'medium': Zeta.of(context).spacing.medium, + 'large': Zeta.of(context).spacing.large, + 'xl': Zeta.of(context).spacing.xl, + '2xl': Zeta.of(context).spacing.xl_2, + '3xl': Zeta.of(context).spacing.xl_3, + '4xl': Zeta.of(context).spacing.xl_4, + '5xl': Zeta.of(context).spacing.xl_5, + '6xl': Zeta.of(context).spacing.xl_6, + '7xl': Zeta.of(context).spacing.xl_7, + '8xl': Zeta.of(context).spacing.xl_8, + '9xl': Zeta.of(context).spacing.xl_9, + '10xl': Zeta.of(context).spacing.xl_10, + '11xl': Zeta.of(context).spacing.xl_11, + }; + Map baseSpacings = { + 'x1': Zeta.of(context).spacing.primitives.x1, + 'x2': Zeta.of(context).spacing.primitives.x2, + 'x3': Zeta.of(context).spacing.primitives.x3, + 'x4': Zeta.of(context).spacing.primitives.x4, + 'x5': Zeta.of(context).spacing.primitives.x5, + 'x6': Zeta.of(context).spacing.primitives.x6, + 'x7': Zeta.of(context).spacing.primitives.x7, + 'x8': Zeta.of(context).spacing.primitives.x8, + 'x9': Zeta.of(context).spacing.primitives.x9, + 'x10': Zeta.of(context).spacing.primitives.x10, + 'x11': Zeta.of(context).spacing.primitives.x11, + 'x12': Zeta.of(context).spacing.primitives.x12, + 'x13': Zeta.of(context).spacing.primitives.x13, + 'x14': Zeta.of(context).spacing.primitives.x14, + 'x15': Zeta.of(context).spacing.primitives.x15, + }; + return ExampleScaffold( name: name, child: SingleChildScrollView( @@ -82,16 +79,16 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.xl_2), + margin: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), color: colors.surfacePrimary, child: Text( - 'ZetaSpacing.' + size.key, + 'Zeta.of(context).spacing.' + size.key, style: ZetaTextStyles.titleMedium.apply( color: Zeta.of(context).colors.textDefault, fontStyle: FontStyle.normal, diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart index 9db86113..ed51f7ae 100644 --- a/example/lib/pages/theme/typography_example.dart +++ b/example/lib/pages/theme/typography_example.dart @@ -34,7 +34,7 @@ class TypographyExample extends StatelessWidget { return ExampleScaffold( name: name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: Row( children: [ Column( @@ -43,7 +43,7 @@ class TypographyExample extends StatelessWidget { .map( (e) => [ Text(e.key, style: e.value), - const SizedBox(height: ZetaSpacing.minimum), + SizedBox(height: Zeta.of(context).spacing.minimum), Text( 'Font Size: ' + e.value.fontSize!.toInt().toString() + @@ -53,7 +53,7 @@ class TypographyExample extends StatelessWidget { e.value.fontWeight!.value.toString(), style: ZetaTextStyles.bodyMedium, ), - const SizedBox(height: ZetaSpacing.xl_9), + SizedBox(height: Zeta.of(context).spacing.xl_9), ], ) .expand((element) => element) diff --git a/example/lib/utils/rounded_switch.dart b/example/lib/utils/rounded_switch.dart index 7f4eb1a3..f8d3acd7 100644 --- a/example/lib/utils/rounded_switch.dart +++ b/example/lib/utils/rounded_switch.dart @@ -24,7 +24,7 @@ class ZetaRoundedSwitch extends StatelessWidget { image: Icon(e ? Icons.circle : Icons.square, color: zeta.colors.primary), initialTextStyle: TextStyle( fontSize: 28, - letterSpacing: ZetaSpacing.none, + letterSpacing: Zeta.of(context).spacing.none, color: Zeta.of(context).colors.primary, fontWeight: FontWeight.w500, ), diff --git a/example/lib/utils/theme_constrast_switch.dart b/example/lib/utils/theme_constrast_switch.dart index ecc422a0..de59993d 100644 --- a/example/lib/utils/theme_constrast_switch.dart +++ b/example/lib/utils/theme_constrast_switch.dart @@ -39,7 +39,7 @@ class ZetaThemeContrastSwitch extends StatelessWidget { initials: e == ZetaContrast.aa ? 'AA' : 'AAA', initialTextStyle: TextStyle( fontSize: 14, - letterSpacing: ZetaSpacing.none, + letterSpacing: Zeta.of(context).spacing.none, color: colors.primary, fontWeight: FontWeight.w500, ), diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index a404e27b..e746f90d 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -12,11 +12,13 @@ Widget iconsUseCase(BuildContext context) { child: Center( child: Column( children: [ - Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4), - Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium).paddingAll(ZetaSpacing.xl_4), + Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium) + .paddingAll(Zeta.of(context).spacing.xl_4), + Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium) + .paddingAll(Zeta.of(context).spacing.xl_4), Wrap( - spacing: ZetaSpacing.xl_4, - runSpacing: ZetaSpacing.xl_4, + spacing: Zeta.of(context).spacing.xl_4, + runSpacing: Zeta.of(context).spacing.xl_4, children: icons.entries.map( (e) { final nameArr = (e.key.split('_')).join(' ').capitalize(); @@ -43,7 +45,7 @@ Widget iconsUseCase(BuildContext context) { fontFamily: ZetaIcons.family, fontPackage: ZetaIcons.package, ), - size: ZetaSpacing.xl_6, + size: Zeta.of(context).spacing.xl_6, ), Text( nameArr, diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index 86603ac9..f28e557f 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -6,7 +6,7 @@ import '../../utils/scaffold.dart'; Widget accordionUseCase(BuildContext context) => WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaAccordion( child: context.knobs.boolean(label: 'Disabled') ? null diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart index 2edb492c..8373275b 100644 --- a/example/widgetbook/pages/components/badges_widgetbook.dart +++ b/example/widgetbook/pages/components/badges_widgetbook.dart @@ -8,7 +8,7 @@ import '../../utils/utils.dart'; Widget statusLabelUseCase(BuildContext context) { return WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: ZetaStatusLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), status: context.knobs.list( @@ -26,7 +26,7 @@ Widget priorityPillUseCase(BuildContext context) { final colors = Zeta.of(context).colors; return WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: ZetaPriorityPill( index: context.knobs.string(label: 'Index', initialValue: 'U'), label: context.knobs.string(label: 'Label', initialValue: 'Urgent'), @@ -55,7 +55,7 @@ Widget priorityPillUseCase(BuildContext context) { Widget labelUseCase(BuildContext context) => WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: ZetaLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), status: context.knobs.list( @@ -70,7 +70,7 @@ Widget labelUseCase(BuildContext context) => WidgetbookScaffold( Widget indicatorsUseCase(BuildContext context) { return WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: ZetaIndicator( type: context.knobs.list( label: 'Type', @@ -93,7 +93,7 @@ Widget indicatorsUseCase(BuildContext context) { Widget tagsUseCase(BuildContext context) => WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 12fd1333..9061c6d5 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -29,7 +29,7 @@ Widget bannerUseCase(BuildContext context) { builder: (context, _) => Column( children: [ banner, - const SizedBox(height: ZetaSpacing.xl_9), + SizedBox(height: Zeta.of(context).spacing.xl_9), ZetaButton.text( label: 'Popup', onPressed: () { diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart index ddb7f1bb..a0fe9ccf 100644 --- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart +++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart @@ -10,11 +10,11 @@ Widget bottomSheetContentUseCase(BuildContext context) { return WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: Column( children: [ sheet, - const SizedBox(height: ZetaSpacing.xl_9), + SizedBox(height: Zeta.of(context).spacing.xl_9), ZetaButton.text( label: 'Open', onPressed: () => showModalBottomSheet(context: context, builder: (_) => sheet), @@ -33,8 +33,8 @@ ZetaBottomSheet _bottomSheet(BuildContext context) { centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true), title: context.knobs.string(label: 'Title', initialValue: 'Title'), body: Wrap( - spacing: ZetaSpacing.medium, - runSpacing: ZetaSpacing.medium, + spacing: Zeta.of(context).spacing.medium, + runSpacing: Zeta.of(context).spacing.medium, children: List.generate( 6, (index) => ZetaMenuItem( diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index fdd7e383..74ad65bc 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -96,11 +96,11 @@ Widget buttonGroupUseCase(BuildContext context) { } Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookScaffold( - builder: (context, _) => Padding(padding: EdgeInsets.all(ZetaSpacing.xl_1), child: FabWidget(context)), + builder: (context, _) => Padding(padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: FabWidget(context)), ); class FabWidget extends StatefulWidget { - const FabWidget(this.c); + FabWidget(this.c); final BuildContext c; @override diff --git a/example/widgetbook/pages/components/chat_item_widgetbook.dart b/example/widgetbook/pages/components/chat_item_widgetbook.dart index 64a84946..62dc492c 100644 --- a/example/widgetbook/pages/components/chat_item_widgetbook.dart +++ b/example/widgetbook/pages/components/chat_item_widgetbook.dart @@ -34,7 +34,7 @@ Widget chatItemWidgetBook(BuildContext context) { if (enabledOnPtt) ZetaSlidableAction.ptt(onPressed: () {}), ], starred: starred, - leading: const ZetaAvatar.initials(initials: 'AZ', size: ZetaAvatarSize.m), + leading: ZetaAvatar.initials(initials: 'AZ', size: ZetaAvatarSize.m), title: Text(title), subtitle: Text(subtitle), ), diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart index f36ba60e..02a6d824 100644 --- a/example/widgetbook/pages/components/date_input_widgetbook.dart +++ b/example/widgetbook/pages/components/date_input_widgetbook.dart @@ -28,7 +28,7 @@ Widget dateInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaDateInput( size: size, disabled: disabled, diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart index 293188c0..db88bf5a 100644 --- a/example/widgetbook/pages/components/dialog_widgetbook.dart +++ b/example/widgetbook/pages/components/dialog_widgetbook.dart @@ -29,7 +29,7 @@ Widget dialogUseCase(BuildContext context) { ); return WidgetbookScaffold( builder: (context, _) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: Center( child: Column( children: [ diff --git a/example/widgetbook/pages/components/filter_selection_widgetbook.dart b/example/widgetbook/pages/components/filter_selection_widgetbook.dart index 2b4ba150..0609df11 100644 --- a/example/widgetbook/pages/components/filter_selection_widgetbook.dart +++ b/example/widgetbook/pages/components/filter_selection_widgetbook.dart @@ -11,7 +11,7 @@ Widget filterSelectionUseCase(BuildContext context) { builder: (_, setState) { return Column( children: [ - const SizedBox(height: ZetaSpacing.xl_2), + SizedBox(height: Zeta.of(context).spacing.xl_2), ZetaFilterSelection( items: [ for (int i = 0; i < items.length; i++) diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart index be454c92..fad97356 100644 --- a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart +++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart @@ -7,7 +7,7 @@ import '../../utils/utils.dart'; Widget inPageBannerUseCase(BuildContext context) => WidgetbookScaffold( builder: (context, _) => Padding( - padding: EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaInPageBanner( content: Text( context.knobs.string( diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart index abfc9740..bafbf9f2 100644 --- a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart @@ -41,7 +41,7 @@ Widget navigationRailUseCase(BuildContext context) { ), Expanded( child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: selectedIndex == null ? const Nothing() : Text( diff --git a/example/widgetbook/pages/components/phone_input_widgetbook.dart b/example/widgetbook/pages/components/phone_input_widgetbook.dart index bfef1ba7..8889f0f6 100644 --- a/example/widgetbook/pages/components/phone_input_widgetbook.dart +++ b/example/widgetbook/pages/components/phone_input_widgetbook.dart @@ -14,7 +14,7 @@ Widget phoneInputUseCase(BuildContext context) { builder: (context, _) => StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaPhoneInput( disabled: !enabled, label: 'Phone number', diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart index ba9b5b82..249b5896 100644 --- a/example/widgetbook/pages/components/progress_widgetbook.dart +++ b/example/widgetbook/pages/components/progress_widgetbook.dart @@ -8,7 +8,7 @@ import '../../utils/utils.dart'; Widget progressBarUseCase(BuildContext context) => WidgetbookScaffold( builder: (context, _) => LayoutBuilder(builder: (context, constraints) { return SizedBox( - width: constraints.maxWidth - ZetaSpacing.xl_9, + width: constraints.maxWidth - Zeta.of(context).spacing.xl_9, child: ZetaProgressBar( progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(), type: context.knobs.list( diff --git a/example/widgetbook/pages/components/radio_widgetbook.dart b/example/widgetbook/pages/components/radio_widgetbook.dart index e9fedb8d..82f76d09 100644 --- a/example/widgetbook/pages/components/radio_widgetbook.dart +++ b/example/widgetbook/pages/components/radio_widgetbook.dart @@ -15,11 +15,11 @@ Widget radioButtonUseCase(BuildContext context) { ValueChanged? onChanged = !disabledKnob(context) ? (value) => setState(() => groupValue = value) : null; return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: Column( children: [ Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.xl_1), + padding: EdgeInsets.only(bottom: Zeta.of(context).spacing.xl), child: Text('Radio Button'), ), ZetaRadio( diff --git a/example/widgetbook/pages/components/search_bar_widgetbook.dart b/example/widgetbook/pages/components/search_bar_widgetbook.dart index d0ec70b8..9072142b 100644 --- a/example/widgetbook/pages/components/search_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/search_bar_widgetbook.dart @@ -41,7 +41,7 @@ Widget searchBarUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -63,7 +63,7 @@ Widget searchBarUseCase(BuildContext context) { }, onSpeechToText: () async => 'I wanted to say...', ), - const SizedBox(height: ZetaSpacing.xl_1), + SizedBox(height: Zeta.of(context).spacing.xl), ...items.map((item) => Text(item)).toList(), ], ), diff --git a/example/widgetbook/pages/components/segmented_control_widgetbook.dart b/example/widgetbook/pages/components/segmented_control_widgetbook.dart index 4239ced5..2bdb54b2 100644 --- a/example/widgetbook/pages/components/segmented_control_widgetbook.dart +++ b/example/widgetbook/pages/components/segmented_control_widgetbook.dart @@ -20,7 +20,7 @@ Widget segmentedControlUseCase(BuildContext context) { return Column( children: [ Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in iconsSegments) @@ -36,7 +36,7 @@ Widget segmentedControlUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in textSegments) diff --git a/example/widgetbook/pages/components/select_input_widgetbook.dart b/example/widgetbook/pages/components/select_input_widgetbook.dart index 6d890c76..852baee9 100644 --- a/example/widgetbook/pages/components/select_input_widgetbook.dart +++ b/example/widgetbook/pages/components/select_input_widgetbook.dart @@ -49,7 +49,7 @@ Widget selectInputUseCase(BuildContext context) { builder: (context, _) => StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: ZetaSelectInput( disabled: disabled, size: size, diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart index c6424ccc..6744143f 100644 --- a/example/widgetbook/pages/components/stepper_widgetbook.dart +++ b/example/widgetbook/pages/components/stepper_widgetbook.dart @@ -32,7 +32,7 @@ Widget stepperUseCase(BuildContext context) { return Container( height: type == ZetaStepperType.horizontal ? 300 : null, padding: EdgeInsets.all( - type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.xl_4, + type == ZetaStepperType.horizontal ? 0.0 : Zeta.of(context).spacing.xl_4, ), child: ZetaStepper( currentStep: currentStep, diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart index d4379a08..1c6672da 100644 --- a/example/widgetbook/pages/components/switch_widgetbook.dart +++ b/example/widgetbook/pages/components/switch_widgetbook.dart @@ -13,7 +13,7 @@ Widget switchUseCase(BuildContext context) { builder: (context, setState) { ValueChanged? onChanged = !disabledKnob(context) ? (value) => setState(() => isOn = value) : null; return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: Column( children: [ Text('Switch'), diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart index aacf9eb2..8039e150 100644 --- a/example/widgetbook/pages/components/tabs_widgetbook.dart +++ b/example/widgetbook/pages/components/tabs_widgetbook.dart @@ -11,7 +11,7 @@ Widget tabsUseCase(BuildContext context) { child: Column( children: [ Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.xl_4), child: DefaultTabController( length: 2, child: ZetaTabBar( @@ -30,7 +30,7 @@ Widget tabsUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.xl_4), child: DefaultTabController( length: 5, child: ZetaTabBar( diff --git a/example/widgetbook/pages/components/text_input_widgetbook.dart b/example/widgetbook/pages/components/text_input_widgetbook.dart index f5a1cb85..6270d88e 100644 --- a/example/widgetbook/pages/components/text_input_widgetbook.dart +++ b/example/widgetbook/pages/components/text_input_widgetbook.dart @@ -29,7 +29,7 @@ Widget textInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaTextInput( size: size, disabled: disabled, diff --git a/example/widgetbook/pages/components/time_input_widgetbook.dart b/example/widgetbook/pages/components/time_input_widgetbook.dart index 06c3d722..4c66cbf3 100644 --- a/example/widgetbook/pages/components/time_input_widgetbook.dart +++ b/example/widgetbook/pages/components/time_input_widgetbook.dart @@ -31,7 +31,7 @@ Widget timeInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_1), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl), child: ZetaTimeInput( size: size, disabled: disabled, diff --git a/example/widgetbook/pages/components/tooltip_widgetbook.dart b/example/widgetbook/pages/components/tooltip_widgetbook.dart index 61a23c4a..488aed8a 100644 --- a/example/widgetbook/pages/components/tooltip_widgetbook.dart +++ b/example/widgetbook/pages/components/tooltip_widgetbook.dart @@ -18,7 +18,7 @@ Widget tooltipUseCase(BuildContext context) { builder: (context, _) => StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: ZetaTooltip( child: Text(text), arrowDirection: direction, diff --git a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart index ff14a90f..96f80616 100644 --- a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart @@ -208,7 +208,7 @@ class _ExtendedSearchState extends State { height: constraints.maxHeight * 4, color: Zeta.of(context).colors.surfaceSecondary, child: CustomPaint( - painter: Painter(colors: Zeta.of(context).colors, constraints: constraints), + painter: Painter(context: context, constraints: constraints), size: Size(constraints.maxWidth, constraints.maxHeight * 4), ), ), @@ -222,9 +222,9 @@ class _ExtendedSearchState extends State { } class Painter extends CustomPainter { - final ZetaColors colors; + final BuildContext context; final BoxConstraints constraints; - Painter({super.repaint, required this.colors, required this.constraints}); + Painter({super.repaint, required this.context, required this.constraints}); @override void paint(Canvas canvas, Size size) { @@ -232,8 +232,8 @@ class Painter extends CustomPainter { var p1 = Offset(i, -10); var p2 = Offset(constraints.maxHeight + i, constraints.maxHeight * 4); var paint = Paint() - ..color = colors.primary - ..strokeWidth = ZetaSpacing.minimum; + ..color = Zeta.of(context).colors.primary + ..strokeWidth = Zeta.of(context).spacing.minimum; canvas.drawLine(p1, p2, paint); } } diff --git a/example/widgetbook/pages/introduction.dart b/example/widgetbook/pages/introduction.dart index 9b610c77..3cfe397f 100644 --- a/example/widgetbook/pages/introduction.dart +++ b/example/widgetbook/pages/introduction.dart @@ -25,7 +25,7 @@ class _IntroductionWidgetbookState extends State { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final radius = Radius.circular(ZetaSpacing.xl_1); + final radius = Radius.circular(Zeta.of(context).spacing.xl); final isDark = Zeta.of(context).brightness == Brightness.dark; final config = isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig; @@ -35,7 +35,8 @@ class _IntroductionWidgetbookState extends State { backgroundColor: colors.black, body: SingleChildScrollView( child: Padding( - padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xl_10, horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric( + vertical: Zeta.of(context).spacing.xl_10, horizontal: Zeta.of(context).spacing.medium), child: Column( mainAxisSize: MainAxisSize.max, children: [ @@ -46,10 +47,10 @@ class _IntroductionWidgetbookState extends State { ), child: Padding( padding: EdgeInsets.fromLTRB( - ZetaSpacing.xl_6, - ZetaSpacing.xl_9, - ZetaSpacing.xl_8, - ZetaSpacing.xl_6, + Zeta.of(context).spacing.xl_6, + Zeta.of(context).spacing.xl_9, + Zeta.of(context).spacing.xl_8, + Zeta.of(context).spacing.xl_6, ), child: Row( children: [ @@ -66,7 +67,7 @@ class _IntroductionWidgetbookState extends State { ]) : null, ), - SizedBox(width: largeScreen ? ZetaSpacing.xl_6 : ZetaSpacing.xl_1), + SizedBox(width: largeScreen ? Zeta.of(context).spacing.xl_6 : Zeta.of(context).spacing.xl), Expanded( child: Text( // x-release-please-start-version @@ -85,7 +86,7 @@ class _IntroductionWidgetbookState extends State { borderRadius: BorderRadius.only(bottomLeft: radius, bottomRight: radius), ), width: double.infinity, - padding: EdgeInsets.all(ZetaSpacing.xl_4), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_4), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ @@ -155,12 +156,13 @@ class _CodeWrapperWidget extends StatelessWidget { ), if (language.isNotEmpty) Positioned( - top: ZetaSpacing.small, + top: Zeta.of(context).spacing.small, right: 0, child: SelectionContainer.disabled( child: Container( child: Text(language), - padding: EdgeInsets.symmetric(vertical: ZetaSpacing.minimum, horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric( + vertical: Zeta.of(context).spacing.minimum, horizontal: Zeta.of(context).spacing.medium), decoration: BoxDecoration(color: colors.cool.shade40, borderRadius: Zeta.of(context).radius.rounded), ), ), diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart index fd3c18be..23ccec58 100644 --- a/example/widgetbook/pages/theme/color_widgetbook.dart +++ b/example/widgetbook/pages/theme/color_widgetbook.dart @@ -58,17 +58,17 @@ class ColorBody extends StatelessWidget { decoration: TextDecoration.none, ), child: Container( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_4), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.xl_4), child: SingleChildScrollView( key: PageStorageKey(0), child: Column( children: [ - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), MyRow(children: textIcon, title: 'Text and icon styles'), MyRow(children: border, title: 'Border styles'), MyRow(children: backdrop, title: 'Backdrop colors'), MyRow(children: alerts, title: 'Alert colors'), - Row(children: [Text('Full color swatches')]).paddingVertical(ZetaSpacing.xl_4), + Row(children: [Text('Full color swatches')]).paddingVertical(Zeta.of(context).spacing.xl_4), ...swatches.entries.map( (value) { return Row( @@ -106,7 +106,7 @@ class ColorBody extends StatelessWidget { ); }, ), - const SizedBox(height: ZetaSpacing.xl_4), + SizedBox(height: Zeta.of(context).spacing.xl_4), ], ), ), diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart index d47f297e..69a3a72e 100644 --- a/example/widgetbook/pages/theme/radius_widgetbook.dart +++ b/example/widgetbook/pages/theme/radius_widgetbook.dart @@ -37,7 +37,7 @@ Widget radiusUseCase(BuildContext context) { color: Zeta.of(context).colors.surfacePrimary, border: Border.all(color: colors.blue.shade50, width: 3), ), - padding: EdgeInsets.all(ZetaSpacing.large), + padding: EdgeInsets.all(Zeta.of(context).spacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart index 7ab0096c..51a441c1 100644 --- a/example/widgetbook/pages/theme/spacing_widgetbook.dart +++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart @@ -3,60 +3,59 @@ import 'package:path_drawing/path_drawing.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -Widget spacingUseCase(BuildContext context) => SingleChildScrollView( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), - ) - ], - ), - ); +Widget spacingUseCase(BuildContext context) { + Map semanticSpacings = { + 'none': Zeta.of(context).spacing.none, + 'minimum': Zeta.of(context).spacing.minimum, + 'small': Zeta.of(context).spacing.small, + 'medium': Zeta.of(context).spacing.medium, + 'large': Zeta.of(context).spacing.large, + 'xl': Zeta.of(context).spacing.xl, + '2xl': Zeta.of(context).spacing.xl_2, + '3xl': Zeta.of(context).spacing.xl_3, + '4xl': Zeta.of(context).spacing.xl_4, + '5xl': Zeta.of(context).spacing.xl_5, + '6xl': Zeta.of(context).spacing.xl_6, + '7xl': Zeta.of(context).spacing.xl_7, + '8xl': Zeta.of(context).spacing.xl_8, + '9xl': Zeta.of(context).spacing.xl_9, + '10xl': Zeta.of(context).spacing.xl_10, + '11xl': Zeta.of(context).spacing.xl_11, + }; + Map baseSpacings = { + 'x1': Zeta.of(context).spacing.primitives.x1, + 'x2': Zeta.of(context).spacing.primitives.x2, + 'x3': Zeta.of(context).spacing.primitives.x3, + 'x4': Zeta.of(context).spacing.primitives.x4, + 'x5': Zeta.of(context).spacing.primitives.x5, + 'x6': Zeta.of(context).spacing.primitives.x6, + 'x7': Zeta.of(context).spacing.primitives.x7, + 'x8': Zeta.of(context).spacing.primitives.x8, + 'x9': Zeta.of(context).spacing.primitives.x9, + 'x10': Zeta.of(context).spacing.primitives.x10, + 'x11': Zeta.of(context).spacing.primitives.x11, + 'x12': Zeta.of(context).spacing.primitives.x12, + 'x13': Zeta.of(context).spacing.primitives.x13, + 'x14': Zeta.of(context).spacing.primitives.x14, + 'x15': Zeta.of(context).spacing.primitives.x15, + }; -Map semanticSpacings = { - 'none': ZetaSpacing.none, - 'minimum': ZetaSpacing.minimum, - 'small': ZetaSpacing.small, - 'medium': ZetaSpacing.medium, - 'large': ZetaSpacing.large, - 'xl': ZetaSpacing.xl_1, - '2xl': ZetaSpacing.xl_2, - '3xl': ZetaSpacing.xl_3, - '4xl': ZetaSpacing.xl_4, - '5xl': ZetaSpacing.xl_5, - '6xl': ZetaSpacing.xl_6, - '7xl': ZetaSpacing.xl_7, - '8xl': ZetaSpacing.xl_8, - '9xl': ZetaSpacing.xl_9, - '10xl': ZetaSpacing.xl_10, - '11xl': ZetaSpacing.xl_11, -}; -Map baseSpacings = { - 'x1': ZetaSpacingBase.x1, - 'x2': ZetaSpacingBase.x2, - 'x3': ZetaSpacingBase.x3, - 'x3.5': ZetaSpacingBase.x3_5, - 'x4': ZetaSpacingBase.x4, - 'x5': ZetaSpacingBase.x5, - 'x6': ZetaSpacingBase.x6, - 'x7': ZetaSpacingBase.x7, - 'x8': ZetaSpacingBase.x8, - 'x9': ZetaSpacingBase.x9, - 'x10': ZetaSpacingBase.x10, - 'x11': ZetaSpacingBase.x11, - 'x12': ZetaSpacingBase.x12, - 'x13': ZetaSpacingBase.x13, - 'x14': ZetaSpacingBase.x14, - 'x15': ZetaSpacingBase.x15, - 'x30': ZetaSpacingBase.x30, - 'x50': ZetaSpacingBase.x50, -}; + return SingleChildScrollView( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + ) + ], + ), + ); +} class _SpacingDemo extends StatelessWidget { final MapEntry size; @@ -68,16 +67,16 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.xl_2), + margin: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), - padding: EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), color: colors.surfacePrimary, child: Text( - 'ZetaSpacing.' + size.key, + 'Zeta.of(context).spacing.' + size.key, style: ZetaTextStyles.titleMedium.apply( color: Zeta.of(context).colors.textDefault, fontStyle: FontStyle.normal, diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart index 40c3eaac..900e36b1 100644 --- a/example/widgetbook/pages/theme/typography_widgetbook.dart +++ b/example/widgetbook/pages/theme/typography_widgetbook.dart @@ -24,7 +24,7 @@ const Map allTypes = { }; Widget typographyUseCase(BuildContext context) => Padding( - padding: const EdgeInsets.all(ZetaSpacing.xl_2), + padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: Text( context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'), style: context.knobs diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart index 16b02701..14d50a34 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -151,7 +151,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM } }), child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.large), + padding: EdgeInsets.all(Zeta.of(context).spacing.large), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -162,7 +162,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM child: Flexible(child: Text(widget.title)), ), Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.large), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.large), child: ZetaIcon( _isOpen ? ZetaIcons.remove : ZetaIcons.add, color: _disabled ? zetaColors.iconDisabled : zetaColors.iconDefault, @@ -176,11 +176,11 @@ class _ZetaAccordionState extends State with TickerProviderStateM sizeFactor: _animation, axisAlignment: -1, child: Padding( - padding: const EdgeInsets.fromLTRB( - ZetaSpacing.large, - ZetaSpacing.none, - ZetaSpacing.large, - ZetaSpacing.large, + padding: EdgeInsets.fromLTRB( + Zeta.of(context).spacing.large, + Zeta.of(context).spacing.none, + Zeta.of(context).spacing.large, + Zeta.of(context).spacing.large, ), child: Theme( data: Theme.of(context).copyWith(listTileTheme: ListTileThemeData(titleTextStyle: childTextStyle)), diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 36e9d255..1437d5f6 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -144,7 +144,7 @@ class ZetaAvatar extends ZetaStatelessWidget { /// ```dart /// TextStyle( /// fontSize: size.fontSize, - /// letterSpacing: ZetaSpacing.none, + /// letterSpacing: Zeta.of(context).spacing.none, /// color: backgroundColor?.onColor, /// fontWeight: FontWeight.w500, /// ) @@ -179,8 +179,6 @@ class ZetaAvatar extends ZetaStatelessWidget { final zetaColors = Zeta.of(context).colors; final borderSize = size.borderSize; - final sizePixels = size.pixelSize; - final contentSizePixels = size.pixelSize; final innerChild = image ?? (initials != null @@ -189,8 +187,8 @@ class ZetaAvatar extends ZetaStatelessWidget { size == ZetaAvatarSize.xs ? initials!.substring(0, 1) : initials!, style: initialTextStyle ?? TextStyle( - fontSize: size.fontSize, - letterSpacing: ZetaSpacing.none, + fontSize: size.fontSize(context), + letterSpacing: Zeta.of(context).spacing.none, color: backgroundColor?.onColor, fontWeight: FontWeight.w500, ), @@ -203,6 +201,8 @@ class ZetaAvatar extends ZetaStatelessWidget { child: innerChild, ); + final pSize = size.pixelSize(context); + return ZetaRoundedScope( rounded: context.rounded, child: Semantics( @@ -211,8 +211,8 @@ class ZetaAvatar extends ZetaStatelessWidget { child: Stack( children: [ Container( - width: sizePixels, - height: sizePixels, + width: pSize, + height: pSize, decoration: BoxDecoration( border: borderColor != null ? Border.all(color: borderColor!, width: 0) : null, borderRadius: Zeta.of(context).radius.full, @@ -220,11 +220,11 @@ class ZetaAvatar extends ZetaStatelessWidget { ), child: borderColor != null ? Container( - width: contentSizePixels, - height: contentSizePixels, + width: pSize, + height: pSize, decoration: BoxDecoration( color: backgroundColor ?? zetaColors.surfaceHover, - border: Border.all(color: borderColor!, width: borderSize), + border: Border.all(color: borderColor!, width: borderSize(context)), borderRadius: Zeta.of(context).radius.full, ), child: ClipRRect( @@ -245,7 +245,7 @@ class ZetaAvatar extends ZetaStatelessWidget { ), if (upperBadge != null) Positioned( - right: ZetaSpacing.none, + right: Zeta.of(context).spacing.none, child: Semantics( value: semanticLowerBadgeLabel, child: upperBadge!.copyWith( @@ -255,8 +255,8 @@ class ZetaAvatar extends ZetaStatelessWidget { ), if (lowerBadge != null) Positioned( - right: ZetaSpacing.none, - bottom: ZetaSpacing.none, + right: Zeta.of(context).spacing.none, + bottom: Zeta.of(context).spacing.none, child: Semantics( value: semanticLowerBadgeLabel, child: lowerBadge!.copyWith(size: size), @@ -287,30 +287,32 @@ class ZetaAvatar extends ZetaStatelessWidget { } extension on ZetaAvatarSize { - double get pixelSize { + double pixelSize(BuildContext context) { switch (this) { case ZetaAvatarSize.xxxl: - return ZetaSpacingBase.x50; + return Zeta.of(context).spacing.minimum * 50; // TODO(UX-1202): ZetaSpacingBase + // return ZetaSpacingBase.x50; case ZetaAvatarSize.xxl: - return ZetaSpacingBase.x30; + return Zeta.of(context).spacing.minimum * 30; // TODO(UX-1202): ZetaSpacingBase + // return ZetaSpacingBase.x30; case ZetaAvatarSize.xl: - return ZetaSpacing.xl_10; + return Zeta.of(context).spacing.xl_10; case ZetaAvatarSize.l: - return ZetaSpacing.xl_9; + return Zeta.of(context).spacing.xl_9; case ZetaAvatarSize.m: - return ZetaSpacing.xl_8; + return Zeta.of(context).spacing.xl_8; case ZetaAvatarSize.s: - return ZetaSpacing.xl_6; + return Zeta.of(context).spacing.xl_6; case ZetaAvatarSize.xs: - return ZetaSpacing.xl_5; + return Zeta.of(context).spacing.xl_5; case ZetaAvatarSize.xxs: - return ZetaSpacing.xl_4; + return Zeta.of(context).spacing.xl_4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.xl_2; + return Zeta.of(context).spacing.xl_2; } } - double get borderSize { + double borderSize(BuildContext context) { switch (this) { case ZetaAvatarSize.xxxl: return 11; @@ -318,18 +320,18 @@ extension on ZetaAvatarSize { case ZetaAvatarSize.xl: case ZetaAvatarSize.l: case ZetaAvatarSize.m: - return ZetaSpacing.minimum; + return Zeta.of(context).spacing.minimum; case ZetaAvatarSize.s: case ZetaAvatarSize.xs: case ZetaAvatarSize.xxs: case ZetaAvatarSize.xxxs: - return ZetaSpacingBase.x0_5; + return ZetaBorders.borderWidth; } } - double get fontSize { - return pixelSize * 4 / 9; + double fontSize(BuildContext context) { + return pixelSize(context) * 4 / 9; } } @@ -432,9 +434,9 @@ class ZetaAvatarBadge extends StatelessWidget { final colors = Zeta.of(context).colors; final Color backgroundColor = type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : (color ?? colors.primary); - final badgeSize = _getContainerSize(); - final borderSize = _getBorderSize(); - final paddedSize = badgeSize + ZetaSpacing.minimum; + final badgeSize = _getContainerSize(context); + final borderSize = _getBorderSize(context); + final paddedSize = badgeSize + Zeta.of(context).spacing.minimum; final innerContent = Container( margin: const EdgeInsets.all(0.01), @@ -478,12 +480,12 @@ class ZetaAvatarBadge extends StatelessWidget { ); } - double _getContainerSize() { - return size.pixelSize / 3; + double _getContainerSize(BuildContext context) { + return size.pixelSize(context) / 3; } - double _getBorderSize() { - return size.pixelSize / 48; + double _getBorderSize(BuildContext context) { + return size.pixelSize(context) / 48; } @override diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index ed3618bc..53fdc3bd 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -104,15 +104,18 @@ class ZetaIndicator extends ZetaStatelessWidget { final zetaColors = Zeta.of(context).colors; final Color backgroundColor = (type == ZetaIndicatorType.icon ? zetaColors.blue : zetaColors.surfaceNegative); final Color foregroundColor = backgroundColor.onColor; - final sizePixels = _getSizePixels(size, type); + final sizePixels = _getSizePixels(size, type, context); return Semantics( value: semanticLabel ?? value?.toString() ?? '', child: Container( - width: sizePixels + ZetaSpacing.minimum, - height: sizePixels + ZetaSpacing.minimum, + width: sizePixels + Zeta.of(context).spacing.minimum, + height: sizePixels + Zeta.of(context).spacing.minimum, decoration: BoxDecoration( - border: Border.all(width: ZetaSpacingBase.x0_5, color: zetaColors.borderSubtle), + border: Border.all( + width: ZetaBorders.borderWidth, + color: Zeta.of(context).colors.borderSubtle, + ), color: (inverse ? foregroundColor : Colors.transparent), borderRadius: Zeta.of(context).radius.full, ), @@ -120,11 +123,14 @@ class ZetaIndicator extends ZetaStatelessWidget { child: Container( width: sizePixels, height: sizePixels, - decoration: BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(ZetaSpacing.large)), + decoration: BoxDecoration( + color: backgroundColor, + borderRadius: BorderRadius.circular(Zeta.of(context).spacing.large), + ), child: ClipRRect( - borderRadius: BorderRadius.circular(ZetaSpacing.large), + borderRadius: BorderRadius.circular(Zeta.of(context).spacing.large), clipBehavior: Clip.hardEdge, - child: size == ZetaWidgetSize.small ? null : _buildContent(foregroundColor), + child: size == ZetaWidgetSize.small ? null : _buildContent(foregroundColor, context), ), ), ), @@ -132,10 +138,10 @@ class ZetaIndicator extends ZetaStatelessWidget { ); } - Widget _buildContent(Color foregroundColor) { + Widget _buildContent(Color foregroundColor, BuildContext context) { switch (type) { case ZetaIndicatorType.icon: - final iconSize = _getIconSize(size); + final iconSize = _getIconSize(size, context); return Center( child: ZetaIcon( icon ?? ZetaIcons.star, @@ -147,27 +153,30 @@ class ZetaIndicator extends ZetaStatelessWidget { return Center( child: Text( value.formatMaxChars(), - style: ZetaTextStyles.labelIndicator.copyWith(color: foregroundColor), + style: ZetaTextStyles.labelIndicator.copyWith( + color: foregroundColor, + height: size == ZetaWidgetSize.large ? 1 : (12 / 16), + ), ), ); } } /// Returns the size of [ZetaWidgetSize] in pixels. - double _getSizePixels(ZetaWidgetSize size, ZetaIndicatorType type) { + double _getSizePixels(ZetaWidgetSize size, ZetaIndicatorType type, BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.large; + return Zeta.of(context).spacing.xl; case ZetaWidgetSize.medium: - return type == ZetaIndicatorType.icon ? ZetaSpacing.medium : ZetaSpacingBase.x3_5; + return Zeta.of(context).spacing.medium; case ZetaWidgetSize.small: - return ZetaSpacing.small; + return Zeta.of(context).spacing.small; } } - double _getIconSize(ZetaWidgetSize size) { - if (size == ZetaWidgetSize.large) return ZetaSpacing.medium; - return ZetaSpacing.small; + double _getIconSize(ZetaWidgetSize size, BuildContext context) { + if (size == ZetaWidgetSize.large) return Zeta.of(context).spacing.medium; + return Zeta.of(context).spacing.small; } @override diff --git a/lib/src/components/badges/label.dart b/lib/src/components/badges/label.dart index 772040f9..1ba10300 100644 --- a/lib/src/components/badges/label.dart +++ b/lib/src/components/badges/label.dart @@ -43,7 +43,7 @@ class ZetaLabel extends ZetaStatelessWidget { return Semantics( label: semanticLabel ?? label, child: Container( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum, vertical: ZetaSpacingBase.x0_5), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.minimum), decoration: BoxDecoration( color: backgroundColor, borderRadius: context.rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index f55b6e40..707878eb 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -106,7 +106,7 @@ class ZetaPriorityPill extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final ZetaColorSwatch color = customColor ?? type.color(context); - final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.xl_1 : ZetaSpacing.xl_3; + final size = this.size == ZetaPriorityPillSize.small ? Zeta.of(context).spacing.xl : Zeta.of(context).spacing.xl_3; final label = (this.label ?? priority) ?? type.name.capitalize(); final rounded = context.rounded; @@ -145,9 +145,9 @@ class ZetaPriorityPill extends ZetaStatelessWidget { ), if (!isBadge) Padding( - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.small, - vertical: ZetaSpacing.minimum, + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + vertical: Zeta.of(context).spacing.minimum, ), child: Text( label, diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index b65a8341..f048a163 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -45,16 +45,19 @@ class ZetaStatusLabel extends ZetaStatelessWidget { borderRadius: context.rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none, ), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.small, vertical: ZetaSpacingBase.x0_5), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + vertical: Zeta.of(context).spacing.minimum / 2, + ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon( customIcon ?? Icons.circle, - size: customIcon != null ? ZetaSpacing.xl_1 : ZetaSpacing.small, + size: customIcon != null ? Zeta.of(context).spacing.xl : Zeta.of(context).spacing.small, color: colors.icon, ), - const SizedBox(width: ZetaSpacing.small), + SizedBox(width: Zeta.of(context).spacing.small), Text( label, style: ZetaTextStyles.bodyMedium.apply(color: colors.shade10.onColor), diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index 52620cef..75aa24ed 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -48,11 +48,10 @@ class ZetaTag extends ZetaStatelessWidget { /// If null, [label] is used. final String? semanticLabel; - /// Fixed container size - static const Size _containerSize = Size(ZetaSpacing.xl_5, ZetaSpacing.xl_3); - @override Widget build(BuildContext context) { + /// Fixed container size + final Size containerSize = Size(Zeta.of(context).spacing.xl_5, Zeta.of(context).spacing.xl_3); return Semantics( value: semanticLabel ?? label, child: Row( @@ -63,12 +62,12 @@ class ZetaTag extends ZetaStatelessWidget { color: Zeta.of(context).colors.surfaceHover, borderRadius: _getBorderRadius(context), ), - height: _containerSize.height, - constraints: BoxConstraints(minWidth: _containerSize.width), + height: containerSize.height, + constraints: BoxConstraints(minWidth: containerSize.width), child: Center( child: FittedBox( child: Padding( - padding: const EdgeInsets.fromLTRB(ZetaSpacing.small, 1, ZetaSpacing.small, 1), + padding: EdgeInsets.fromLTRB(Zeta.of(context).spacing.small, 1, Zeta.of(context).spacing.small, 1), child: Text( label, style: ZetaTextStyles.bodyMedium, @@ -86,22 +85,17 @@ class ZetaTag extends ZetaStatelessWidget { BorderRadius? _getBorderRadius(BuildContext context) { if (!context.rounded) return null; - if (direction == ZetaTagDirection.left) { - return const BorderRadius.only( - topRight: Radius.circular(ZetaSpacingBase.x0_5), - bottomRight: Radius.circular(ZetaSpacingBase.x0_5), - ); - } else { - return const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacingBase.x0_5), - bottomLeft: Radius.circular(ZetaSpacingBase.x0_5), - ); - } + return Zeta.of(context).radius.minimal.copyWith( + topLeft: direction == ZetaTagDirection.right ? null : Radius.zero, + bottomLeft: direction == ZetaTagDirection.right ? null : Radius.zero, + topRight: direction == ZetaTagDirection.left ? null : Radius.zero, + bottomRight: direction == ZetaTagDirection.left ? null : Radius.zero, + ); } Widget _buildCustomPaint(BuildContext context) { return CustomPaint( - size: const Size(ZetaSpacing.medium, ZetaSpacing.xl_3), + size: Size(Zeta.of(context).spacing.medium, Zeta.of(context).spacing.xl_3), painter: _TagPainter( color: Zeta.of(context).colors.surfaceHover, direction: direction, diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart index 3acb3557..bde064d1 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/banner/banner.dart @@ -92,11 +92,11 @@ class ZetaBanner extends MaterialBanner { children: [ if (leadingIcon != null) Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.small), + padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), child: Icon( leadingIcon, color: foregroundColor, - size: ZetaSpacing.xl_2, + size: Zeta.of(context).spacing.xl_2, ), ), Flexible(child: Text(title)), diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index dcabd3ea..964eae6d 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -37,17 +37,17 @@ class ZetaBottomSheet extends ZetaStatelessWidget { return ZetaRoundedScope( rounded: context.rounded, child: Container( - padding: const EdgeInsets.fromLTRB( - ZetaSpacing.xl_1, - ZetaSpacing.none, - ZetaSpacing.xl_1, - ZetaSpacing.xl_1, + padding: EdgeInsets.fromLTRB( + Zeta.of(context).spacing.xl, + Zeta.of(context).spacing.none, + Zeta.of(context).spacing.xl, + Zeta.of(context).spacing.xl, ), decoration: BoxDecoration( color: colors.surfaceSecondary, - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacing.xl_2), - topRight: Radius.circular(ZetaSpacing.xl_2), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(Zeta.of(context).spacing.xl_2), + topRight: Radius.circular(Zeta.of(context).spacing.xl_2), ), ), child: Column( @@ -55,12 +55,12 @@ class ZetaBottomSheet extends ZetaStatelessWidget { children: [ Align( child: SizedBox( - height: ZetaSpacing.xl_5, + height: Zeta.of(context).spacing.xl_5, child: Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.small), + padding: EdgeInsets.only(top: Zeta.of(context).spacing.small), child: ZetaIcon( Icons.maximize, - size: ZetaSpacing.xl_9, + size: Zeta.of(context).spacing.xl_9, color: colors.surfaceDisabled, ), ), @@ -68,7 +68,10 @@ class ZetaBottomSheet extends ZetaStatelessWidget { ), if (title != null) Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.xl_2), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.xl_2, + ), child: Align( alignment: centerTitle ? Alignment.center : Alignment.centerLeft, child: Text( diff --git a/lib/src/components/bottom sheets/menu_items.dart b/lib/src/components/bottom sheets/menu_items.dart index f0d9aba1..848e10f5 100644 --- a/lib/src/components/bottom sheets/menu_items.dart +++ b/lib/src/components/bottom sheets/menu_items.dart @@ -90,11 +90,14 @@ class ZetaMenuItem extends ZetaStatelessWidget { switch (type) { case ZetaMenuItemType.horizontal: return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.xl_8), + constraints: BoxConstraints(minHeight: Zeta.of(context).spacing.xl_8), child: InkWell( onTap: _onTap, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.large, vertical: ZetaSpacing.medium), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.large, + vertical: Zeta.of(context).spacing.medium, + ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -102,14 +105,17 @@ class ZetaMenuItem extends ZetaStatelessWidget { child: Row( children: [ if (leading != null) - Padding(padding: const EdgeInsets.only(right: ZetaSpacing.small), child: leading), + Padding( + padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), + child: leading, + ), Expanded(child: text), ], ), ), if (trailing != null) IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.xl_2), + data: _iconThemeData(colors, _enabled, Zeta.of(context).spacing.xl_2), child: trailing!, ), ], @@ -121,14 +127,17 @@ class ZetaMenuItem extends ZetaStatelessWidget { return InkWell( onTap: _onTap, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.large, vertical: ZetaSpacing.medium), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.large, + vertical: Zeta.of(context).spacing.medium, + ), child: Column( children: [ if (leading != null) Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.medium), + padding: EdgeInsets.only(bottom: Zeta.of(context).spacing.medium), child: IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.xl_4), + data: _iconThemeData(colors, _enabled, Zeta.of(context).spacing.xl_4), child: leading!, ), ), diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart index 29e10fe2..e2f7fad5 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -73,11 +73,11 @@ class _ZetaBreadCrumbsState extends State { child: Row( children: renderedChildren(widget.children) .divide( - const Row( + Row( children: [ - SizedBox(width: ZetaSpacing.small), - ZetaIcon(ZetaIcons.chevron_right, size: ZetaSpacing.xl_1), - SizedBox(width: ZetaSpacing.small), + SizedBox(width: Zeta.of(context).spacing.small), + ZetaIcon(ZetaIcons.chevron_right, size: Zeta.of(context).spacing.xl), + SizedBox(width: Zeta.of(context).spacing.small), ], ), ) @@ -213,8 +213,8 @@ class _ZetaBreadCrumbState extends State { widget.activeIcon ?? ZetaIcons.star_round, color: getColor(controller.value, colors), ), - const SizedBox( - width: ZetaSpacing.small, + SizedBox( + width: Zeta.of(context).spacing.small, ), Text( widget.label, @@ -321,7 +321,7 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> { side: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.focused)) { return BorderSide( - width: ZetaSpacingBase.x0_5, + width: ZetaBorders.borderWidth, color: colors.primary.shade100, ); } @@ -332,12 +332,12 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> { }), padding: WidgetStateProperty.all(EdgeInsets.zero), minimumSize: WidgetStateProperty.all(Size.zero), - elevation: const WidgetStatePropertyAll(ZetaSpacing.none), + elevation: WidgetStatePropertyAll(Zeta.of(context).spacing.none), ), child: Icon( rounded ? ZetaIcons.more_horizontal_round : ZetaIcons.more_horizontal_sharp, - size: ZetaSpacing.large, - ).paddingHorizontal(ZetaSpacing.small).paddingVertical(ZetaSpacing.minimum), + size: Zeta.of(context).spacing.large, + ).paddingHorizontal(Zeta.of(context).spacing.small).paddingVertical(Zeta.of(context).spacing.minimum), ), ); } @@ -346,11 +346,11 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> { return Row( children: widget.children .divide( - const Row( + Row( children: [ - SizedBox(width: ZetaSpacing.small), - ZetaIcon(ZetaIcons.chevron_right, size: ZetaSpacing.xl_1), - SizedBox(width: ZetaSpacing.small), + SizedBox(width: Zeta.of(context).spacing.small), + ZetaIcon(ZetaIcons.chevron_right, size: Zeta.of(context).spacing.xl), + SizedBox(width: Zeta.of(context).spacing.small), ], ), ) diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index e4f69692..e3274e4c 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -231,14 +231,14 @@ class _ZetaGroupButtonState extends State { _controller.dispose(); } - double get _padding => widget.isLarge ? ZetaSpacing.large : ZetaSpacing.medium; + double get _padding => widget.isLarge ? Zeta.of(context).spacing.large : Zeta.of(context).spacing.medium; BorderSide _getBorderSide( ZetaColors colors, bool finalButton, ) { if (_controller.value.contains(WidgetState.focused)) { - return BorderSide(color: colors.blue.shade50, width: ZetaSpacingBase.x0_5); + return BorderSide(color: colors.blue.shade50, width: ZetaBorders.borderWidth); } if (_controller.value.contains(WidgetState.disabled)) { return BorderSide(color: colors.cool.shade40); @@ -282,12 +282,12 @@ class _ZetaGroupButtonState extends State { dropdownIcon = ZetaIcons.expand_less; } - const iconSize = ZetaSpacing.xl_1; + final iconSize = Zeta.of(context).spacing.xl; Widget? leadingIcon; if (selectedItem?.icon != null) { leadingIcon = IconTheme( - data: const IconThemeData( + data: IconThemeData( size: iconSize, ), child: selectedItem!.icon!, @@ -342,7 +342,7 @@ class _ZetaGroupButtonState extends State { if (widget.isInverse) return colors.cool.shade100.onColor; return colors.textDefault; }), - elevation: const WidgetStatePropertyAll(ZetaSpacing.none), + elevation: WidgetStatePropertyAll(Zeta.of(context).spacing.none), padding: WidgetStateProperty.all(EdgeInsets.zero), ), child: SelectionContainer.disabled( @@ -354,9 +354,9 @@ class _ZetaGroupButtonState extends State { if (widget.items != null) Icon( dropdownIcon, - size: ZetaSpacing.xl_1, + size: Zeta.of(context).spacing.xl, ), - ].divide(const SizedBox(width: ZetaSpacing.minimum)).toList(), + ].divide(SizedBox(width: Zeta.of(context).spacing.minimum)).toList(), ).paddingAll(_padding), ), ), diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index 5fc94b3c..031ea4a2 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -170,13 +170,15 @@ class ZetaButton extends ZetaStatelessWidget { @override Widget build(BuildContext context) { + final minConstraints = _minConstraints(context); + final iconSize = _iconSize(context); return Semantics( button: true, enabled: onPressed != null, label: semanticLabel ?? label, excludeSemantics: true, child: ConstrainedBox( - constraints: BoxConstraints(minHeight: _minConstraints, minWidth: _minConstraints), + constraints: BoxConstraints(minHeight: minConstraints, minWidth: minConstraints), child: FilledButton( focusNode: focusNode, onPressed: onPressed, @@ -193,7 +195,7 @@ class ZetaButton extends ZetaStatelessWidget { if (leadingIcon != null) Icon( leadingIcon, - size: _iconSize, + size: iconSize, ), if (label.isNotEmpty) Text( @@ -203,16 +205,16 @@ class ZetaButton extends ZetaStatelessWidget { if (trailingIcon != null) Icon( trailingIcon, - size: _iconSize, + size: iconSize, ), ] .divide( - const SizedBox( - width: ZetaSpacing.small, + SizedBox( + width: Zeta.of(context).spacing.small, ), ) .toList(), - ).paddingHorizontal(_textPadding), + ).paddingHorizontal(_textPadding(context)), ), ), ), @@ -221,39 +223,39 @@ class ZetaButton extends ZetaStatelessWidget { TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelSmall : ZetaTextStyles.labelLarge; - double get _minConstraints { + double _minConstraints(BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xl_8; + return Zeta.of(context).spacing.xl_8; case ZetaWidgetSize.medium: - return ZetaSpacing.xl_6; + return Zeta.of(context).spacing.xl_6; case ZetaWidgetSize.small: - return ZetaSpacing.xl_4; + return Zeta.of(context).spacing.xl_4; } } - double get _textPadding { + double _textPadding(BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.large; + return Zeta.of(context).spacing.large; case ZetaWidgetSize.medium: - return ZetaSpacing.medium; + return Zeta.of(context).spacing.medium; case ZetaWidgetSize.small: - return ZetaSpacing.minimum; + return Zeta.of(context).spacing.minimum; } } - double get _iconSize { + double _iconSize(BuildContext context) { switch (size) { case ZetaWidgetSize.large: case ZetaWidgetSize.medium: - return ZetaSpacing.xl_1; + return Zeta.of(context).spacing.xl; case ZetaWidgetSize.small: - return ZetaSpacing.large; + return Zeta.of(context).spacing.large; } } diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index b756c087..4aeee30b 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -90,7 +90,7 @@ ButtonStyle buttonStyle( final bool isSolid = type.solid || backgroundColor != null; return ButtonStyle( - minimumSize: WidgetStateProperty.all(const Size.square(ZetaSpacing.xl_4)), + minimumSize: WidgetStateProperty.all(Size.square(Zeta.of(context).spacing.xl_4)), shape: WidgetStateProperty.all( RoundedRectangleBorder(borderRadius: borderType.radius(context)), ), @@ -137,7 +137,7 @@ ButtonStyle buttonStyle( } // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused. if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.blue, width: ZetaSpacingBase.x0_5); + return BorderSide(color: colors.blue, width: ZetaBorders.borderWidth); } if (type.border) { return BorderSide( diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 78483964..2449b73b 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -131,31 +131,33 @@ class ZetaIconButton extends ZetaStatelessWidget { type, null, ), - child: SelectionContainer.disabled(child: ZetaIcon(icon, size: _iconSize).paddingAll(_iconPadding)), + child: SelectionContainer.disabled( + child: ZetaIcon(icon, size: _iconSize(context)).paddingAll(_iconPadding(context)), + ), ), ), ); } - double get _iconPadding { + double _iconPadding(BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.medium; + return Zeta.of(context).spacing.medium; case ZetaWidgetSize.medium: - return ZetaSpacing.small; + return Zeta.of(context).spacing.small; case ZetaWidgetSize.small: - return ZetaSpacing.minimum; + return Zeta.of(context).spacing.minimum; } } - double get _iconSize { + double _iconSize(BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xl_2; + return Zeta.of(context).spacing.xl_2; case ZetaWidgetSize.medium: - return ZetaSpacing.xl_2; + return Zeta.of(context).spacing.xl_2; case ZetaWidgetSize.small: - return ZetaSpacing.xl_1; + return Zeta.of(context).spacing.xl; } } diff --git a/lib/src/components/buttons/input_icon_button.dart b/lib/src/components/buttons/input_icon_button.dart index 54762d4b..4c6695a4 100644 --- a/lib/src/components/buttons/input_icon_button.dart +++ b/lib/src/components/buttons/input_icon_button.dart @@ -38,37 +38,37 @@ class InputIconButton extends StatelessWidget { /// {@macro zeta-widget-semantic-label} final String? semanticLabel; - double get _iconSize { + double _iconSize(BuildContext context) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xl_2; + return Zeta.of(context).spacing.xl_2; case ZetaWidgetSize.medium: - return ZetaSpacing.xl_1; + return Zeta.of(context).spacing.xl; case ZetaWidgetSize.small: - return ZetaSpacing.large; + return Zeta.of(context).spacing.large; } } @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - + final iconSize = _iconSize(context); return Semantics( button: true, label: semanticLabel, enabled: !disabled, excludeSemantics: true, child: IconButton( - padding: EdgeInsets.all(_iconSize / 2), + padding: EdgeInsets.all(iconSize / 2), constraints: BoxConstraints( - maxHeight: _iconSize * 2, - maxWidth: _iconSize * 2, - minHeight: _iconSize * 2, - minWidth: _iconSize * 2, + maxHeight: iconSize * 2, + maxWidth: iconSize * 2, + minHeight: iconSize * 2, + minWidth: iconSize * 2, ), color: !disabled ? color : colors.iconDisabled, onPressed: disabled ? null : onTap, - iconSize: _iconSize, + iconSize: iconSize, icon: ZetaIcon(icon), ), ); diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 2b39f8c6..654b73d7 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -111,8 +111,9 @@ class ZetaChatItem extends ZetaStatelessWidget { double _getSlidableExtend({ required int slidableActionsCount, required double maxScreenWidth, + required BuildContext context, }) { - final actionWith = slidableActionsCount * ZetaSpacing.xl_10; + final actionWith = slidableActionsCount * Zeta.of(context).spacing.xl_10; final maxButtonWidth = actionWith / maxScreenWidth; final extend = actionWith / maxScreenWidth; return extend.clamp(0, maxButtonWidth).toDouble(); @@ -167,6 +168,7 @@ class ZetaChatItem extends ZetaStatelessWidget { extentRatio: _getSlidableExtend( slidableActionsCount: actions.length, maxScreenWidth: constraints.maxWidth, + context: context, ), motion: const ScrollMotion(), children: paleButtonColors != null @@ -182,14 +184,16 @@ class ZetaChatItem extends ZetaStatelessWidget { child: Semantics( explicitChildNodes: explicitChildNodes, child: Padding( - padding: - const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.small), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.small, + ), child: Row( children: [ if (leading != null) _formatLeading!, Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -198,9 +202,9 @@ class ZetaChatItem extends ZetaStatelessWidget { children: [ if (highlighted) Container( - margin: const EdgeInsets.only(right: ZetaSpacing.minimum), - height: ZetaSpacing.small, - width: ZetaSpacing.small, + margin: EdgeInsets.only(right: Zeta.of(context).spacing.minimum), + height: Zeta.of(context).spacing.small, + width: Zeta.of(context).spacing.small, decoration: BoxDecoration(color: colors.primary, shape: BoxShape.circle), ), Flexible( @@ -226,16 +230,16 @@ class ZetaChatItem extends ZetaStatelessWidget { style: ZetaTextStyles.bodyXSmall, ), IconTheme( - data: const IconThemeData( - size: ZetaSpacing.large, + data: IconThemeData( + size: Zeta.of(context).spacing.large, ), child: Row( children: [ ...additionalIcons, if (enabledNotificationIcon) Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.minimum, + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, ), child: ZetaIcon( ZetaIcons.error, @@ -244,8 +248,8 @@ class ZetaChatItem extends ZetaStatelessWidget { ), if (enabledWarningIcon) Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.minimum, + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, ), child: Icon( Icons.circle_notifications, @@ -254,11 +258,11 @@ class ZetaChatItem extends ZetaStatelessWidget { ), if (_count != null) Container( - margin: const EdgeInsets.only( - left: ZetaSpacing.minimum, + margin: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, ), - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.small, + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, ), decoration: BoxDecoration( color: colors.primary, @@ -297,8 +301,8 @@ class ZetaChatItem extends ZetaStatelessWidget { ), if (starred != null) Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.minimum, + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.minimum, ), child: ZetaIcon( starred! ? ZetaIcons.star : ZetaIcons.star_outline, @@ -487,7 +491,7 @@ class ZetaSlidableAction extends StatelessWidget { return Expanded( child: SizedBox.expand( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.minimum), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.minimum), child: Semantics( label: semanticLabel, container: true, @@ -502,7 +506,7 @@ class ZetaSlidableAction extends StatelessWidget { shape: RoundedRectangleBorder(borderRadius: Zeta.of(context).radius.minimal), side: BorderSide.none, ), - icon: ZetaIcon(icon, size: ZetaSpacing.xl_4), + icon: ZetaIcon(icon, size: Zeta.of(context).spacing.xl_4), ), ), ), diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 30334245..7a70e67d 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -192,7 +192,7 @@ class _CheckboxState extends State { onTap: !widget.disabled ? () => widget.onChanged.call(!_checked) : null, borderRadius: Zeta.of(context).radius.full, child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: MouseRegion( cursor: !widget.disabled ? SystemMouseCursors.click : SystemMouseCursors.forbidden, onEnter: (event) => _setHovered(true), @@ -220,7 +220,7 @@ class _CheckboxState extends State { : ZetaIcon( widget.useIndeterminate ? ZetaIcons.remove : ZetaIcons.check_mark, color: widget.disabled ? theme.colors.iconDisabled : theme.colors.white, - size: ZetaSpacingBase.x3_5, + size: 14, // TODO(UX-1202): ZetaSpacingBase ); return Flex( @@ -239,17 +239,17 @@ class _CheckboxState extends State { ), ], color: _getBackground(theme), - border: Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5), + border: Border.all(color: _getBorderColor(theme), width: Zeta.of(context).spacing.minimum / 2), borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), - width: ZetaSpacing.xl_1, - height: ZetaSpacing.xl_1, + width: Zeta.of(context).spacing.xl, + height: Zeta.of(context).spacing.xl, child: icon, ), if (widget.label != null) Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: Text(widget.label!, style: ZetaTextStyles.bodyMedium), ), ), diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index 10d66fac..12ea4a16 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -105,7 +105,10 @@ class _ZetaChipState extends State { Widget _renderLeading(Color foregroundColor) { if (widget.leading.runtimeType == Icon) { - return IconTheme(data: IconThemeData(color: foregroundColor, size: ZetaSpacing.xl_1), child: widget.leading!); + return IconTheme( + data: IconThemeData(color: foregroundColor, size: Zeta.of(context).spacing.xl), + child: widget.leading!, + ); } else if (widget.leading.runtimeType == ZetaAvatar) { return (widget.leading! as ZetaAvatar).copyWith(size: ZetaAvatarSize.xxxs); } @@ -160,18 +163,23 @@ class _ZetaChipState extends State { double get _trailingPadding { if (widget.trailing != null) { if (widget.trailing.runtimeType == IconButton) { - return ZetaSpacing.none; + return Zeta.of(context).spacing.none; + } else { + return Zeta.of(context).spacing.small; } - return ZetaSpacingBase.x2_5; } - return ZetaSpacing.medium; + return Zeta.of(context).spacing.large; } - ValueListenableBuilder> child(ZetaColors colors, Color foregroundColor, {bool isDragging = false}) { + ValueListenableBuilder> child( + ZetaColors colors, + Color foregroundColor, { + bool isDragging = false, + }) { return ValueListenableBuilder( valueListenable: _controller, builder: (context, states, child) { - final double iconSize = selected ? ZetaSpacing.xl_2 : ZetaSpacing.none; + final double iconSize = selected ? Zeta.of(context).spacing.xl_2 : Zeta.of(context).spacing.none; final bool rounded = context.rounded; return InkWell( statesController: _controller, @@ -186,9 +194,9 @@ class _ZetaChipState extends State { }, child: AnimatedContainer( duration: Durations.short3, - height: ZetaSpacing.xl_5, + height: Zeta.of(context).spacing.xl_5, padding: EdgeInsets.fromLTRB( - widget.leading != null ? ZetaSpacingBase.x2_5 : ZetaSpacing.medium, + widget.leading != null ? Zeta.of(context).spacing.small : Zeta.of(context).spacing.medium, 0, _trailingPadding, 0, @@ -217,7 +225,7 @@ class _ZetaChipState extends State { BorderSide( color: _controller.value.contains(WidgetState.focused) ? colors.blue.shade50 : colors.borderDefault, width: _controller.value.contains(WidgetState.focused) - ? ZetaSpacingBase.x0_5 + ? ZetaBorders.borderWidth : !selected ? 1 : 0, @@ -241,15 +249,15 @@ class _ZetaChipState extends State { else if (widget.leading != null) _renderLeading(foregroundColor), if ((widget.selected != null && selected) || widget.leading != null) - const SizedBox.square(dimension: ZetaSpacing.small), + SizedBox.square(dimension: Zeta.of(context).spacing.small), Text( widget.label, style: ZetaTextStyles.bodySmall.apply(color: foregroundColor), ), if (widget.trailing != null) ...[ - const SizedBox.square(dimension: ZetaSpacing.small), + SizedBox.square(dimension: Zeta.of(context).spacing.small), IconTheme( - data: IconThemeData(color: foregroundColor, size: ZetaSpacing.xl_1), + data: IconThemeData(color: foregroundColor, size: Zeta.of(context).spacing.xl), child: trailing!, ), ], diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart index 44861543..376f9546 100644 --- a/lib/src/components/contact_item/contact_item.dart +++ b/lib/src/components/contact_item/contact_item.dart @@ -55,17 +55,17 @@ class ZetaContactItem extends ZetaStatelessWidget { child: Semantics( explicitChildNodes: explicitChildNodes, child: Padding( - padding: const EdgeInsets.only( - top: ZetaSpacing.small, - bottom: ZetaSpacing.small, - left: ZetaSpacing.xl_2, + padding: EdgeInsets.only( + top: Zeta.of(context).spacing.small, + bottom: Zeta.of(context).spacing.small, + left: Zeta.of(context).spacing.xl_2, ), child: Row( children: [ leading, Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart index ddc2547e..ebb059d0 100644 --- a/lib/src/components/dial_pad/dial_pad.dart +++ b/lib/src/components/dial_pad/dial_pad.dart @@ -114,14 +114,15 @@ class _ZetaDialPadState extends State { Widget build(BuildContext context) { return SelectionContainer.disabled( child: SizedBox( - width: (_buttonsPerRow * ZetaSpacing.xl_9) + ((_buttonsPerRow - 1) * ZetaSpacing.xl_5), + width: + (_buttonsPerRow * Zeta.of(context).spacing.xl_9) + ((_buttonsPerRow - 1) * Zeta.of(context).spacing.xl_5), child: GridView.count( crossAxisCount: _buttonsPerRow, shrinkWrap: true, semanticChildCount: _buttonValues.length, - mainAxisSpacing: ZetaSpacing.xl_2, + mainAxisSpacing: Zeta.of(context).spacing.xl_2, physics: const NeverScrollableScrollPhysics(), - crossAxisSpacing: ZetaSpacing.xl_5, + crossAxisSpacing: Zeta.of(context).spacing.xl_5, children: _buttonValues.entries .map( (e) => ZetaDialPadButton( @@ -192,8 +193,8 @@ class ZetaDialPadButton extends StatelessWidget { label: secondary, child: AnimatedContainer( duration: Durations.short2, - width: ZetaSpacing.xl_9, - height: ZetaSpacing.xl_9, + width: Zeta.of(context).spacing.xl_9, + height: Zeta.of(context).spacing.xl_9, decoration: ShapeDecoration( shape: const CircleBorder(), color: colors.warm.shade10, diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart index 8b389e7b..b39902eb 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -111,7 +111,7 @@ class _ZetaDialog extends ZetaStatelessWidget { children: [ if (icon != null) Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.medium), + padding: EdgeInsets.only(bottom: Zeta.of(context).spacing.medium), child: icon, ), if (title != null) @@ -127,10 +127,10 @@ class _ZetaDialog extends ZetaStatelessWidget { : null, titlePadding: context.deviceType == DeviceType.mobilePortrait ? null - : const EdgeInsets.only( - left: ZetaSpacing.xl_6, - right: ZetaSpacing.xl_6, - top: ZetaSpacing.xl_2, + : EdgeInsets.only( + left: Zeta.of(context).spacing.xl_6, + right: Zeta.of(context).spacing.xl_6, + top: Zeta.of(context).spacing.xl_2, ), titleTextStyle: zetaTextTheme.headlineSmall?.copyWith( color: zeta.colors.textDefault, @@ -138,11 +138,11 @@ class _ZetaDialog extends ZetaStatelessWidget { content: Text(message), contentPadding: context.deviceType == DeviceType.mobilePortrait ? null - : const EdgeInsets.only( - left: ZetaSpacing.xl_6, - right: ZetaSpacing.xl_6, - top: ZetaSpacing.medium, - bottom: ZetaSpacing.xl_2, + : EdgeInsets.only( + left: Zeta.of(context).spacing.xl_6, + right: Zeta.of(context).spacing.xl_6, + top: Zeta.of(context).spacing.medium, + bottom: Zeta.of(context).spacing.xl_2, ), contentTextStyle: context.deviceType == DeviceType.mobilePortrait ? zetaTextTheme.bodySmall?.copyWith(color: zeta.colors.textDefault) @@ -152,20 +152,23 @@ class _ZetaDialog extends ZetaStatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - if (hasButton) const SizedBox(height: ZetaSpacing.xl_2), + if (hasButton) SizedBox(height: Zeta.of(context).spacing.xl_2), if (tertiaryButton == null) Row( children: [ if (secondaryButton != null) Expanded(child: secondaryButton), - if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.large), + if (primaryButton != null && secondaryButton != null) + SizedBox(width: Zeta.of(context).spacing.large), if (primaryButton != null) Expanded(child: primaryButton), ], ) else ...[ if (primaryButton != null) primaryButton, - if (primaryButton != null && secondaryButton != null) const SizedBox(height: ZetaSpacing.medium), + if (primaryButton != null && secondaryButton != null) + SizedBox(height: Zeta.of(context).spacing.medium), if (secondaryButton != null) secondaryButton, - if (primaryButton != null || secondaryButton != null) const SizedBox(height: ZetaSpacing.small), + if (primaryButton != null || secondaryButton != null) + SizedBox(height: Zeta.of(context).spacing.small), Row( mainAxisAlignment: MainAxisAlignment.center, children: [tertiaryButton], @@ -178,13 +181,14 @@ class _ZetaDialog extends ZetaStatelessWidget { children: [ if (tertiaryButton != null) tertiaryButton, if (primaryButton != null || secondaryButton != null) ...[ - const SizedBox(width: ZetaSpacing.xl_2), + SizedBox(width: Zeta.of(context).spacing.xl_2), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ if (secondaryButton != null) secondaryButton, - if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.large), + if (primaryButton != null && secondaryButton != null) + SizedBox(width: Zeta.of(context).spacing.large), if (primaryButton != null) primaryButton, ], ), @@ -195,9 +199,9 @@ class _ZetaDialog extends ZetaStatelessWidget { ], actionsPadding: context.deviceType == DeviceType.mobilePortrait ? null - : const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xl_6, - vertical: ZetaSpacing.xl_2, + : EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.xl_6, + vertical: Zeta.of(context).spacing.xl_2, ), ), ); diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 257e9e91..92143b38 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -462,7 +462,7 @@ class _DropdownItemState extends State<_DropdownItem> { if (leading != null) { leading = Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.medium), + padding: EdgeInsets.only(right: Zeta.of(context).spacing.medium), child: leading, ); } @@ -477,9 +477,9 @@ class _DropdownItemState extends State<_DropdownItem> { statesController: controller, style: _getStyle(colors), child: Padding( - padding: const EdgeInsets.symmetric( - vertical: ZetaSpacingBase.x2_5, - horizontal: ZetaSpacing.medium, + padding: EdgeInsets.symmetric( + vertical: Zeta.of(context).spacing.small, + horizontal: Zeta.of(context).spacing.medium, ), child: Row( mainAxisSize: MainAxisSize.min, @@ -488,6 +488,7 @@ class _DropdownItemState extends State<_DropdownItem> { Expanded( child: Text( widget.value.label, + style: ZetaTextStyles.bodyMedium.copyWith(color: colors.textDefault, height: 1.5), ), ), ], @@ -517,7 +518,7 @@ class _DropdownItemState extends State<_DropdownItem> { }, ); case ZetaDropdownMenuType.standard: - return widget.value.icon ?? const SizedBox(width: ZetaSpacing.xl_2); + return widget.value.icon ?? SizedBox(width: Zeta.of(context).spacing.xl_2); } } @@ -552,7 +553,7 @@ class _DropdownItemState extends State<_DropdownItem> { ), side: WidgetStateBorderSide.resolveWith((states) { if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.borderPrimary, width: ZetaSpacing.xl_1); + return BorderSide(color: colors.borderPrimary, width: Zeta.of(context).spacing.xl); } return BorderSide.none; }), @@ -621,9 +622,9 @@ class _ZetaDropDownMenuState extends State<_ZetaDropDownMenu> { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; return Container( - padding: const EdgeInsets.all(ZetaSpacing.medium), + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), decoration: BoxDecoration( - color: colors.surfacePrimary, + color: colors.surfaceDefault, borderRadius: context.rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, boxShadow: const [ BoxShadow(blurRadius: 2, color: Color.fromRGBO(40, 51, 61, 0.04)), @@ -655,7 +656,7 @@ class _ZetaDropDownMenuState extends State<_ZetaDropDownMenu> { menuType: widget.menuType, ); }) - .divide(const SizedBox(height: ZetaSpacing.minimum)) + .divide(SizedBox(height: Zeta.of(context).spacing.minimum)) .toList(), ), ), diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index a9bf8d70..2f946f4a 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -118,7 +118,9 @@ class _ZetaFABState extends State { focusNode: widget.focusNode, style: ButtonStyle( padding: const WidgetStatePropertyAll(EdgeInsets.zero), - shape: WidgetStatePropertyAll(widget.shape.buttonShape(isExpanded: widget.expanded, size: widget.size)), + shape: WidgetStatePropertyAll( + widget.shape.buttonShape(isExpanded: widget.expanded, size: widget.size, context: context), + ), backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { return Zeta.of(context).colors.surfaceDisabled; @@ -135,7 +137,7 @@ class _ZetaFABState extends State { (Set states) { if (states.contains(WidgetState.focused)) { // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused. - return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaSpacingBase.x0_5); + return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.borderWidth); } return null; }, @@ -145,18 +147,21 @@ class _ZetaFABState extends State { duration: ZetaAnimationLength.normal, child: Padding( padding: widget.expanded - ? const EdgeInsets.symmetric(horizontal: ZetaSpacingBase.x3_5, vertical: ZetaSpacing.medium) - : EdgeInsets.all(widget.size.padding), + ? EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.large, + vertical: Zeta.of(context).spacing.medium, + ) + : EdgeInsets.all(widget.size.padding(context)), child: Row( mainAxisSize: MainAxisSize.min, children: [ - ZetaIcon(widget.icon, size: widget.size.iconSize), + ZetaIcon(widget.icon, size: widget.size.iconSize(context)), if (widget.expanded && widget.label != null) Row( mainAxisSize: MainAxisSize.min, children: [Text(widget.label!, style: ZetaTextStyles.labelLarge)], ), - ].divide(const SizedBox(width: ZetaSpacing.small)).toList(), + ].divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(), ), ), ), @@ -179,7 +184,7 @@ extension on ZetaFabType { } extension on ZetaWidgetBorder { - OutlinedBorder buttonShape({required bool isExpanded, required ZetaFabSize size}) { + OutlinedBorder buttonShape({required bool isExpanded, required ZetaFabSize size, required BuildContext context}) { if (this == ZetaWidgetBorder.full && !isExpanded) { return const CircleBorder(); } @@ -191,18 +196,25 @@ extension on ZetaWidgetBorder { isExpanded ? this == ZetaWidgetBorder.full ? size == ZetaFabSize.small - ? ZetaSpacing.xl_3 - : ZetaSpacing.xl_8 - : ZetaSpacing.small + ? Zeta.of(context).spacing.xl_3 + : Zeta.of(context).spacing.xl_8 + : Zeta.of(context).spacing.small : size == ZetaFabSize.small - ? ZetaSpacing.small - : ZetaSpacing.large, + ? Zeta.of(context).spacing.small + : Zeta.of(context).spacing.large, ), ); } } extension on ZetaFabSize { - double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.xl_2 : ZetaSpacing.xl_5; - double get padding => this == ZetaFabSize.small ? ZetaSpacing.large : ZetaSpacingBase.x7_5; + double iconSize(BuildContext context) { + return this == ZetaFabSize.small ? Zeta.of(context).spacing.xl_2 : Zeta.of(context).spacing.xl_5; + } + + double padding(BuildContext context) { + return this == ZetaFabSize.small + ? Zeta.of(context).spacing.large + : Zeta.of(context).spacing.minimum * 7.5; // TODO(UX-1202): ZetaSpacingBase + } } diff --git a/lib/src/components/filter_selection/filter_selection.dart b/lib/src/components/filter_selection/filter_selection.dart index 0c10a9f5..81728b86 100644 --- a/lib/src/components/filter_selection/filter_selection.dart +++ b/lib/src/components/filter_selection/filter_selection.dart @@ -35,7 +35,7 @@ class ZetaFilterSelection extends ZetaStatelessWidget { @override Widget build(BuildContext context) { return SizedBox( - height: ZetaSpacing.xl_7, + height: Zeta.of(context).spacing.xl_7, child: Row( children: [ Semantics( @@ -44,12 +44,12 @@ class ZetaFilterSelection extends ZetaStatelessWidget { excludeSemantics: true, enabled: onPressed != null, child: Container( - height: ZetaSpacing.xl_7, + height: Zeta.of(context).spacing.xl_7, color: Zeta.of(context).colors.surfaceDefault, child: IconButton( visualDensity: VisualDensity.compact, onPressed: onPressed, - icon: ZetaIcon(icon, size: ZetaSpacing.xl_2), + icon: ZetaIcon(icon, size: Zeta.of(context).spacing.xl_2), ), ), ), @@ -57,9 +57,9 @@ class ZetaFilterSelection extends ZetaStatelessWidget { child: ListView.builder( shrinkWrap: true, scrollDirection: Axis.horizontal, - padding: const EdgeInsets.all(ZetaSpacing.minimum), + padding: EdgeInsets.all(Zeta.of(context).spacing.minimum), itemCount: items.length, - itemBuilder: (context, index) => items[index].paddingHorizontal(ZetaSpacing.minimum), + itemBuilder: (context, index) => items[index].paddingHorizontal(Zeta.of(context).spacing.minimum), ), ), ], diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index cff75997..50830a34 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -76,13 +76,16 @@ class _GlobalHeaderState extends State { final deviceType = constraints.deviceType; return Container( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.medium, horizontal: ZetaSpacing.large), + padding: EdgeInsets.symmetric( + vertical: Zeta.of(context).spacing.medium, + horizontal: Zeta.of(context).spacing.large, + ), decoration: BoxDecoration(color: colors.surfacePrimary), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( - height: ZetaSpacing.xl_8, + height: Zeta.of(context).spacing.xl_8, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // Top Section @@ -90,7 +93,7 @@ class _GlobalHeaderState extends State { Row( children: [ Text(widget.title, style: ZetaTextStyles.h4), - const SizedBox.square(dimension: ZetaSpacing.medium), + SizedBox.square(dimension: Zeta.of(context).spacing.medium), if (deviceType.isLarge) // If using large screen, render some tabItems in to section ...renderedChildren(widget.tabItems) @@ -102,25 +105,29 @@ class _GlobalHeaderState extends State { Row( children: [ ...widget.actionButtons.map( - (e) => IconButton(onPressed: e.onPressed, icon: e.icon, iconSize: ZetaSpacing.xl_2), + (e) => IconButton( + onPressed: e.onPressed, + icon: e.icon, + iconSize: Zeta.of(context).spacing.xl_2, + ), ), if (widget.onAppsButton != null) ...[ Container( color: colors.borderDefault, width: 1, - height: ZetaSpacing.xl_2, - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), + height: Zeta.of(context).spacing.xl_2, + margin: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.minimum), ), IconButton(icon: const ZetaIcon(ZetaIcons.apps), onPressed: widget.onAppsButton), ], - const SizedBox(width: ZetaSpacing.small), + SizedBox(width: Zeta.of(context).spacing.small), if (widget.avatar != null) widget.avatar!.copyWith(size: ZetaAvatarSize.m), ], ), - ].gap(ZetaSpacing.medium), + ].gap(Zeta.of(context).spacing.medium), ), ), - const SizedBox(height: ZetaSpacing.small), + SizedBox(height: Zeta.of(context).spacing.small), Row( children: [ if (deviceType.isSmall && widget.searchBar != null) Expanded(child: widget.searchBar!), @@ -136,7 +143,7 @@ class _GlobalHeaderState extends State { ), ), ), - ].gap(ZetaSpacing.medium), + ].gap(Zeta.of(context).spacing.medium), ), if (widget.tabItems.isNotEmpty && deviceType.isSmall) SingleChildScrollView( diff --git a/lib/src/components/global_header/header_tab_item.dart b/lib/src/components/global_header/header_tab_item.dart index 301a03f5..787d4ace 100644 --- a/lib/src/components/global_header/header_tab_item.dart +++ b/lib/src/components/global_header/header_tab_item.dart @@ -72,10 +72,10 @@ class _ZetaGlobalHeaderItemState extends State { child: Row( children: [ Text(widget.label, style: TextStyle(color: foregroundColor)), - const SizedBox(width: ZetaSpacing.small), + SizedBox(width: Zeta.of(context).spacing.small), if (widget.dropdown != null) ZetaIcon(ZetaIcons.expand_more, color: foregroundColor), ], - ).paddingHorizontal(ZetaSpacing.xl_2).paddingVertical(ZetaSpacing.medium), + ).paddingHorizontal(Zeta.of(context).spacing.xl_2).paddingVertical(Zeta.of(context).spacing.medium), ), ), ); diff --git a/lib/src/components/in_page_banner/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart index bdeff304..38f52592 100644 --- a/lib/src/components/in_page_banner/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -49,60 +49,71 @@ class ZetaInPageBanner extends ZetaStatelessWidget { return ZetaRoundedScope( rounded: rounded, - child: DecoratedBox( + child: Container( decoration: BoxDecoration( color: colors.surface, border: Border.all(color: colors.border), borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), - child: Padding( - padding: const EdgeInsets.all(ZetaSpacingBase.x0_5), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.medium, start: ZetaSpacingBase.x2_5), - child: ZetaIcon( - customIcon ?? status.icon, - size: ZetaSpacing.xl_1, - color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, + padding: EdgeInsetsDirectional.only( + bottom: Zeta.of(context).spacing.medium, + start: Zeta.of(context).spacing.medium, + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Padding( + padding: EdgeInsetsDirectional.only( + top: Zeta.of(context).spacing.medium, ), - ), - Expanded( - child: Column( + child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox(height: ZetaSpacing.small), - if (hasTitle) - Text( - title!, - style: ZetaTextStyles.labelLarge, - ).paddingBottom(ZetaSpacing.minimum), - DefaultTextStyle( - style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault), - child: content, + ZetaIcon( + customIcon ?? status.icon, + size: Zeta.of(context).spacing.xl, + color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, + ), + SizedBox(width: Zeta.of(context).spacing.small), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (hasTitle) + Text( + title!, + style: ZetaTextStyles.labelLarge.copyWith(height: 20 / 16), + ).paddingBottom(Zeta.of(context).spacing.minimum), + DefaultTextStyle( + style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault), + child: content, + ), + if (actions.isNotEmpty) + Row( + children: actions + .map( + (e) => e.copyWith(size: ZetaWidgetSize.medium, type: ZetaButtonType.outlineSubtle), + ) + .divide(SizedBox.square(dimension: Zeta.of(context).spacing.small)) + .toList(), + ).paddingTop(Zeta.of(context).spacing.large), + ], + ), ), - if (actions.isNotEmpty) - Row( - children: actions - .map((e) => e.copyWith(size: ZetaWidgetSize.medium, type: ZetaButtonType.outlineSubtle)) - .divide(const SizedBox.square(dimension: ZetaSpacing.small)) - .toList(), - ).paddingTop(ZetaSpacing.large), - const SizedBox(height: ZetaSpacingBase.x2_5), ], ), ), - if (onClose != null) - IconButton( - onPressed: onClose, - icon: const ZetaIcon( - ZetaIcons.close, - size: ZetaSpacing.xl_1, - ), + ), + if (onClose != null) + IconButton( + onPressed: onClose, + icon: ZetaIcon( + ZetaIcons.close, + size: Zeta.of(context).spacing.xl, ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), - ), + ), + ].divide(SizedBox.square(dimension: Zeta.of(context).spacing.small)).toList(), ), ), ); diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index 7f5264de..7beb9973 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -164,7 +164,7 @@ class ZetaListItem extends ZetaStatelessWidget { final divide = showDivider ?? listScope?.showDivider ?? false; final Widget? leadingWidget = - leading ?? ((listScope?.indentItems ?? false) ? const SizedBox(width: ZetaSpacing.xl_2) : null); + leading ?? ((listScope?.indentItems ?? false) ? SizedBox(width: Zeta.of(context).spacing.xl_2) : null); return SelectionContainer.disabled( child: MergeSemantics( @@ -174,7 +174,7 @@ class ZetaListItem extends ZetaStatelessWidget { onTap: onTap, excludeFromSemantics: true, child: Container( - constraints: const BoxConstraints(minHeight: ZetaSpacing.xl_9), + constraints: BoxConstraints(minHeight: Zeta.of(context).spacing.xl_9), decoration: BoxDecoration( border: Border( bottom: BorderSide( @@ -183,9 +183,9 @@ class ZetaListItem extends ZetaStatelessWidget { ), ), child: Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.large, - right: ZetaSpacing.small, + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.large, + right: Zeta.of(context).spacing.small, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -195,8 +195,8 @@ class ZetaListItem extends ZetaStatelessWidget { children: [ if (leadingWidget != null) Padding( - padding: const EdgeInsets.only( - right: ZetaSpacing.small, + padding: EdgeInsets.only( + right: Zeta.of(context).spacing.small, ), child: leadingWidget, ), @@ -224,8 +224,8 @@ class ZetaListItem extends ZetaStatelessWidget { ), if (trailing != null) Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.large, + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.large, ), child: trailing, ), diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart index e179795e..9e88dc3e 100644 --- a/lib/src/components/list_item/notification_list_item.dart +++ b/lib/src/components/list_item/notification_list_item.dart @@ -115,22 +115,22 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { child: ZetaIcon( ZetaIcons.important_notification, color: colors.white, - size: ZetaSpacing.medium, + size: Zeta.of(context).spacing.medium, ), ), - ].gap(ZetaSpacing.minimum), + ].gap(Zeta.of(context).spacing.minimum), ), ], ), body, - ].gap(ZetaSpacing.minimum), + ].gap(Zeta.of(context).spacing.minimum), ), ), - ].gap(ZetaSpacing.small), + ].gap(Zeta.of(context).spacing.small), ), Container(alignment: Alignment.centerRight, child: action), ], - ).paddingAll(ZetaSpacing.small), + ).paddingAll(Zeta.of(context).spacing.small), ), ), ); @@ -142,8 +142,9 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { return BoxDecoration( color: notificationRead ? colors.surfacePrimary : colors.surfaceSelected, borderRadius: Zeta.of(context).radius.rounded, - border: - (showDivider ?? false) ? Border(bottom: BorderSide(width: ZetaSpacing.minimum, color: colors.blue)) : null, + border: (showDivider ?? false) + ? Border(bottom: BorderSide(width: Zeta.of(context).spacing.minimum, color: colors.blue)) + : null, ); } } @@ -211,13 +212,13 @@ class ZetaNotificationBadge extends StatelessWidget { : icon != null ? ZetaIcon( icon, - size: ZetaSpacing.xl_8, + size: Zeta.of(context).spacing.xl_8, color: iconColor, ) : ClipRRect( borderRadius: Zeta.of(context).radius.rounded, child: SizedBox.fromSize( - size: const Size.square(ZetaSpacing.xl_8), // Image radius + size: Size.square(Zeta.of(context).spacing.xl_8), // Image radius child: image!.copyWith(fit: BoxFit.cover), ), ); diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index fb7ad8e2..bbd939fd 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -103,7 +103,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { /// {@macro zeta-widget-semantic-label} final String? semanticLabel; - Row _generateNavigationItemRow(List items) { + Row _generateNavigationItemRow(List items, BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items.map((navItem) { @@ -112,6 +112,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { selected: index == currentIndex, item: navItem, onTap: () => onTap?.call(index), + context: context, ); }).toList(), ); @@ -138,30 +139,30 @@ class ZetaNavigationBar extends ZetaStatelessWidget { child = Row( mainAxisAlignment: splitItems ? MainAxisAlignment.spaceBetween : MainAxisAlignment.spaceAround, children: [ - _generateNavigationItemRow(leftItems), + _generateNavigationItemRow(leftItems, context), if (dividerIndex != null) Container( color: colors.borderSubtle, width: _navigationItemBorderWidth, - height: ZetaSpacing.xl_7, + height: Zeta.of(context).spacing.xl_7, ), - _generateNavigationItemRow(rightItems), + _generateNavigationItemRow(rightItems, context), ], ); } else if (action != null) { child = Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - _generateNavigationItemRow(items), + _generateNavigationItemRow(items, context), action!, ], ); } else { - child = _generateNavigationItemRow(items); + child = _generateNavigationItemRow(items, context); } return Container( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.medium), decoration: BoxDecoration( color: colors.surfacePrimary, border: Border(top: BorderSide(color: colors.borderSubtle)), @@ -190,16 +191,19 @@ class _NavigationItem extends ZetaStatelessWidget { required this.selected, required this.item, required this.onTap, + required this.context, }); final bool selected; final ZetaNavigationBarItem item; final VoidCallback onTap; + final BuildContext context; - Widget _getBadge(BuildContext context) { + Widget get badge { final ZetaColors colors = Zeta.of(context).colors; return Positioned( - right: ZetaSpacing.minimum, + top: Zeta.of(context).spacing.minimum, + right: Zeta.of(context).spacing.minimum, child: DecoratedBox( decoration: BoxDecoration( color: colors.surfacePrimary, @@ -232,27 +236,27 @@ class _NavigationItem extends ZetaStatelessWidget { explicitChildNodes: true, label: item.label, child: Container( - padding: - const EdgeInsets.only(left: ZetaSpacing.small, right: ZetaSpacing.small, bottom: ZetaSpacing.small), + padding: EdgeInsets.only( + left: Zeta.of(context).spacing.small, + right: Zeta.of(context).spacing.small, + bottom: Zeta.of(context).spacing.small, + ), child: Column( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: ZetaSpacing.xl_7, - height: ZetaSpacing.xl_4 - _navigationItemBorderWidth, + width: Zeta.of(context).spacing.xl_7, + height: Zeta.of(context).spacing.xl_4 - _navigationItemBorderWidth, child: Stack( children: [ - Positioned( - left: ZetaSpacingBase.x2_5, - top: ZetaSpacing.small - _navigationItemBorderWidth, - right: ZetaSpacingBase.x2_5, - child: ZetaIcon(item.icon, color: elementColor, size: ZetaSpacing.xl_2), - ), - if (item.badge != null) _getBadge(context), + Center( + child: ZetaIcon(item.icon, color: elementColor, size: Zeta.of(context).spacing.xl_2), + ).paddingTop(Zeta.of(context).spacing.small), + if (item.badge != null) badge, ], ), ), - const SizedBox(height: ZetaSpacing.small), + SizedBox(height: Zeta.of(context).spacing.small), if (item.label != null) ExcludeSemantics( child: Text( @@ -274,6 +278,7 @@ class _NavigationItem extends ZetaStatelessWidget { properties ..add(DiagnosticsProperty('selected', selected)) ..add(DiagnosticsProperty('item', item)) - ..add(ObjectFlagProperty.has('onTap', onTap)); + ..add(ObjectFlagProperty.has('onTap', onTap)) + ..add(DiagnosticsProperty('context', context)); } } diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index ff17ea09..5d4e7595 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -17,8 +17,8 @@ class ZetaNavigationRail extends ZetaStatelessWidget { required this.items, this.selectedIndex, this.onSelect, - this.margin = const EdgeInsets.all(ZetaSpacing.xl_1), - this.itemSpacing = const EdgeInsets.only(bottom: ZetaSpacing.minimum), + this.margin, + this.itemSpacing, this.itemPadding, this.wordWrap, this.semanticLabel, @@ -34,25 +34,25 @@ class ZetaNavigationRail extends ZetaStatelessWidget { final void Function(int)? onSelect; /// The margin around the [ZetaNavigationRail]. - /// Default is: + /// If undefined, defaults to: /// ``` - /// const EdgeInsets.all(ZetaSpacing.xl_1) + /// EdgeInsets.all(Zeta.of(context).spacing.xl) /// ``` - final EdgeInsets margin; + final EdgeInsets? margin; /// The spacing between items in [ZetaNavigationRail]. - /// Default is: + /// If undefined, defaults to: /// ``` - /// const EdgeInsets.only(bottom: ZetaSpacing.minimum) + /// EdgeInsets.only(bottom: Zeta.of(context).spacing.minimum) /// ``` - final EdgeInsets itemSpacing; + final EdgeInsets? itemSpacing; /// The padding within an item in [ZetaNavigationRail]. /// Default is: /// ``` - /// const EdgeInsets.symmetric( - /// horizontal: ZetaSpacing.small, - /// vertical: ZetaSpacing.medium, + /// EdgeInsets.symmetric( + /// horizontal: Zeta.of(context).spacing.small, + /// vertical: Zeta.of(context).spacing.medium, /// ), /// ``` final EdgeInsets? itemPadding; @@ -88,7 +88,7 @@ class ZetaNavigationRail extends ZetaStatelessWidget { child: Semantics( label: semanticLabel, child: Padding( - padding: margin, + padding: margin ?? EdgeInsets.all(Zeta.of(context).spacing.xl), child: IntrinsicWidth( child: Column( children: [ @@ -97,7 +97,7 @@ class ZetaNavigationRail extends ZetaStatelessWidget { children: [ Expanded( child: Padding( - padding: itemSpacing, + padding: EdgeInsets.only(bottom: Zeta.of(context).spacing.minimum), child: _ZetaNavigationRailItemContent( label: items[i].label, icon: items[i].icon, @@ -139,6 +139,7 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { final EdgeInsets? padding; final bool? wordWrap; + // TODO(UX-1173): No hover state for navigation rail items @override Widget build(BuildContext context) { final zeta = Zeta.of(context); @@ -160,16 +161,16 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { borderRadius: context.rounded ? Zeta.of(context).radius.rounded : null, ), child: ConstrainedBox( - constraints: const BoxConstraints( - minWidth: ZetaSpacing.xl_9, - minHeight: ZetaSpacing.xl_9, + constraints: BoxConstraints( + minWidth: Zeta.of(context).spacing.xl_9, + minHeight: Zeta.of(context).spacing.xl_9, ), child: SelectionContainer.disabled( child: Padding( padding: padding ?? - const EdgeInsets.symmetric( - horizontal: ZetaSpacing.small, - vertical: ZetaSpacing.medium, + EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + vertical: Zeta.of(context).spacing.medium, ), child: Column( mainAxisAlignment: MainAxisAlignment.center, @@ -182,7 +183,7 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { : selected ? zeta.colors.textDefault : zeta.colors.cool.shade70, - size: ZetaSpacing.xl_2, + size: Zeta.of(context).spacing.xl_2, ), child: icon!, ), diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 489deb98..e4b7b929 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -5,9 +5,6 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -const _itemHeight = ZetaSpacing.xl_5; -const _itemWidth = ZetaSpacing.xl_4; - /// The type of a [ZetaPagination] enum ZetaPaginationType { /// A standard pagination with buttons for each page. @@ -217,7 +214,7 @@ class _ZetaPaginationState extends State { return Semantics( label: widget.semanticDropdown, child: Container( - height: ZetaSpacing.xl_6, + height: Zeta.of(context).spacing.xl_6, decoration: BoxDecoration( border: Border.all(color: colors.borderSubtle), @@ -228,13 +225,11 @@ class _ZetaPaginationState extends State { items: items, onChanged: (val) => _onItemPressed(val!), value: _currentPage, - icon: const ZetaIcon(ZetaIcons.expand_more).paddingStart(ZetaSpacing.small), + icon: const ZetaIcon(ZetaIcons.expand_more).paddingStart(Zeta.of(context).spacing.small), underline: const Nothing(), - style: Theme.of(context).textTheme.bodyLarge?.copyWith( - color: colors.textSubtle, - ), - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.medium, + style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: colors.textSubtle), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, ), ), ), @@ -283,7 +278,7 @@ class _ZetaPaginationState extends State { return Row( key: _paginationKey, mainAxisSize: MainAxisSize.min, - children: buttons.divide(const SizedBox(width: ZetaSpacing.small)).toList(), + children: buttons.divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(), ); }, ), @@ -330,19 +325,22 @@ class _PaginationItem extends ZetaStatelessWidget { } else if (icon != null) { child = ZetaIcon( icon, - color: disabled ? colors.iconDisabled : colors.iconDefault, + color: disabled ? colors.textDisabled : colors.textDefault, semanticLabel: semanticLabel, ); } + final itemHeight = Zeta.of(context).spacing.xl_5; + final itemWidth = Zeta.of(context).spacing.xl_4; + return Semantics( button: true, enabled: !disabled, child: ConstrainedBox( - constraints: const BoxConstraints( - minHeight: _itemHeight, - maxHeight: _itemHeight, - minWidth: _itemWidth, + constraints: BoxConstraints( + minHeight: itemHeight, + maxHeight: itemHeight, + minWidth: itemWidth, ), child: Material( borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, @@ -359,7 +357,7 @@ class _PaginationItem extends ZetaStatelessWidget { enableFeedback: false, child: Container( alignment: Alignment.center, - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.minimum), decoration: BoxDecoration( borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), @@ -389,10 +387,12 @@ class _Elipsis extends StatelessWidget { @override Widget build(BuildContext context) { - return const SizedBox( - width: _itemWidth, - height: _itemHeight, - child: Center(child: Text('...')), + final itemHeight = Zeta.of(context).spacing.xl_5; + final itemWidth = Zeta.of(context).spacing.xl_4; + return SizedBox( + width: itemWidth, + height: itemHeight, + child: const Center(child: Text('...')), ); } } diff --git a/lib/src/components/phone_input/phone_input.dart b/lib/src/components/phone_input/phone_input.dart index b842e31c..c6ce6a5f 100644 --- a/lib/src/components/phone_input/phone_input.dart +++ b/lib/src/components/phone_input/phone_input.dart @@ -60,6 +60,7 @@ class ZetaPhoneInput extends ZetaFormField { final _ZetaPhoneInputState state = field as _ZetaPhoneInputState; final colors = Zeta.of(field.context).colors; + final spacing = Zeta.of(field.context).spacing; final newRounded = rounded ?? field.context.rounded; return InternalTextInput( @@ -77,11 +78,11 @@ class ZetaPhoneInput extends ZetaFormField { keyboardType: TextInputType.phone, prefixText: state._selectedCountry.dialCode, borderRadius: BorderRadius.only( - topRight: newRounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero, - bottomRight: newRounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero, + topRight: newRounded ? Radius.circular(spacing.minimum) : Radius.zero, + bottomRight: newRounded ? Radius.circular(spacing.minimum) : Radius.zero, ), externalPrefix: ZetaDropdown( - offset: const Offset(0, ZetaSpacing.medium), + offset: Offset(0, spacing.medium), onChange: !disabled ? state.onDropdownChanged : null, value: state._selectedCountry.dialCode, onDismissed: state.onDropdownDismissed, @@ -95,12 +96,14 @@ class ZetaPhoneInput extends ZetaFormField { onTap: !disabled ? dropdowncontroller.toggle : null, child: Container( constraints: BoxConstraints( - maxHeight: size == ZetaWidgetSize.large ? ZetaSpacing.xl_8 : ZetaSpacing.xl_6, + maxHeight: size == ZetaWidgetSize.large + ? Zeta.of(context).spacing.xl_8 + : Zeta.of(context).spacing.xl_6, ), decoration: BoxDecoration( borderRadius: BorderRadius.only( - topLeft: newRounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero, - bottomLeft: newRounded ? const Radius.circular(ZetaSpacing.minimum) : Radius.zero, + topLeft: newRounded ? Radius.circular(spacing.minimum) : Radius.zero, + bottomLeft: newRounded ? Radius.circular(spacing.minimum) : Radius.zero, ), border: Border( left: borderSide, @@ -117,16 +120,16 @@ class ZetaPhoneInput extends ZetaFormField { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.only( - left: ZetaSpacing.medium, - right: ZetaSpacing.small, + padding: EdgeInsets.only( + left: spacing.medium, + right: spacing.small, ), child: selectedItem?.icon, ), ZetaIcon( !dropdowncontroller.isOpen ? ZetaIcons.expand_more : ZetaIcons.expand_less, color: !disabled ? colors.iconDefault : colors.iconDisabled, - size: ZetaSpacing.xl_1, + size: Zeta.of(context).spacing.xl, ), ], ), diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index 64715919..cb373cfc 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -105,7 +105,7 @@ class _ZetaProgressBarState extends ZetaProgressState { : ''), style: ZetaTextStyles.titleMedium, textAlign: TextAlign.start, - ).paddingBottom(ZetaSpacing.large), + ).paddingBottom(Zeta.of(context).spacing.large), Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -131,13 +131,13 @@ class _ZetaProgressBarState extends ZetaProgressState { } /// Returns thickness of progress bar based on its weight. - double get _weight => widget.isThin ? ZetaSpacing.small : ZetaSpacing.large; + double get _weight => widget.isThin ? Zeta.of(context).spacing.small : Zeta.of(context).spacing.large; Widget bufferingWidget(ZetaColors colors) { final Iterable> extraList = List.generate( 3, (e) => [ - const SizedBox(width: ZetaSpacing.large), + SizedBox(width: Zeta.of(context).spacing.large), Container( width: _weight, height: _weight, diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index d1a84a57..b678c946 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -87,7 +87,7 @@ class _ZetaProgressCircleState extends ZetaProgressState { textVal, style: widget.size != ZetaCircleSizes.s ? ZetaTextStyles.labelSmall - : ZetaTextStyles.labelSmall.copyWith(fontSize: ZetaSpacing.small), + : ZetaTextStyles.labelSmall.copyWith(fontSize: Zeta.of(context).spacing.small), ); return ConstrainedBox( @@ -100,7 +100,7 @@ class _ZetaProgressCircleState extends ZetaProgressState { painter: _CirclePainter( progress: animation.value, rounded: context.rounded, - colors: Zeta.of(context).colors, + context: context, ), child: Center( child: widget.size == ZetaCircleSizes.xs @@ -128,11 +128,12 @@ class _ZetaProgressCircleState extends ZetaProgressState { color: colors.surfaceHover, borderRadius: Zeta.of(context).radius.full, ), - padding: const EdgeInsets.all(ZetaSpacing.small), + padding: EdgeInsets.all(Zeta.of(context).spacing.small), child: ZetaIcon( ZetaIcons.close, - size: - widget.size == ZetaCircleSizes.s ? ZetaSpacing.medium : ZetaSpacing.large, + size: widget.size == ZetaCircleSizes.s + ? Zeta.of(context).spacing.medium + : Zeta.of(context).spacing.large, ), ), ) @@ -151,15 +152,15 @@ class _ZetaProgressCircleState extends ZetaProgressState { Size _getSize() { switch (widget.size) { case ZetaCircleSizes.xs: - return const Size(ZetaSpacing.xl_2, ZetaSpacing.xl_2); + return Size(Zeta.of(context).spacing.xl_2, Zeta.of(context).spacing.xl_2); case ZetaCircleSizes.s: - return const Size(ZetaSpacing.xl_5, ZetaSpacing.xl_5); + return Size(Zeta.of(context).spacing.xl_5, Zeta.of(context).spacing.xl_5); case ZetaCircleSizes.m: - return const Size(ZetaSpacing.xl_6, ZetaSpacing.xl_6); + return Size(Zeta.of(context).spacing.xl_6, Zeta.of(context).spacing.xl_6); case ZetaCircleSizes.l: - return const Size(ZetaSpacing.xl_8, ZetaSpacing.xl_8); + return Size(Zeta.of(context).spacing.xl_8, Zeta.of(context).spacing.xl_8); case ZetaCircleSizes.xl: - return const Size(ZetaSpacing.xl_9, ZetaSpacing.xl_9); + return Size(Zeta.of(context).spacing.xl_9, Zeta.of(context).spacing.xl_9); } } @@ -180,7 +181,7 @@ typedef CirclePainter = _CirclePainter; /// Class definition for [_CirclePainter] class _CirclePainter extends CustomPainter { ///Constructor for [_CirclePainter] - _CirclePainter({this.progress = 0, this.rounded = true, required this.colors}); + _CirclePainter({this.progress = 0, this.rounded = true, required this.context}); ///Percentage of progress in decimal value, defaults to 0 final double progress; @@ -188,17 +189,17 @@ class _CirclePainter extends CustomPainter { ///Is circle rounded, defaults to true final bool rounded; - /// ZetaColors - final ZetaColors colors; + final BuildContext context; - final _paint = Paint() - ..strokeWidth = ZetaSpacing.minimum - ..style = PaintingStyle.stroke; + final _paint = Paint(); @override void paint(Canvas canvas, Size size) { if (rounded) _paint.strokeCap = StrokeCap.round; - _paint.color = colors.primary; + _paint + ..strokeWidth = Zeta.of(context).spacing.minimum + ..style = PaintingStyle.stroke + ..color = Zeta.of(context).colors.primary; const double fullCircle = 2 * math.pi; diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index a986ac53..38786490 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -51,7 +51,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix @override Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - _painter ??= _RadioPainter(colors: zetaColors); + _painter ??= _RadioPainter(context: context); return ZetaRoundedScope( rounded: context.rounded, @@ -73,7 +73,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix mainAxisSize: MainAxisSize.min, children: [ buildToggleable( - size: const Size(ZetaSpacing.xl_6, ZetaSpacing.xl_6), + size: Size(Zeta.of(context).spacing.xl_6, Zeta.of(context).spacing.xl_6), painter: _painter! ..position = position ..reaction = reaction @@ -83,7 +83,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix ..reactionColor = Colors.transparent ..hoverColor = Colors.transparent ..focusColor = zetaColors.blue.shade50 - ..splashRadius = ZetaSpacing.medium + ..splashRadius = Zeta.of(context).spacing.medium ..downPosition = downPosition ..isFocused = states.contains(WidgetState.focused) ..isHovered = states.contains(WidgetState.hovered) @@ -108,10 +108,10 @@ class _ZetaRadioState extends State> with TickerProviderStateMix style: ZetaTextStyles.bodyMedium.copyWith( color: states.contains(WidgetState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault, - height: 1.33, + height: 4 / 3, ), child: widget.label!, - ).paddingEnd(ZetaSpacing.minimum), + ).paddingEnd(Zeta.of(context).spacing.minimum), ], ), ), @@ -160,20 +160,21 @@ const double _kOuterRadius = 10; const double _kInnerRadius = 5; class _RadioPainter extends ToggleablePainter { - _RadioPainter({required this.colors}); + _RadioPainter({required this.context}); - final ZetaColors colors; + final BuildContext context; @override void paint(Canvas canvas, Size size) { paintRadialReaction(canvas: canvas, origin: size.center(Offset.zero)); final Offset center = (Offset.zero & size).center; + final colors = Zeta.of(context).colors; // Background mask for focus final Paint paint = Paint() ..color = colors.surfacePrimary ..style = PaintingStyle.stroke - ..strokeWidth = ZetaSpacingBase.x2_5; + ..strokeWidth = Zeta.of(context).spacing.small + ZetaBorders.borderWidth; if (isFocused) canvas.drawCircle(center, _kInnerRadius, paint); // Outer circle @@ -184,7 +185,7 @@ class _RadioPainter extends ToggleablePainter { ? inactiveColor : activeColor ..style = PaintingStyle.stroke - ..strokeWidth = ZetaSpacingBase.x0_5; + ..strokeWidth = ZetaBorders.borderWidth; canvas.drawCircle(center, _kOuterRadius, paint); // Inner circle diff --git a/lib/src/components/search_bar/search_bar.dart b/lib/src/components/search_bar/search_bar.dart index 3e1326c5..85a3f2d1 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -40,9 +40,9 @@ class ZetaSearchBar extends ZetaTextFormField { final _ZetaSearchBarState state = field as _ZetaSearchBarState; final BorderRadius borderRadius = switch (shape) { - ZetaWidgetBorder.rounded => Zeta.of(field.context).radius.minimal, - ZetaWidgetBorder.full => Zeta.of(field.context).radius.full, - _ => Zeta.of(field.context).radius.none, + ZetaWidgetBorder.rounded => zeta.radius.minimal, + ZetaWidgetBorder.full => zeta.radius.full, + _ => zeta.radius.none, }; final defaultInputBorder = OutlineInputBorder( @@ -53,7 +53,7 @@ class ZetaSearchBar extends ZetaTextFormField { final focusedBorder = defaultInputBorder.copyWith( borderSide: BorderSide( color: zeta.colors.blue.shade50, - width: ZetaSpacing.minimum, + width: zeta.spacing.minimum, ), ); @@ -66,14 +66,14 @@ class ZetaSearchBar extends ZetaTextFormField { switch (size) { case ZetaWidgetSize.large: - iconSize = ZetaSpacing.xl_2; - padding = ZetaSpacing.medium; + iconSize = zeta.spacing.xl_2; + padding = zeta.spacing.medium; case ZetaWidgetSize.medium: - iconSize = ZetaSpacing.xl_1; - padding = ZetaSpacing.small; + iconSize = zeta.spacing.xl; + padding = zeta.spacing.small; case ZetaWidgetSize.small: - iconSize = ZetaSpacing.large; - padding = ZetaSpacing.minimum; + iconSize = zeta.spacing.large; + padding = zeta.spacing.minimum; } return ZetaRoundedScope( @@ -102,16 +102,16 @@ class ZetaSearchBar extends ZetaTextFormField { color: !disabled ? zeta.colors.textSubtle : zeta.colors.textDisabled, ), prefixIcon: Padding( - padding: const EdgeInsets.only(left: ZetaSpacingBase.x2_5, right: ZetaSpacing.small), + padding: EdgeInsets.only(left: zeta.spacing.medium, right: zeta.spacing.small), child: ZetaIcon( ZetaIcons.search, color: !disabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, size: iconSize, ), ), - prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.xl_2, - minWidth: ZetaSpacing.xl_2, + prefixIconConstraints: BoxConstraints( + minHeight: zeta.spacing.xl_2, + minWidth: zeta.spacing.xl_2, ), suffixIcon: IntrinsicHeight( child: Row( @@ -160,9 +160,9 @@ class ZetaSearchBar extends ZetaTextFormField { ], ), ), - suffixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.xl_2, - minWidth: ZetaSpacing.xl_2, + suffixIconConstraints: BoxConstraints( + minHeight: zeta.spacing.xl_2, + minWidth: zeta.spacing.xl_2, ), filled: !disabled ? null : true, fillColor: !disabled ? null : zeta.colors.cool.shade30, diff --git a/lib/src/components/segmented_control/segmented_control.dart b/lib/src/components/segmented_control/segmented_control.dart index 6632e4a8..d03969e7 100644 --- a/lib/src/components/segmented_control/segmented_control.dart +++ b/lib/src/components/segmented_control/segmented_control.dart @@ -138,7 +138,7 @@ class _ZetaSegmentedControlState extends State> cursor: SystemMouseCursors.click, child: SelectionContainer.disabled( child: Container( - padding: const EdgeInsets.all(ZetaSpacing.minimum), + padding: EdgeInsets.all(Zeta.of(context).spacing.minimum), decoration: BoxDecoration( color: colors.surfaceDisabled, borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, @@ -225,15 +225,15 @@ class _SegmentState extends State<_Segment> with TickerProviderStateMixin< children: [ widget.child, IconTheme( - data: const IconThemeData(size: ZetaSpacing.xl_1), + data: IconThemeData(size: Zeta.of(context).spacing.xl), child: DefaultTextStyle( style: ZetaTextStyles.labelMedium.copyWith( color: colors.textDefault, ), child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xl_4, - vertical: ZetaSpacing.minimum, + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.xl_4, + vertical: Zeta.of(context).spacing.minimum, ), child: widget.child, ), @@ -348,7 +348,7 @@ class _RenderSegmentedControl extends RenderBox @override double computeMaxIntrinsicHeight(double width) { RenderBox? child = firstChild; - double maxMaxChildHeight = ZetaSpacing.xl_3; + double maxMaxChildHeight = Zeta.of(context).spacing.xl_3; while (child != null) { final double childHeight = child.getMaxIntrinsicHeight(width); maxMaxChildHeight = math.max(maxMaxChildHeight, childHeight); @@ -373,7 +373,7 @@ class _RenderSegmentedControl extends RenderBox @override double computeMinIntrinsicHeight(double width) { RenderBox? child = firstChild; - double maxMinChildHeight = ZetaSpacing.xl_3; + double maxMinChildHeight = Zeta.of(context).spacing.xl_3; while (child != null) { final double childHeight = child.getMinIntrinsicHeight(width); maxMinChildHeight = math.max(maxMinChildHeight, childHeight); @@ -392,7 +392,7 @@ class _RenderSegmentedControl extends RenderBox maxMinChildWidth = math.max(maxMinChildWidth, childWidth); child = nonSeparatorChildAfter(child); } - return (maxMinChildWidth + 2 * ZetaSpacing.xl_4) * childCount + totalSeparatorWidth; + return (maxMinChildWidth + 2 * Zeta.of(context).spacing.xl_4) * childCount + totalSeparatorWidth; } @override @@ -583,7 +583,7 @@ class _RenderSegmentedControl extends RenderBox Size _calculateChildSize(BoxConstraints constraints) { final int childCount = this.childCount ~/ 2 + 1; double childWidth = (constraints.minWidth - totalSeparatorWidth) / childCount; - double maxHeight = ZetaSpacing.xl_3; + double maxHeight = Zeta.of(context).spacing.xl_3; RenderBox? child = firstChild; while (child != null) { childWidth = math.max(childWidth, child.getMaxIntrinsicWidth(double.infinity) + 2); diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart index ec49e0d8..630e0675 100644 --- a/lib/src/components/select_input/select_input.dart +++ b/lib/src/components/select_input/select_input.dart @@ -45,7 +45,7 @@ class ZetaSelectInput extends ZetaFormField { onChange: !disabled ? state.setItem : null, key: state.dropdownKey, value: state._selectedItem?.value, - offset: const Offset(0, ZetaSpacing.xl_1 * -1), + offset: Offset(0, Zeta.of(field.context).spacing.xl * -1), onDismissed: state.onDropdownDismissed, builder: (context, _, controller) { return InternalTextInput( diff --git a/lib/src/components/slider/slider.dart b/lib/src/components/slider/slider.dart index 55ef8306..dedd953b 100644 --- a/lib/src/components/slider/slider.dart +++ b/lib/src/components/slider/slider.dart @@ -84,9 +84,13 @@ class _ZetaSliderState extends State { /// Thumb thumbColor: colors.surfaceDefaultInverse, disabledThumbColor: colors.surfaceDisabled, - overlayShape: _SliderThumb(size: ZetaSpacingBase.x2_5, rounded: context.rounded, color: _activeColor), + overlayShape: _SliderThumb( + size: Zeta.of(context).spacing.xl / 2, + rounded: context.rounded, + color: _activeColor, + ), thumbShape: _SliderThumb( - size: ZetaSpacing.small, + size: Zeta.of(context).spacing.large / 2, rounded: context.rounded, color: _activeColor, ), diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index 5366fb4e..4b11974d 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -94,7 +94,7 @@ class ZetaSnackBar extends SnackBar { content: ZetaRoundedScope( rounded: rounded ?? context.rounded, child: Padding( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.small), + padding: EdgeInsets.symmetric(vertical: Zeta.of(context).spacing.small), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -104,7 +104,7 @@ class ZetaSnackBar extends SnackBar { _LeadingIcon(type, leadingIcon), Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.medium), + padding: EdgeInsets.only(left: Zeta.of(context).spacing.medium), child: _Content(type: type, child: content), ), ), @@ -293,15 +293,15 @@ class _IconButton extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.minimum), + padding: EdgeInsets.symmetric(vertical: Zeta.of(context).spacing.minimum), child: IconButton( style: IconButton.styleFrom( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.medium), tapTargetSize: MaterialTapTargetSize.shrinkWrap, - minimumSize: const Size(ZetaSpacing.xl_1, ZetaSpacing.xl_1), + minimumSize: Size(Zeta.of(context).spacing.xl, Zeta.of(context).spacing.xl), ), onPressed: onPressed, - icon: ZetaIcon(ZetaIcons.close, color: color, size: ZetaSpacing.xl_1), + icon: ZetaIcon(ZetaIcons.close, color: color, size: Zeta.of(context).spacing.xl), ), ); } @@ -330,13 +330,13 @@ class _ActionButton extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.medium), child: TextButton( style: TextButton.styleFrom( textStyle: ZetaTextStyles.labelLarge, - padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.medium, - vertical: ZetaSpacing.minimum, + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.minimum, ), tapTargetSize: MaterialTapTargetSize.shrinkWrap, minimumSize: Size.zero, @@ -394,7 +394,7 @@ class _LeadingIcon extends StatelessWidget { final colors = Zeta.of(context).colors; return Padding( - padding: type != null || icon != null ? const EdgeInsets.only(left: ZetaSpacing.medium) : EdgeInsets.zero, + padding: type != null || icon != null ? EdgeInsets.only(left: Zeta.of(context).spacing.medium) : EdgeInsets.zero, child: IconTheme( data: IconThemeData( color: _getIconColor(colors, type), diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart index 11c50aa8..89e3b7fb 100644 --- a/lib/src/components/stepper/stepper.dart +++ b/lib/src/components/stepper/stepper.dart @@ -90,8 +90,8 @@ class _ZetaStepperState extends State with TickerProviderStateMixin final rounded = context.rounded; return SizedBox( - width: ZetaSpacing.xl_4, - height: ZetaSpacing.xl_4, + width: Zeta.of(context).spacing.xl_4, + height: Zeta.of(context).spacing.xl_4, child: AnimatedContainer( curve: Curves.fastOutSlowIn, duration: kThemeAnimationDuration, @@ -119,8 +119,8 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Widget _getVerticalIcon(int index) { return SizedBox( - width: ZetaSpacing.xl_8, - height: ZetaSpacing.xl_8, + width: Zeta.of(context).spacing.xl_8, + height: Zeta.of(context).spacing.xl_8, child: AnimatedContainer( curve: Curves.fastOutSlowIn, duration: kThemeAnimationDuration, @@ -173,7 +173,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin final subtitle = widget.steps[index].subtitle; return Container( - margin: EdgeInsets.only(top: _isFirst(index) ? 0.0 : ZetaSpacing.xl_2), + margin: EdgeInsets.only(top: _isFirst(index) ? 0.0 : Zeta.of(context).spacing.xl_2), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -181,9 +181,9 @@ class _ZetaStepperState extends State with TickerProviderStateMixin children: [ _getVerticalIcon(index), Container( - margin: const EdgeInsets.only(top: ZetaSpacing.minimum), - width: ZetaSpacing.minimum, - height: ZetaSpacing.xl_8, + margin: EdgeInsets.only(top: Zeta.of(context).spacing.minimum), + width: Zeta.of(context).spacing.minimum, + height: Zeta.of(context).spacing.xl_8, decoration: BoxDecoration( borderRadius: Zeta.of(context).radius.full, color: switch (widget.steps[index].type) { @@ -197,7 +197,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin ), Expanded( child: Container( - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_2), + margin: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.xl_2), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -294,8 +294,8 @@ class _ZetaStepperState extends State with TickerProviderStateMixin children: [ Center( child: Padding( - padding: const EdgeInsets.symmetric( - vertical: ZetaSpacing.medium, + padding: EdgeInsets.symmetric( + vertical: Zeta.of(context).spacing.medium, ), child: _buildHorizontalIcon(index), ), @@ -308,12 +308,12 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Expanded( child: Container( key: Key('line$index'), - margin: const EdgeInsets.only( - top: ZetaSpacing.xl_3, - right: ZetaSpacing.large, - left: ZetaSpacing.large, + margin: EdgeInsets.only( + top: Zeta.of(context).spacing.xl_3, + right: Zeta.of(context).spacing.large, + left: Zeta.of(context).spacing.large, ), - height: ZetaSpacingBase.x0_5, + height: ZetaBorders.borderWidth, decoration: BoxDecoration( borderRadius: Zeta.of(context).radius.full, color: switch (widget.steps[index].type) { @@ -343,7 +343,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Material( color: Colors.transparent, child: Container( - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_2), + margin: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.xl_2), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: children, diff --git a/lib/src/components/stepper_input/stepper_input.dart b/lib/src/components/stepper_input/stepper_input.dart index a4c8d02a..e8d72af3 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -136,9 +136,9 @@ class ZetaStepperInputState extends State { double get _height { if (widget.size != ZetaStepperInputSize.large) { - return ZetaSpacing.xl_6; + return Zeta.of(context).spacing.xl_6; } else { - return ZetaSpacing.xl_8; + return Zeta.of(context).spacing.xl_8; } } @@ -188,7 +188,7 @@ class ZetaStepperInputState extends State { children: [ _getButton(), SizedBox( - width: ZetaSpacing.xl_9, + width: Zeta.of(context).spacing.xl_9, child: TextFormField( keyboardType: TextInputType.number, enabled: !disabled, @@ -217,7 +217,7 @@ class ZetaStepperInputState extends State { ), ), _getButton(increase: true), - ].divide(const SizedBox(width: ZetaSpacing.small)).toList(), + ].divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(), ), ); } diff --git a/lib/src/components/switch/material_switch.dart b/lib/src/components/switch/material_switch.dart index 2e926bca..99e8da0d 100644 --- a/lib/src/components/switch/material_switch.dart +++ b/lib/src/components/switch/material_switch.dart @@ -13,7 +13,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; -const double _kSwitchMinSize = kMinInteractiveDimension - 8.0; +double _kSwitchMinSize = kMinInteractiveDimension - 8.0; // Zeta change: // Converted Flutter's private stateless [_MaterialSwitch] diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 065a372e..8afaba2b 100644 --- a/lib/src/components/switch/zeta_switch.dart +++ b/lib/src/components/switch/zeta_switch.dart @@ -98,7 +98,7 @@ class ZetaSwitch extends StatelessWidget { ), value: value ?? false, onChanged: onChanged, - thumbSize: _variant == ZetaSwitchType.web ? const Size.square(ZetaSpacing.xl_2) : null, + thumbSize: _variant == ZetaSwitchType.web ? Size.square(Zeta.of(context).spacing.xl_2) : null, ); } } diff --git a/lib/src/components/tabs/tab.dart b/lib/src/components/tabs/tab.dart index f3c8a8dd..51fe5052 100644 --- a/lib/src/components/tabs/tab.dart +++ b/lib/src/components/tabs/tab.dart @@ -11,26 +11,31 @@ class ZetaTab extends Tab { String? text, super.key, }) : super( - child: Semantics( - button: true, - child: SelectionContainer.disabled( - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - if (icon != null) ...[ - const SizedBox(width: ZetaSpacing.medium), - icon, - ], - if (text != null) - Padding( - padding: icon != null ? const EdgeInsets.only(left: ZetaSpacing.small) : EdgeInsets.zero, - child: Text(text), - ), - if (icon != null) const SizedBox(width: ZetaSpacing.medium), - ], - ), - ), + child: Builder( + builder: (context) { + return Semantics( + button: true, + child: SelectionContainer.disabled( + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (icon != null) ...[ + SizedBox(width: Zeta.of(context).spacing.medium), + icon, + ], + if (text != null) + Padding( + padding: + icon != null ? EdgeInsets.only(left: Zeta.of(context).spacing.small) : EdgeInsets.zero, + child: Text(text), + ), + if (icon != null) SizedBox(width: Zeta.of(context).spacing.medium), + ], + ), + ), + ); + }, ), ); } diff --git a/lib/src/components/tabs/tab_bar.dart b/lib/src/components/tabs/tab_bar.dart index 0e5cb483..e4a561e5 100644 --- a/lib/src/components/tabs/tab_bar.dart +++ b/lib/src/components/tabs/tab_bar.dart @@ -22,7 +22,7 @@ class ZetaTabBar extends TabBar { indicator: UnderlineTabIndicator( borderSide: BorderSide( color: Zeta.of(context).colors.primary, - width: onTap != null ? ZetaSpacing.minimum : ZetaSpacing.none, + width: onTap != null ? Zeta.of(context).spacing.minimum : Zeta.of(context).spacing.none, ), borderRadius: Zeta.of(context).radius.none, ), diff --git a/lib/src/components/text_input/hint_text.dart b/lib/src/components/text_input/hint_text.dart index d3fbec76..3631b507 100644 --- a/lib/src/components/text_input/hint_text.dart +++ b/lib/src/components/text_input/hint_text.dart @@ -46,11 +46,11 @@ class ZetaHintText extends ZetaStatelessWidget { children: [ ZetaIcon( errorText != null ? ZetaIcons.error : ZetaIcons.info, - size: ZetaSpacing.large, + size: Zeta.of(context).spacing.large, color: elementColor, ), - const SizedBox( - width: ZetaSpacing.minimum, + SizedBox( + width: Zeta.of(context).spacing.minimum, ), Expanded( child: Text( @@ -60,7 +60,7 @@ class ZetaHintText extends ZetaStatelessWidget { ), ), ], - ).paddingTop(ZetaSpacing.small); + ).paddingTop(Zeta.of(context).spacing.small); } @override diff --git a/lib/src/components/text_input/input_label.dart b/lib/src/components/text_input/input_label.dart index d65f0a5d..6e08b575 100644 --- a/lib/src/components/text_input/input_label.dart +++ b/lib/src/components/text_input/input_label.dart @@ -54,7 +54,7 @@ class ZetaInputLabel extends ZetaStatelessWidget { color: disabled ? colors.textDisabled : colors.textDefault, ), ), - if (requirementWidget != null) requirementWidget.paddingStart(ZetaSpacing.minimum), + if (requirementWidget != null) requirementWidget.paddingStart(Zeta.of(context).spacing.minimum), ], ); } diff --git a/lib/src/components/text_input/internal_text_input.dart b/lib/src/components/text_input/internal_text_input.dart index d550b0af..2a4488b8 100644 --- a/lib/src/components/text_input/internal_text_input.dart +++ b/lib/src/components/text_input/internal_text_input.dart @@ -189,15 +189,15 @@ class InternalTextInputState extends State { EdgeInsets get _contentPadding { switch (widget.size) { case ZetaWidgetSize.large: - return const EdgeInsets.symmetric( - horizontal: ZetaSpacing.medium, - vertical: ZetaSpacing.large, + return EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.large, ); case ZetaWidgetSize.small: case ZetaWidgetSize.medium: - return const EdgeInsets.symmetric( - horizontal: ZetaSpacing.medium, - vertical: ZetaSpacing.small, + return EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.medium, + vertical: Zeta.of(context).spacing.small, ); } } @@ -215,14 +215,14 @@ class InternalTextInputState extends State { late final double height; switch (widget.size) { case ZetaWidgetSize.large: - width = ZetaSpacing.xl_6; - height = ZetaSpacing.xl_8; + width = Zeta.of(context).spacing.xl_6; + height = Zeta.of(context).spacing.xl_8; case ZetaWidgetSize.medium: - width = ZetaSpacing.xl_6; - height = ZetaSpacing.xl_6; + width = Zeta.of(context).spacing.xl_6; + height = Zeta.of(context).spacing.xl_6; case ZetaWidgetSize.small: - width = ZetaSpacing.xl_6; - height = ZetaSpacing.xl_4; + width = Zeta.of(context).spacing.xl_6; + height = Zeta.of(context).spacing.xl_4; } return BoxConstraints( minWidth: width, @@ -257,7 +257,7 @@ class InternalTextInputState extends State { child: Text( text, ), - ).paddingHorizontal(ZetaSpacing.small); + ).paddingHorizontal(Zeta.of(context).spacing.small); } final style = textStyle ?? _affixStyle; return DefaultTextStyle( @@ -277,11 +277,11 @@ class InternalTextInputState extends State { ); OutlineInputBorder _focusedBorder(bool rounded) => _baseBorder(rounded).copyWith( - borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaSpacingBase.x0_5), + borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaBorders.borderWidth), ); // TODO(mikecoomber): change to colors.borderPrimary when added OutlineInputBorder _errorBorder(bool rounded) => _baseBorder(rounded).copyWith( - borderSide: BorderSide(color: _colors.error, width: ZetaSpacingBase.x0_5), + borderSide: BorderSide(color: _colors.error, width: ZetaBorders.borderWidth), ); @override @@ -311,7 +311,7 @@ class InternalTextInputState extends State { requirementLevel: widget.requirementLevel, disabled: widget.disabled, ), - const SizedBox(height: ZetaSpacing.minimum), + SizedBox(height: Zeta.of(context).spacing.minimum), ], Row( children: [ diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart index 79d854fb..b3f8204a 100644 --- a/lib/src/components/tooltip/tooltip.dart +++ b/lib/src/components/tooltip/tooltip.dart @@ -42,9 +42,9 @@ class ZetaTooltip extends ZetaStatelessWidget { /// The padding inside the [ZetaTooltip]. /// Default is: /// ``` - /// const EdgeInsets.symmetric( - /// horizontal: ZetaSpacing.small, - /// vertical: ZetaSpacing.minimum, + /// EdgeInsets.symmetric( + /// horizontal: Zeta.of(context).spacing.small, + /// vertical: Zeta.of(context).spacing.minimum, /// ) /// ``` final EdgeInsets? padding; @@ -77,7 +77,7 @@ class ZetaTooltip extends ZetaStatelessWidget { final horizontalArrowWidth = [ZetaTooltipArrowDirection.left, ZetaTooltipArrowDirection.right].contains(arrowDirection) ? _horizontalArrowSize.width - : ZetaSpacing.none; + : Zeta.of(context).spacing.none; return ZetaRoundedScope( rounded: context.rounded, @@ -124,9 +124,9 @@ class ZetaTooltip extends ZetaStatelessWidget { ), child: Padding( padding: padding ?? - const EdgeInsets.symmetric( - horizontal: ZetaSpacing.small, - vertical: ZetaSpacing.minimum, + EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + vertical: Zeta.of(context).spacing.minimum, ), child: DefaultTextStyle( style: textStyle ?? diff --git a/lib/src/components/top_app_bar/extended_top_app_bar.dart b/lib/src/components/top_app_bar/extended_top_app_bar.dart index 4398852d..90fe6cc3 100644 --- a/lib/src/components/top_app_bar/extended_top_app_bar.dart +++ b/lib/src/components/top_app_bar/extended_top_app_bar.dart @@ -34,20 +34,19 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { - const searchBarOffsetTop = ZetaSpacing.minimum * 1.5; - const searchBarOffsetRight = ZetaSpacing.minimum * 22; - const maxExtent = ZetaSpacing.minimum * 26; - const leftMin = ZetaSpacing.large; - - const topMin = ZetaSpacing.xl_1; - const topMax = ZetaSpacing.minimum * 15; + final searchBarOffsetTop = Zeta.of(context).spacing.minimum * 1.5; + final searchBarOffsetRight = Zeta.of(context).spacing.minimum * 22; + final maxExtent = Zeta.of(context).spacing.minimum * 26; + final leftMin = Zeta.of(context).spacing.large; + final topMin = Zeta.of(context).spacing.xl; + final topMax = Zeta.of(context).spacing.minimum * 15; /// If there is no leading widget, the left margin should not change /// If there is a leading widget, the left margin should be the same as the leading widget's width plus padding - final leftMax = leading == null ? leftMin : _minExtent + ZetaSpacing.small; + final leftMax = leading == null ? leftMin : _minExtent + Zeta.of(context).spacing.small; return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.xl_9, maxHeight: maxExtent), + constraints: BoxConstraints(minHeight: Zeta.of(context).spacing.xl_9, maxHeight: maxExtent), child: ColoredBox( color: Zeta.of(context).colors.surfacePrimary, child: Stack( @@ -58,17 +57,24 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { topMin - (searchController != null && searchController!.isEnabled ? searchBarOffsetTop - : ZetaSpacing.none), + : Zeta.of(context).spacing.none), topMax, ) : topMax, - left: shrinks ? ((shrinkOffset / maxExtent) * ZetaSpacingBase.x50).clamp(leftMin, leftMax) : leftMin, - right: searchController != null && searchController!.isEnabled ? searchBarOffsetRight : ZetaSpacing.none, + left: shrinks ? ((shrinkOffset / maxExtent) * _maxExtent).clamp(leftMin, leftMax) : leftMin, + right: searchController != null && searchController!.isEnabled + ? searchBarOffsetRight + : Zeta.of(context).spacing.none, child: title, ), - if (leading != null) Positioned(top: ZetaSpacing.medium, left: ZetaSpacing.small, child: leading!), + if (leading != null) + Positioned(top: Zeta.of(context).spacing.medium, left: Zeta.of(context).spacing.small, child: leading!), if (actions != null) - Positioned(top: ZetaSpacing.medium, right: ZetaSpacing.small, child: Row(children: actions!)), + Positioned( + top: Zeta.of(context).spacing.medium, + right: Zeta.of(context).spacing.small, + child: Row(children: actions!), + ), ], ), ), diff --git a/lib/src/components/top_app_bar/search_top_app_bar.dart b/lib/src/components/top_app_bar/search_top_app_bar.dart index 53bfd6a5..50e40668 100644 --- a/lib/src/components/top_app_bar/search_top_app_bar.dart +++ b/lib/src/components/top_app_bar/search_top_app_bar.dart @@ -3,8 +3,6 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -const _extendedOffset = ZetaSpacing.minimum * 6.5; - /// Creates a search field used on a [ZetaTopAppBar]. /// {@category Components} class ZetaTopAppBarSearchField extends ZetaStatefulWidget { @@ -139,6 +137,8 @@ class _ZetaTopAppBarSearchFieldState extends State wit @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; + final extendedOffset = Zeta.of(context).spacing.minimum * 6.5; // TODO(UX-1202): Irregular spacing values + return ZetaRoundedScope( rounded: context.rounded, child: Stack( @@ -153,7 +153,7 @@ class _ZetaTopAppBarSearchFieldState extends State wit ], ), ConstrainedBox( - constraints: BoxConstraints(maxHeight: widget.isExtended ? _extendedOffset : double.infinity), + constraints: BoxConstraints(maxHeight: widget.isExtended ? extendedOffset : double.infinity), child: AnimatedBuilder( animation: _animationController, builder: (context, child) => Transform.scale( diff --git a/lib/src/components/top_app_bar/top_app_bar.dart b/lib/src/components/top_app_bar/top_app_bar.dart index e70d90cd..a1570584 100644 --- a/lib/src/components/top_app_bar/top_app_bar.dart +++ b/lib/src/components/top_app_bar/top_app_bar.dart @@ -169,7 +169,7 @@ class _ZetaTopAppBarState extends State { ? [ IconButtonTheme( data: IconButtonThemeData( - style: IconButton.styleFrom(iconSize: ZetaSpacing.xl_1), + style: IconButton.styleFrom(iconSize: Zeta.of(context).spacing.xl), ), child: Row( mainAxisSize: MainAxisSize.min, @@ -181,8 +181,8 @@ class _ZetaTopAppBarState extends State { ), if (widget.onSearchMicrophoneIconPressed != null) ...[ SizedBox( - height: ZetaSpacing.xl_2, - child: VerticalDivider(width: ZetaSpacingBase.x0_5, color: colors.cool.shade70), + height: Zeta.of(context).spacing.xl_2, + child: VerticalDivider(width: ZetaBorders.borderWidth, color: colors.cool.shade70), ), IconButton( onPressed: widget.onSearchMicrophoneIconPressed, @@ -234,12 +234,12 @@ class _ZetaTopAppBarState extends State { child: IconButtonTheme( data: IconButtonThemeData(style: IconButton.styleFrom(tapTargetSize: MaterialTapTargetSize.shrinkWrap)), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), + padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.minimum), child: AppBar( elevation: 0, scrolledUnderElevation: 0, iconTheme: IconThemeData(color: colors.cool.shade90), - leadingWidth: ZetaSpacing.xl_6, + leadingWidth: Zeta.of(context).spacing.xl_6, leading: widget.leading, automaticallyImplyLeading: widget.automaticallyImplyLeading, surfaceTintColor: Colors.transparent, diff --git a/lib/src/theme/tokens.dart b/lib/src/theme/tokens.dart index 7a02de99..4ec1e093 100644 --- a/lib/src/theme/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -6,6 +6,7 @@ import 'package:flutter/material.dart'; /// /// Semantic zeta spacings. /// {@category Theme} +@Deprecated('Use Zeta.of(context).spacing instead ' 'This has been deprecated as of 0.16.0') class ZetaSpacing { /// No spacing => 0px. static const double none = ZetaSpacingBase.x0; @@ -217,6 +218,7 @@ class ZetaRadius { ///Tokens that are used for Spacing ///{@category Theme} +@Deprecated('Use Zeta.of(context).spacing instead ' 'This has been deprecated as of 0.16.0') class ZetaSpacingBase { /// 0dp space static const double x0 = 0; @@ -332,3 +334,10 @@ class ZetaAnimationLength { /// 500ms static const verySlow = Duration(milliseconds: 500); } + +/// Temporary class to hold border values. +// TODO(Tokens): Remove this class and design / develop Zeta.of(context).border instead. +abstract final class ZetaBorders { + /// Border width + static double get borderWidth => 2; +} diff --git a/lib/src/utils/zeta.dart b/lib/src/utils/zeta.dart index 57fcfcdf..511706b5 100644 --- a/lib/src/utils/zeta.dart +++ b/lib/src/utils/zeta.dart @@ -77,6 +77,9 @@ class Zeta extends InheritedWidget { /// Gets the radius values based on the tokens. ZetaRadiiSemantics get radius => _semantics.radii; + /// Gets the spacing values based on the tokens. + ZetaSpacingSemantics get spacing => _semantics.size; + /// Gets the [ZetaPrimitives] instance based on the current brightness setting. /// /// This is a temporary function used whilst the full implementation of tokens is taking place. @@ -135,6 +138,7 @@ class Zeta extends InheritedWidget { ..add(DiagnosticsProperty('rounded', rounded)) ..add(DiagnosticsProperty('colors', colors)) ..add(EnumProperty('brightness', brightness)) - ..add(DiagnosticsProperty('radius', radius)); + ..add(DiagnosticsProperty('radius', radius)) + ..add(DiagnosticsProperty('spacing', spacing)); } } diff --git a/test/src/components/button/button_test.dart b/test/src/components/button/button_test.dart index 73e7ffa6..4acf577a 100644 --- a/test/src/components/button/button_test.dart +++ b/test/src/components/button/button_test.dart @@ -262,7 +262,7 @@ void main() { expect(button.size, ZetaWidgetSize.medium); expect( filledButton.style?.side?.resolve({WidgetState.focused}), - const BorderSide(color: ZetaColorBase.blue, width: ZetaSpacingBase.x0_5), + BorderSide(color: ZetaColorBase.blue, width: ZetaBorders.borderWidth), ); }); testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { diff --git a/test/src/components/fabs/fab_test.dart b/test/src/components/fabs/fab_test.dart index 64c191ca..422ef853 100644 --- a/test/src/components/fabs/fab_test.dart +++ b/test/src/components/fabs/fab_test.dart @@ -147,7 +147,7 @@ void main() { await tester.pumpAndSettle(); expect( filledButton.style?.side?.resolve({WidgetState.focused}), - BorderSide(color: ZetaColorBase.blue[50]!, width: ZetaSpacingBase.x0_5), + BorderSide(color: ZetaColorBase.blue[50]!, width: ZetaBorders.borderWidth), ); }); diff --git a/test/src/components/tooltip/tooltip_test.mocks.dart b/test/src/components/tooltip/tooltip_test.mocks.dart index 4e71d250..100599a8 100644 --- a/test/src/components/tooltip/tooltip_test.mocks.dart +++ b/test/src/components/tooltip/tooltip_test.mocks.dart @@ -54,8 +54,18 @@ class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSe ); } -class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { - _FakeWidget_3( +class _FakeZetaSpacingSemantics_3 extends _i1.SmartFake implements _i2.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_3( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { + _FakeWidget_4( Object parent, Invocation parentInvocation, ) : super( @@ -67,8 +77,8 @@ class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); } -class _FakeInheritedElement_4 extends _i1.SmartFake implements _i3.InheritedElement { - _FakeInheritedElement_4( +class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElement { + _FakeInheritedElement_5( Object parent, Invocation parentInvocation, ) : super( @@ -80,8 +90,8 @@ class _FakeInheritedElement_4 extends _i1.SmartFake implements _i3.InheritedElem String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); } -class _FakeDiagnosticsNode_5 extends _i1.SmartFake implements _i4.DiagnosticsNode { - _FakeDiagnosticsNode_5( +class _FakeDiagnosticsNode_6 extends _i1.SmartFake implements _i4.DiagnosticsNode { + _FakeDiagnosticsNode_6( Object parent, Invocation parentInvocation, ) : super( @@ -168,14 +178,27 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ), ) as _i2.ZetaRadiiSemantics); + @override + _i2.ZetaSpacingSemantics get spacing => (super.noSuchMethod( + Invocation.getter(#spacing), + returnValue: _FakeZetaSpacingSemantics_3( + this, + Invocation.getter(#spacing), + ), + returnValueForMissingStub: _FakeZetaSpacingSemantics_3( + this, + Invocation.getter(#spacing), + ), + ) as _i2.ZetaSpacingSemantics); + @override _i3.Widget get child => (super.noSuchMethod( Invocation.getter(#child), - returnValue: _FakeWidget_3( + returnValue: _FakeWidget_4( this, Invocation.getter(#child), ), - returnValueForMissingStub: _FakeWidget_3( + returnValueForMissingStub: _FakeWidget_4( this, Invocation.getter(#child), ), @@ -206,14 +229,14 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_4( + returnValue: _FakeInheritedElement_5( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_4( + returnValueForMissingStub: _FakeInheritedElement_5( this, Invocation.method( #createElement, @@ -338,7 +361,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #style: style, }, ), - returnValue: _FakeDiagnosticsNode_5( + returnValue: _FakeDiagnosticsNode_6( this, Invocation.method( #toDiagnosticsNode, @@ -349,7 +372,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { }, ), ), - returnValueForMissingStub: _FakeDiagnosticsNode_5( + returnValueForMissingStub: _FakeDiagnosticsNode_6( this, Invocation.method( #toDiagnosticsNode, diff --git a/test/src/utils/extensions_test.mocks.dart b/test/src/utils/extensions_test.mocks.dart index 2c2b0ae5..f4c8d9a7 100644 --- a/test/src/utils/extensions_test.mocks.dart +++ b/test/src/utils/extensions_test.mocks.dart @@ -134,8 +134,18 @@ class _FakeZetaRadiiSemantics_8 extends _i1.SmartFake implements _i6.ZetaRadiiSe ); } -class _FakeInheritedElement_9 extends _i1.SmartFake implements _i2.InheritedElement { - _FakeInheritedElement_9( +class _FakeZetaSpacingSemantics_9 extends _i1.SmartFake implements _i6.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_9( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeInheritedElement_10 extends _i1.SmartFake implements _i2.InheritedElement { + _FakeInheritedElement_10( Object parent, Invocation parentInvocation, ) : super( @@ -1544,6 +1554,19 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { ), ) as _i6.ZetaRadiiSemantics); + @override + _i6.ZetaSpacingSemantics get spacing => (super.noSuchMethod( + Invocation.getter(#spacing), + returnValue: _FakeZetaSpacingSemantics_9( + this, + Invocation.getter(#spacing), + ), + returnValueForMissingStub: _FakeZetaSpacingSemantics_9( + this, + Invocation.getter(#spacing), + ), + ) as _i6.ZetaSpacingSemantics); + @override _i2.Widget get child => (super.noSuchMethod( Invocation.getter(#child), @@ -1582,14 +1605,14 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_9( + returnValue: _FakeInheritedElement_10( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_9( + returnValueForMissingStub: _FakeInheritedElement_10( this, Invocation.method( #createElement, diff --git a/test/src/utils/rounded_test.mocks.dart b/test/src/utils/rounded_test.mocks.dart index 51bc12ef..1ea97859 100644 --- a/test/src/utils/rounded_test.mocks.dart +++ b/test/src/utils/rounded_test.mocks.dart @@ -54,8 +54,18 @@ class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSe ); } -class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { - _FakeWidget_3( +class _FakeZetaSpacingSemantics_3 extends _i1.SmartFake implements _i2.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_3( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { + _FakeWidget_4( Object parent, Invocation parentInvocation, ) : super( @@ -67,8 +77,8 @@ class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); } -class _FakeInheritedElement_4 extends _i1.SmartFake implements _i3.InheritedElement { - _FakeInheritedElement_4( +class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElement { + _FakeInheritedElement_5( Object parent, Invocation parentInvocation, ) : super( @@ -80,8 +90,8 @@ class _FakeInheritedElement_4 extends _i1.SmartFake implements _i3.InheritedElem String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); } -class _FakeDiagnosticsNode_5 extends _i1.SmartFake implements _i4.DiagnosticsNode { - _FakeDiagnosticsNode_5( +class _FakeDiagnosticsNode_6 extends _i1.SmartFake implements _i4.DiagnosticsNode { + _FakeDiagnosticsNode_6( Object parent, Invocation parentInvocation, ) : super( @@ -168,14 +178,27 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ), ) as _i2.ZetaRadiiSemantics); + @override + _i2.ZetaSpacingSemantics get spacing => (super.noSuchMethod( + Invocation.getter(#spacing), + returnValue: _FakeZetaSpacingSemantics_3( + this, + Invocation.getter(#spacing), + ), + returnValueForMissingStub: _FakeZetaSpacingSemantics_3( + this, + Invocation.getter(#spacing), + ), + ) as _i2.ZetaSpacingSemantics); + @override _i3.Widget get child => (super.noSuchMethod( Invocation.getter(#child), - returnValue: _FakeWidget_3( + returnValue: _FakeWidget_4( this, Invocation.getter(#child), ), - returnValueForMissingStub: _FakeWidget_3( + returnValueForMissingStub: _FakeWidget_4( this, Invocation.getter(#child), ), @@ -206,14 +229,14 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_4( + returnValue: _FakeInheritedElement_5( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_4( + returnValueForMissingStub: _FakeInheritedElement_5( this, Invocation.method( #createElement, @@ -338,7 +361,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #style: style, }, ), - returnValue: _FakeDiagnosticsNode_5( + returnValue: _FakeDiagnosticsNode_6( this, Invocation.method( #toDiagnosticsNode, @@ -349,7 +372,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { }, ), ), - returnValueForMissingStub: _FakeDiagnosticsNode_5( + returnValueForMissingStub: _FakeDiagnosticsNode_6( this, Invocation.method( #toDiagnosticsNode, diff --git a/test/src/zeta_test.dart b/test/src/zeta_test.dart index 1f6abea8..98b95eb9 100644 --- a/test/src/zeta_test.dart +++ b/test/src/zeta_test.dart @@ -168,6 +168,9 @@ void main() { final radius = diagnostics.properties.where((p) => p.name == 'radius').map((p) => p.toDescription()).first; expect(radius, "Instance of 'ZetaRadiiAA'"); + + final spacing = diagnostics.properties.where((p) => p.name == 'spacing').map((p) => p.toDescription()).first; + expect(spacing, "Instance of 'ZetaSpacingAA'"); }); }); }