diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart index 94ad7733..d9edcb1e 100644 --- a/example/lib/pages/components/avatar_example.dart +++ b/example/lib/pages/components/avatar_example.dart @@ -570,7 +570,7 @@ class AvatarExample extends StatelessWidget { ), ], ), - ].divide(const SizedBox(height: ZetaSpacing.xL2)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), ), ), ); @@ -584,20 +584,20 @@ extension on ZetaAvatarSize { return ZetaSpacingBase.x50; case ZetaAvatarSize.xxl: return ZetaSpacingBase.x30; - case ZetaAvatarSize.xl: - return ZetaSpacing.xL10; + case ZetaAvatarSize.xl_1: + return ZetaSpacing.xl_10; case ZetaAvatarSize.l: - return ZetaSpacing.xL9; + return ZetaSpacing.xl_9; case ZetaAvatarSize.m: - return ZetaSpacing.xL8; + return ZetaSpacing.xl_8; case ZetaAvatarSize.s: - return ZetaSpacing.xL6; + return ZetaSpacing.xl_6; case ZetaAvatarSize.xs: - return ZetaSpacing.xL5; + return ZetaSpacing.xl_5; case ZetaAvatarSize.xxs: - return ZetaSpacing.xL4; + return ZetaSpacing.xl_4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.xL2; + return ZetaSpacing.xl_2; } } } diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index f016fb85..5fe86ef2 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(), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), _PriorityPill(size: ZetaPriorityPillSize.small), _DividingText('Badge'), _Badge(), @@ -44,7 +44,7 @@ class _DividingText extends StatelessWidget { return Text( text, style: ZetaTextStyles.displayMedium, - ).paddingVertical(ZetaSpacing.xL4); + ).paddingVertical(ZetaSpacing.xl_4); } } @@ -73,7 +73,7 @@ class _StatusLabel extends StatelessWidget { statusLabelExampleRow(ZetaWidgetStatus.positive), statusLabelExampleRow(ZetaWidgetStatus.warning), statusLabelExampleRow(ZetaWidgetStatus.negative), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ); } } @@ -97,7 +97,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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -106,7 +106,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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -115,7 +115,7 @@ class _PriorityPill extends StatelessWidget { ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.high), ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.medium), ZetaPriorityPill(size: size, rounded: false, type: ZetaPriorityPillType.low), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ], ); @@ -145,7 +145,7 @@ class _Badge extends StatelessWidget { badgeExampleRow(ZetaWidgetStatus.warning), badgeExampleRow(ZetaWidgetStatus.negative), badgeExampleRow(ZetaWidgetStatus.neutral), - ].divide(const SizedBox(height: ZetaSpacing.xL2)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), ); } } @@ -177,14 +177,14 @@ class _Indicators extends StatelessWidget { ZetaIndicator.icon(), ZetaIndicator.icon(size: ZetaWidgetSize.medium), ZetaIndicator.icon(size: ZetaWidgetSize.small), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), ), @@ -193,7 +193,7 @@ class _Indicators extends StatelessWidget { ), ], ), - const SizedBox.square(dimension: ZetaSpacing.xL9), + const SizedBox.square(dimension: ZetaSpacing.xl_9), Column( children: [ Text( @@ -213,14 +213,14 @@ 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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ].divide(const SizedBox.square(dimension: ZetaSpacing.medium)).toList(), ), @@ -247,7 +247,7 @@ class _Tags extends StatelessWidget { ZetaTag.right(label: 'Sharp', rounded: false), ZetaTag.left(label: 'Rounded'), ZetaTag.right(label: 'Rounded'), - ].divide(SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ].divide(SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ); } diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart index 8218603e..fdea7179 100644 --- a/example/lib/pages/components/button_example.dart +++ b/example/lib/pages/components/button_example.dart @@ -114,7 +114,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.xL2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ), Expanded(child: const SizedBox()), @@ -140,10 +140,10 @@ class _ButtonExampleState extends State { size: ZetaWidgetSize.values[index == 0 ? 0 : index - 1], borderType: borderType, ), - ).divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(); + ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); } List inputButtons(ZetaWidgetBorder borderType) { @@ -164,10 +164,10 @@ class _ButtonExampleState extends State { ? ZetaIcons.delete_round : ZetaIcons.more_horizontal_round, ), - ).divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), + ).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(); + ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); } List groupButtons(ZetaWidgetBorder) { @@ -234,6 +234,6 @@ class _ButtonExampleState extends State { ), ], ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(); + ].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(); } } diff --git a/example/lib/pages/components/dialpad_example.dart b/example/lib/pages/components/dialpad_example.dart index e67836eb..121dc923 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.xL2)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(), ), ), ], diff --git a/example/lib/pages/components/global_header_example.dart b/example/lib/pages/components/global_header_example.dart index d1d0865d..e83759ae 100644 --- a/example/lib/pages/components/global_header_example.dart +++ b/example/lib/pages/components/global_header_example.dart @@ -44,9 +44,7 @@ class _GroupHeaderExampleState extends State { ], avatar: const ZetaAvatar(initials: 'PS'), ), - const SizedBox( - height: ZetaSpacing.xL, - ), + const SizedBox(height: ZetaSpacing.xl_1), ZetaGlobalHeader(title: "Title", tabItems: childrenTwo), ]), ), diff --git a/example/lib/pages/components/list_item_example.dart b/example/lib/pages/components/list_item_example.dart index af54abec..54831b0d 100644 --- a/example/lib/pages/components/list_item_example.dart +++ b/example/lib/pages/components/list_item_example.dart @@ -53,20 +53,20 @@ class _ListItemExampleState extends State { // Enabled Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), child: Text( "Enabled", style: ZetaTextStyles.titleLarge, ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL2), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_2), child: ZetaListItem(title: Text("List Item")), ), // Selected Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), child: Padding( padding: const EdgeInsets.all(8.0), child: Text( @@ -76,7 +76,7 @@ class _ListItemExampleState extends State { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL2), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_2), child: ZetaListItem( title: Text("List Item"), selected: _isSelected, @@ -92,14 +92,14 @@ class _ListItemExampleState extends State { // Disabled Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), child: Text( "Disabled", style: ZetaTextStyles.titleLarge, ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL2), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_2), child: ZetaListItem( title: Text("List Item"), enabled: false, diff --git a/example/lib/pages/components/navigation_rail_example.dart b/example/lib/pages/components/navigation_rail_example.dart index ba3b7202..178ae9fd 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), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: _selectedIndex == null ? const SizedBox() : Text( diff --git a/example/lib/pages/components/notification_list_example.dart b/example/lib/pages/components/notification_list_example.dart index 6c015bcb..e4b52927 100644 --- a/example/lib/pages/components/notification_list_example.dart +++ b/example/lib/pages/components/notification_list_example.dart @@ -59,7 +59,7 @@ class _NotificationListItemExampleState extends State { name: PaginationExample.name, child: Center( child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL9), + padding: const EdgeInsets.all(ZetaSpacing.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 f1877fe4..2c6d76ba 100644 --- a/example/lib/pages/components/password_input_example.dart +++ b/example/lib/pages/components/password_input_example.dart @@ -51,11 +51,11 @@ class _PasswordInputExampleState extends State { return null; }, ), - SizedBox(height: ZetaSpacing.xL6), + SizedBox(height: ZetaSpacing.xl_6), ...passwordInputExampleRow(ZetaWidgetSize.large), - Divider(height: ZetaSpacing.xL10), + Divider(height: ZetaSpacing.xl_10), ...passwordInputExampleRow(ZetaWidgetSize.medium), - Divider(height: ZetaSpacing.xL10), + Divider(height: ZetaSpacing.xl_10), ...passwordInputExampleRow(ZetaWidgetSize.small), ], ), diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart index cc2b4b70..c8ad03c5 100644 --- a/example/lib/pages/components/progress_example.dart +++ b/example/lib/pages/components/progress_example.dart @@ -56,7 +56,7 @@ class ProgressExampleState extends State { ), Wrapper( stepsCompleted: 0, - circleSize: ZetaCircleSizes.xl, + circleSize: ZetaCircleSizes.xl_1, rounded: false, isCircle: true, ), diff --git a/example/lib/pages/components/segmented_control_example.dart b/example/lib/pages/components/segmented_control_example.dart index eda3779f..2d9ff822 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.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in _textSegments) @@ -46,7 +46,7 @@ class _SegmentedControlExampleState extends State { // Numbers Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in _numberSegments) @@ -64,7 +64,7 @@ class _SegmentedControlExampleState extends State { // Icons Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaSegmentedControl( segments: [ for (final value in _iconsSegments) diff --git a/example/lib/pages/components/stepper_example.dart b/example/lib/pages/components/stepper_example.dart index 10e1b45b..50816f2c 100644 --- a/example/lib/pages/components/stepper_example.dart +++ b/example/lib/pages/components/stepper_example.dart @@ -100,7 +100,7 @@ class _StepperExampleState extends State { ), ), Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL4), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.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 c3ae64bc..8774c503 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.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), child: DefaultTabController( length: 5, child: ZetaTabBar( @@ -48,7 +48,7 @@ class _TabsExampleState extends State { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.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 c755adb5..4e375ad1 100644 --- a/example/lib/pages/components/tooltip_example.dart +++ b/example/lib/pages/components/tooltip_example.dart @@ -19,45 +19,45 @@ class TooltipExample extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('Rounded'), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.right, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.up, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.left, ), - Divider(height: ZetaSpacing.xL11), + Divider(height: ZetaSpacing.xl_11), Text('Sharp'), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), rounded: false, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.right, rounded: false, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.up, rounded: false, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.left, diff --git a/example/lib/pages/theme/color_example.dart b/example/lib/pages/theme/color_example.dart index d5817117..fc423547 100644 --- a/example/lib/pages/theme/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -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.xL4), + .paddingVertical(ZetaSpacing.xl_4), ...swatches.entries.map( (value) => Row( children: List.generate(10, (index) => 100 - (10 * index)) @@ -178,7 +178,7 @@ class _ColorExampleState extends State { ).paddingAll(ZetaSpacing.medium), if (showGeneratedColors) Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(ZetaSpacing.xL4), + .paddingVertical(ZetaSpacing.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 38e364f2..02faec89 100644 --- a/example/lib/pages/theme/radius_example.dart +++ b/example/lib/pages/theme/radius_example.dart @@ -14,7 +14,7 @@ class RadiusExample extends StatelessWidget { return ExampleScaffold( name: name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.xL2), + padding: EdgeInsets.all(ZetaSpacing.xl_2), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -49,7 +49,7 @@ class RadiusExample extends StatelessWidget { ), ); }) - .divide(const SizedBox(height: ZetaSpacing.xL4)) + .divide(const SizedBox(height: ZetaSpacing.xl_4)) .toList(), ), ], diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart index 9eeb54f6..ce86c526 100644 --- a/example/lib/pages/theme/spacing_example.dart +++ b/example/lib/pages/theme/spacing_example.dart @@ -9,17 +9,17 @@ Map semanticSpacings = { 'small': ZetaSpacing.small, 'medium': ZetaSpacing.medium, 'large': ZetaSpacing.large, - 'xl': ZetaSpacing.xL, - '2xl': ZetaSpacing.xL2, - '3xl': ZetaSpacing.xL3, - '4xl': ZetaSpacing.xL4, - '5xl': ZetaSpacing.xL5, - '6xl': ZetaSpacing.xL6, - '7xl': ZetaSpacing.xL7, - '8xl': ZetaSpacing.xL8, - '9xl': ZetaSpacing.xL9, - '10xl': ZetaSpacing.xL10, - '11xl': ZetaSpacing.xL11, + '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, @@ -82,7 +82,7 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.xL2), + margin: EdgeInsets.all(ZetaSpacing.xl_2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart index afcd06d1..9db86113 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.xL4), + padding: EdgeInsets.all(ZetaSpacing.xl_4), child: Row( children: [ Column( @@ -53,7 +53,7 @@ class TypographyExample extends StatelessWidget { e.value.fontWeight!.value.toString(), style: ZetaTextStyles.bodyMedium, ), - const SizedBox(height: ZetaSpacing.xL9), + const SizedBox(height: ZetaSpacing.xl_9), ], ) .expand((element) => element) diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index e66ea91e..2cee3415 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -23,11 +23,11 @@ Widget iconsUseCase(BuildContext context) { child: Center( child: Column( children: [ - Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xL4), - Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium).paddingAll(ZetaSpacing.xL4), + 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), Wrap( - spacing: ZetaSpacing.xL4, - runSpacing: ZetaSpacing.xL4, + spacing: ZetaSpacing.xl_4, + runSpacing: ZetaSpacing.xl_4, children: sortedIcons.entries.map( (e) { final nameArr = (e.key.split('_')..removeLast()).join(' ').capitalize(); @@ -47,7 +47,7 @@ Widget iconsUseCase(BuildContext context) { }, child: Column( mainAxisAlignment: MainAxisAlignment.center, - children: [Icon(e.value, size: ZetaSpacing.xL6), Text(nameArr, textAlign: TextAlign.center)], + children: [Icon(e.value, size: ZetaSpacing.xl_6), Text(nameArr, textAlign: TextAlign.center)], ), ), ); diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index 4ac22280..56b2c15c 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -8,7 +8,7 @@ import '../../utils/utils.dart'; Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget( screenSize: Size(1280, 720), widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), 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 063e8541..f0848e77 100644 --- a/example/widgetbook/pages/components/badges_widgetbook.dart +++ b/example/widgetbook/pages/components/badges_widgetbook.dart @@ -10,7 +10,7 @@ Widget statusLabelUseCase(BuildContext context) { return WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.xl_2), child: ZetaStatusLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: rounded, @@ -29,7 +29,7 @@ Widget priorityPillUseCase(BuildContext context) { final colors = Zeta.of(context).colors; return WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.xl_2), child: ZetaPriorityPill( index: context.knobs.string(label: 'Index', initialValue: 'U'), label: context.knobs.string(label: 'Label', initialValue: 'Urgent'), @@ -59,7 +59,7 @@ Widget priorityPillUseCase(BuildContext context) { Widget labelUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.xl_2), child: ZetaLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: roundedKnob(context), @@ -77,7 +77,7 @@ Widget indicatorsUseCase(BuildContext context) { return WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.xl_2), child: ZetaIndicator( type: context.knobs.list( label: 'Type', @@ -100,7 +100,7 @@ Widget indicatorsUseCase(BuildContext context) { Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.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 c04b9299..69574bd4 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -32,7 +32,7 @@ Widget bannerUseCase(BuildContext context) { widget: Column( children: [ banner, - const SizedBox(height: ZetaSpacing.xL9), + const SizedBox(height: ZetaSpacing.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 17e345a1..6fd44d2f 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 WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: Column( children: [ sheet, - const SizedBox(height: ZetaSpacing.xL9), + const SizedBox(height: ZetaSpacing.xl_9), ZetaButton.text( label: 'Open', onPressed: () => showModalBottomSheet(context: context, builder: (_) => sheet), diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index f148a21e..03f7c30f 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -94,7 +94,7 @@ Widget buttonGroupUseCase(BuildContext context) { Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget( screenSize: Size(1280, 720), - widget: Padding(padding: EdgeInsets.all(ZetaSpacing.xL), child: FabWidget(context)), + widget: Padding(padding: EdgeInsets.all(ZetaSpacing.xl_1), child: FabWidget(context)), ); class FabWidget extends StatefulWidget { diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart index 0ebca448..6beef5ec 100644 --- a/example/widgetbook/pages/components/date_input_widgetbook.dart +++ b/example/widgetbook/pages/components/date_input_widgetbook.dart @@ -29,7 +29,7 @@ Widget dateInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: ZetaDateInput( size: size, rounded: rounded, diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart index 91a31720..6936dc55 100644 --- a/example/widgetbook/pages/components/dialog_widgetbook.dart +++ b/example/widgetbook/pages/components/dialog_widgetbook.dart @@ -31,7 +31,7 @@ Widget dialogUseCase(BuildContext context) { ); return WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), 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 711e995a..2bd7ad1f 100644 --- a/example/widgetbook/pages/components/filter_selection_widgetbook.dart +++ b/example/widgetbook/pages/components/filter_selection_widgetbook.dart @@ -16,7 +16,7 @@ Widget filterSelectionUseCase(BuildContext context) { builder: (_, setState) { return Column( children: [ - const SizedBox(height: ZetaSpacing.xL2), + const SizedBox(height: ZetaSpacing.xl_2), ZetaFilterSelection( rounded: rounded, items: [ diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart index 8d420bb4..6f31c0b9 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) => WidgetbookTestWidget( widget: Padding( - padding: EdgeInsets.all(ZetaSpacing.xL), + padding: EdgeInsets.all(ZetaSpacing.xl_1), child: ZetaInPageBanner( content: Text( context.knobs.string( diff --git a/example/widgetbook/pages/components/list_item_widgetbook.dart b/example/widgetbook/pages/components/list_item_widgetbook.dart index c2ff83ad..55086b2d 100644 --- a/example/widgetbook/pages/components/list_item_widgetbook.dart +++ b/example/widgetbook/pages/components/list_item_widgetbook.dart @@ -16,8 +16,8 @@ Widget listItemUseCase(BuildContext context) { final leading = context.knobs.boolean(label: 'Leading', initialValue: false) ? Container( - width: ZetaSpacing.xL8, - height: ZetaSpacing.xL8, + width: ZetaSpacing.xl_8, + height: ZetaSpacing.xl_8, decoration: BoxDecoration(borderRadius: ZetaRadius.rounded), child: Placeholder(), ) diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart index d7e6fcfc..df57fc95 100644 --- a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart @@ -43,7 +43,7 @@ Widget navigationRailUseCase(BuildContext context) { ), Expanded( child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: selectedIndex == null ? const SizedBox() : Text( diff --git a/example/widgetbook/pages/components/phone_input_widgetbook.dart b/example/widgetbook/pages/components/phone_input_widgetbook.dart index acc1c70e..c3ebdc4c 100644 --- a/example/widgetbook/pages/components/phone_input_widgetbook.dart +++ b/example/widgetbook/pages/components/phone_input_widgetbook.dart @@ -15,7 +15,7 @@ Widget phoneInputUseCase(BuildContext context) { widget: StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: ZetaPhoneInput( rounded: rounded, enabled: enabled, diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart index a70ae08f..b5f7a92b 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) => WidgetbookTestWidget( widget: LayoutBuilder(builder: (context, constraints) { return SizedBox( - width: constraints.maxWidth - ZetaSpacing.xL9, + width: constraints.maxWidth - ZetaSpacing.xl_9, child: ZetaProgressBar( progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(), type: context.knobs.list( @@ -29,7 +29,7 @@ Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget( progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(), rounded: roundedKnob(context), size: context.knobs.list( - initialOption: ZetaCircleSizes.xl, + initialOption: ZetaCircleSizes.xl_1, label: 'Size', options: ZetaCircleSizes.values, labelBuilder: enumLabelBuilder, diff --git a/example/widgetbook/pages/components/radio_widgetbook.dart b/example/widgetbook/pages/components/radio_widgetbook.dart index 61ad5913..d8be14f3 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), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: Column( children: [ Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.xL), + padding: const EdgeInsets.only(bottom: ZetaSpacing.xl_1), 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 8eb590b0..f5dd1fa8 100644 --- a/example/widgetbook/pages/components/search_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/search_bar_widgetbook.dart @@ -45,7 +45,7 @@ Widget searchBarUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -68,7 +68,7 @@ Widget searchBarUseCase(BuildContext context) { }, onSpeechToText: () async => 'I wanted to say...', ), - const SizedBox(height: ZetaSpacing.xL), + const SizedBox(height: ZetaSpacing.xl_1), ...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 189112e9..72875836 100644 --- a/example/widgetbook/pages/components/segmented_control_widgetbook.dart +++ b/example/widgetbook/pages/components/segmented_control_widgetbook.dart @@ -22,7 +22,7 @@ Widget segmentedControlUseCase(BuildContext context) { return Column( children: [ Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaSegmentedControl( rounded: rounded, segments: [ @@ -39,7 +39,7 @@ Widget segmentedControlUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaSegmentedControl( rounded: rounded, segments: [ diff --git a/example/widgetbook/pages/components/select_input_widgetbook.dart b/example/widgetbook/pages/components/select_input_widgetbook.dart index 64c378fb..d41f5a8f 100644 --- a/example/widgetbook/pages/components/select_input_widgetbook.dart +++ b/example/widgetbook/pages/components/select_input_widgetbook.dart @@ -50,7 +50,7 @@ Widget selectInputUseCase(BuildContext context) { widget: StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL2), + padding: const EdgeInsets.all(ZetaSpacing.xl_2), child: ZetaSelectInput( rounded: rounded, disabled: disabled, diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart index e3052ac1..70eebb24 100644 --- a/example/widgetbook/pages/components/stepper_widgetbook.dart +++ b/example/widgetbook/pages/components/stepper_widgetbook.dart @@ -35,7 +35,7 @@ Widget stepperUseCase(BuildContext context) { return Container( height: type == ZetaStepperType.horizontal ? 300 : null, padding: EdgeInsets.all( - type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.xL4, + type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.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 268a405d..08a3579f 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), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: Column( children: [ Text('Switch'), diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart index d99fe1bf..a47dd059 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.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.xl_4), child: DefaultTabController( length: 2, child: ZetaTabBar( @@ -30,7 +30,7 @@ Widget tabsUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.xL4), + padding: const EdgeInsets.only(top: ZetaSpacing.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 ef6a40d4..75be9d50 100644 --- a/example/widgetbook/pages/components/text_input_widgetbook.dart +++ b/example/widgetbook/pages/components/text_input_widgetbook.dart @@ -30,7 +30,7 @@ Widget textInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: ZetaTextInput( size: size, rounded: rounded, diff --git a/example/widgetbook/pages/components/time_input_widgetbook.dart b/example/widgetbook/pages/components/time_input_widgetbook.dart index 9973bdc4..5fbcd13a 100644 --- a/example/widgetbook/pages/components/time_input_widgetbook.dart +++ b/example/widgetbook/pages/components/time_input_widgetbook.dart @@ -32,7 +32,7 @@ Widget timeInputUseCase(BuildContext context) { ); return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL), + padding: const EdgeInsets.all(ZetaSpacing.xl_1), child: ZetaTimeInput( size: size, rounded: rounded, diff --git a/example/widgetbook/pages/components/tooltip_widgetbook.dart b/example/widgetbook/pages/components/tooltip_widgetbook.dart index e54d4a4f..cd556311 100644 --- a/example/widgetbook/pages/components/tooltip_widgetbook.dart +++ b/example/widgetbook/pages/components/tooltip_widgetbook.dart @@ -19,7 +19,7 @@ Widget tooltipUseCase(BuildContext context) { widget: StatefulBuilder( builder: (context, setState) { return Padding( - padding: const EdgeInsets.all(ZetaSpacing.xL4), + padding: const EdgeInsets.all(ZetaSpacing.xl_4), child: ZetaTooltip( child: Text(text), rounded: rounded, diff --git a/example/widgetbook/pages/introduction.dart b/example/widgetbook/pages/introduction.dart index 9ec1c430..3301e753 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); + final radius = Radius.circular(ZetaSpacing.xl_1); final isDark = Zeta.of(context).brightness == Brightness.dark; final config = isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig; @@ -35,7 +35,7 @@ class _IntroductionWidgetbookState extends State { backgroundColor: colors.black, body: SingleChildScrollView( child: Padding( - padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xL10, horizontal: ZetaSpacing.medium), + padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xl_10, horizontal: ZetaSpacing.medium), child: Column( mainAxisSize: MainAxisSize.max, children: [ @@ -46,10 +46,10 @@ class _IntroductionWidgetbookState extends State { ), child: Padding( padding: EdgeInsets.fromLTRB( - ZetaSpacing.xL6, - ZetaSpacing.xL9, - ZetaSpacing.xL8, - ZetaSpacing.xL6, + ZetaSpacing.xl_6, + ZetaSpacing.xl_9, + ZetaSpacing.xl_8, + ZetaSpacing.xl_6, ), child: Row( children: [ @@ -66,7 +66,7 @@ class _IntroductionWidgetbookState extends State { ]) : null, ), - SizedBox(width: largeScreen ? ZetaSpacing.xL6 : ZetaSpacing.xL), + SizedBox(width: largeScreen ? ZetaSpacing.xl_6 : ZetaSpacing.xl_1), Expanded( child: Text( // x-release-please-start-version @@ -85,7 +85,7 @@ class _IntroductionWidgetbookState extends State { borderRadius: BorderRadius.only(bottomLeft: radius, bottomRight: radius), ), width: double.infinity, - padding: EdgeInsets.all(ZetaSpacing.xL4), + padding: EdgeInsets.all(ZetaSpacing.xl_4), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart index 99e88588..fd3c18be 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.xL4), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_4), child: SingleChildScrollView( key: PageStorageKey(0), child: Column( children: [ - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.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.xL4), + Row(children: [Text('Full color swatches')]).paddingVertical(ZetaSpacing.xl_4), ...swatches.entries.map( (value) { return Row( @@ -106,7 +106,7 @@ class ColorBody extends StatelessWidget { ); }, ), - const SizedBox(height: ZetaSpacing.xL4), + const SizedBox(height: ZetaSpacing.xl_4), ], ), ), diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart index 5ff72405..7ab0096c 100644 --- a/example/widgetbook/pages/theme/spacing_widgetbook.dart +++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart @@ -25,17 +25,17 @@ Map semanticSpacings = { 'small': ZetaSpacing.small, 'medium': ZetaSpacing.medium, 'large': ZetaSpacing.large, - 'xl': ZetaSpacing.xL, - '2xl': ZetaSpacing.xL2, - '3xl': ZetaSpacing.xL3, - '4xl': ZetaSpacing.xL4, - '5xl': ZetaSpacing.xL5, - '6xl': ZetaSpacing.xL6, - '7xl': ZetaSpacing.xL7, - '8xl': ZetaSpacing.xL8, - '9xl': ZetaSpacing.xL9, - '10xl': ZetaSpacing.xL10, - '11xl': ZetaSpacing.xL11, + '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, @@ -68,7 +68,7 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.xL2), + margin: EdgeInsets.all(ZetaSpacing.xl_2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart index ecc184d6..40c3eaac 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.xL2), + padding: const EdgeInsets.all(ZetaSpacing.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/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 125f5759..88134123 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -10,8 +10,8 @@ enum ZetaAvatarSize { /// [xxl] 120 pixels xxl, - /// [xl] 80 pixels - xl, + /// [xl_1] 80 pixels + xl_1, /// [l] 64 pixels l, @@ -37,7 +37,7 @@ class ZetaAvatar extends StatelessWidget { /// Constructor for [ZetaAvatar] const ZetaAvatar({ super.key, - this.size = ZetaAvatarSize.xl, + this.size = ZetaAvatarSize.xl_1, this.image, this.initials, this.backgroundColor, @@ -49,7 +49,7 @@ class ZetaAvatar extends StatelessWidget { /// Constructor for [ZetaAvatar] with image. const ZetaAvatar.image({ super.key, - this.size = ZetaAvatarSize.xl, + this.size = ZetaAvatarSize.xl_1, this.image, this.lowerBadge, this.upperBadge, @@ -61,7 +61,7 @@ class ZetaAvatar extends StatelessWidget { const ZetaAvatar.initials({ super.key, required this.initials, - this.size = ZetaAvatarSize.xl, + this.size = ZetaAvatarSize.xl_1, this.lowerBadge, this.upperBadge, this.borderColor, @@ -72,7 +72,7 @@ class ZetaAvatar extends StatelessWidget { ZetaAvatar.fromName({ super.key, required String name, - this.size = ZetaAvatarSize.xl, + this.size = ZetaAvatarSize.xl_1, this.lowerBadge, this.upperBadge, this.borderColor, @@ -230,20 +230,20 @@ extension on ZetaAvatarSize { return ZetaSpacingBase.x50; case ZetaAvatarSize.xxl: return ZetaSpacingBase.x30; - case ZetaAvatarSize.xl: - return ZetaSpacing.xL10; + case ZetaAvatarSize.xl_1: + return ZetaSpacing.xl_10; case ZetaAvatarSize.l: - return ZetaSpacing.xL9; + return ZetaSpacing.xl_9; case ZetaAvatarSize.m: - return ZetaSpacing.xL8; + return ZetaSpacing.xl_8; case ZetaAvatarSize.s: - return ZetaSpacing.xL6; + return ZetaSpacing.xl_6; case ZetaAvatarSize.xs: - return ZetaSpacing.xL5; + return ZetaSpacing.xl_5; case ZetaAvatarSize.xxs: - return ZetaSpacing.xL4; + return ZetaSpacing.xl_4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.xL2; + return ZetaSpacing.xl_2; } } @@ -252,7 +252,7 @@ extension on ZetaAvatarSize { case ZetaAvatarSize.xxxl: return 11; case ZetaAvatarSize.xxl: - case ZetaAvatarSize.xl: + case ZetaAvatarSize.xl_1: case ZetaAvatarSize.l: case ZetaAvatarSize.m: return ZetaSpacing.minimum; diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index bcdacd9d..2cc6f122 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -100,7 +100,7 @@ class ZetaPriorityPill extends StatelessWidget { @override Widget build(BuildContext context) { final ZetaColorSwatch color = customColor ?? type.color(context); - final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.xL : ZetaSpacing.xL3; + final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.xl_1 : ZetaSpacing.xl_3; final label = this.label ?? priority; return DecoratedBox( diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index 83c82e3a..8265c68c 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -45,7 +45,7 @@ class ZetaStatusLabel extends StatelessWidget { children: [ Icon( customIcon ?? Icons.circle, - size: customIcon != null ? ZetaSpacing.xL : ZetaSpacing.small, + size: customIcon != null ? ZetaSpacing.xl_1 : ZetaSpacing.small, color: colors.icon, ), const SizedBox(width: ZetaSpacing.small), diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index 7b2e1fdd..79dd455d 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -40,7 +40,7 @@ class ZetaTag extends StatelessWidget { final String label; /// Fixed container size - static const Size _containerSize = Size(ZetaSpacing.xL5, ZetaSpacing.xL3); + static const Size _containerSize = Size(ZetaSpacing.xl_5, ZetaSpacing.xl_3); @override Widget build(BuildContext context) { @@ -89,7 +89,7 @@ class ZetaTag extends StatelessWidget { Widget _buildCustomPaint(BuildContext context) { return CustomPaint( - size: const Size(ZetaSpacing.medium, ZetaSpacing.xL3), + size: const Size(ZetaSpacing.medium, ZetaSpacing.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 410b0756..3543f0fb 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/banner/banner.dart @@ -75,7 +75,7 @@ class ZetaBanner extends MaterialBanner { child: Icon( leadingIcon, color: foregroundColor, - size: ZetaSpacing.xL2, + size: ZetaSpacing.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 184a69d5..44eb3a91 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -30,16 +30,16 @@ class ZetaBottomSheet extends StatelessWidget { return Container( padding: const EdgeInsets.fromLTRB( - ZetaSpacing.xL, + ZetaSpacing.xl_1, ZetaSpacing.none, - ZetaSpacing.xL, - ZetaSpacing.xL, + ZetaSpacing.xl_1, + ZetaSpacing.xl_1, ), decoration: BoxDecoration( color: colors.surfaceSecondary, borderRadius: const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacing.xL2), - topRight: Radius.circular(ZetaSpacing.xL2), + topLeft: Radius.circular(ZetaSpacing.xl_2), + topRight: Radius.circular(ZetaSpacing.xl_2), ), ), child: Column( @@ -47,12 +47,12 @@ class ZetaBottomSheet extends StatelessWidget { children: [ Align( child: SizedBox( - height: ZetaSpacing.xL5, + height: ZetaSpacing.xl_5, child: Padding( padding: const EdgeInsets.only(top: ZetaSpacing.small), child: Icon( Icons.maximize_rounded, - size: ZetaSpacing.xL9, + size: ZetaSpacing.xl_9, color: colors.surfaceDisabled, ), ), @@ -60,7 +60,7 @@ class ZetaBottomSheet extends StatelessWidget { ), if (title != null) Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.xL2), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.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 486d9ce9..fe9ce192 100644 --- a/lib/src/components/bottom sheets/menu_items.dart +++ b/lib/src/components/bottom sheets/menu_items.dart @@ -85,7 +85,7 @@ class ZetaMenuItem extends StatelessWidget { switch (type) { case ZetaMenuItemType.horizontal: return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.xL8), + constraints: const BoxConstraints(minHeight: ZetaSpacing.xl_8), child: InkWell( onTap: _onTap, child: Padding( @@ -104,7 +104,7 @@ class ZetaMenuItem extends StatelessWidget { ), if (trailing != null) IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.xL2), + data: _iconThemeData(colors, _enabled, ZetaSpacing.xl_2), child: trailing ?? const Icon(Icons.keyboard_arrow_right), ), ], @@ -123,7 +123,7 @@ class ZetaMenuItem extends StatelessWidget { Padding( padding: const EdgeInsets.only(bottom: ZetaSpacing.medium), child: IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.xL4), + data: _iconThemeData(colors, _enabled, ZetaSpacing.xl_4), child: leading!, ), ), diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart index ff3835ae..46c9139b 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -70,7 +70,7 @@ class _ZetaBreadCrumbsState extends State { ), Icon( widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.chevron_right_sharp, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), const SizedBox( width: ZetaSpacing.small, @@ -328,7 +328,7 @@ class _BreadCrumbsTruncatedState extends State { ), Icon( ZetaIcons.chevron_right_round, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), SizedBox( width: ZetaSpacing.small, diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index 1c15a0bf..fafaa290 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -243,10 +243,13 @@ class _ZetaGroupButtonState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.xL), + if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.xl_1), Text(widget.label ?? '', style: ZetaTextStyles.labelMedium), if (widget.dropdown != null) // TODO(UX-1006): Dropdown - Icon(widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: ZetaSpacing.xL), + Icon( + widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, + size: ZetaSpacing.xl_1, + ), ].divide(const SizedBox(width: ZetaSpacing.minimum)).toList(), ).paddingAll(_padding), ), diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index 46ec6e76..442a9589 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -187,13 +187,13 @@ class ZetaButton extends StatelessWidget { double get _minConstraints { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xL8; + return ZetaSpacing.xl_8; case ZetaWidgetSize.medium: - return ZetaSpacing.xL6; + return ZetaSpacing.xl_6; case ZetaWidgetSize.small: - return ZetaSpacing.xL4; + return ZetaSpacing.xl_4; } } @@ -214,7 +214,7 @@ class ZetaButton extends StatelessWidget { switch (size) { case ZetaWidgetSize.large: case ZetaWidgetSize.medium: - return ZetaSpacing.xL; + return ZetaSpacing.xl_1; case ZetaWidgetSize.small: return ZetaSpacing.large; } diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 50cbacd1..f9708da0 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -89,7 +89,7 @@ ButtonStyle buttonStyle( final bool isSolid = type.solid || backgroundColor != null; return ButtonStyle( - minimumSize: WidgetStateProperty.all(const Size.square(ZetaSpacing.xL4)), + minimumSize: WidgetStateProperty.all(const Size.square(ZetaSpacing.xl_4)), shape: WidgetStateProperty.all( RoundedRectangleBorder(borderRadius: borderType.radius), ), diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 2c8ad7c5..210b6480 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -126,11 +126,11 @@ class ZetaIconButton extends StatelessWidget { double get _iconSize { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xL2; + return ZetaSpacing.xl_2; case ZetaWidgetSize.medium: - return ZetaSpacing.xL2; + return ZetaSpacing.xl_2; case ZetaWidgetSize.small: - return ZetaSpacing.xL; + return ZetaSpacing.xl_1; } } diff --git a/lib/src/components/buttons/input_icon_button.dart b/lib/src/components/buttons/input_icon_button.dart index 2377499f..93bb6368 100644 --- a/lib/src/components/buttons/input_icon_button.dart +++ b/lib/src/components/buttons/input_icon_button.dart @@ -33,9 +33,9 @@ class InputIconButton extends StatelessWidget { double get _iconSize { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.xL2; + return ZetaSpacing.xl_2; case ZetaWidgetSize.medium: - return ZetaSpacing.xL; + return ZetaSpacing.xl_1; case ZetaWidgetSize.small: return ZetaSpacing.large; } diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index ea044719..4daf9e5a 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -84,7 +84,7 @@ class ZetaChatItem extends StatelessWidget { }) { if (slidableActionsCount == 0) return 0.5; - final actionsExtend = slidableActionsCount * ZetaSpacing.xL10; + final actionsExtend = slidableActionsCount * ZetaSpacing.xl_10; final extend = actionsExtend / maxWidth; return extend > 1 ? 1 : extend; @@ -347,7 +347,7 @@ class _ZetaSlidableAction extends StatelessWidget { icon: Icon( icon, color: foregroundColor, - size: ZetaSpacing.xL4, + size: ZetaSpacing.xl_4, ), ), ), diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 9ab1abe6..794b3241 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -201,8 +201,8 @@ class _CheckboxState extends State<_Checkbox> { border: Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5), borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, ), - width: ZetaSpacing.xL, - height: ZetaSpacing.xL, + width: ZetaSpacing.xl_1, + height: ZetaSpacing.xl_1, child: icon, ), if (widget.label != null) ...[ diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index ab9005cb..90f3150e 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -88,7 +88,7 @@ class _ZetaChipState extends State { return IconTheme( data: IconThemeData( color: foregroundColor, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), child: leading!, ); @@ -166,7 +166,7 @@ class _ZetaChipState extends State { IconTheme( data: IconThemeData( color: foregroundColor, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), child: widget.trailing!, ), diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart index 4596d84d..001d9928 100644 --- a/lib/src/components/contact_item/contact_item.dart +++ b/lib/src/components/contact_item/contact_item.dart @@ -50,7 +50,7 @@ class ZetaContactItem extends StatelessWidget { padding: const EdgeInsets.only( top: ZetaSpacing.small, bottom: ZetaSpacing.small, - left: ZetaSpacing.xL2, + left: ZetaSpacing.xl_2, ), child: Row( children: [ diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart index a5a6f585..7bbdc32d 100644 --- a/lib/src/components/dial_pad/dial_pad.dart +++ b/lib/src/components/dial_pad/dial_pad.dart @@ -113,14 +113,14 @@ class _ZetaDialPadState extends State { Widget build(BuildContext context) { return SelectionContainer.disabled( child: SizedBox( - width: (_buttonsPerRow * ZetaSpacing.xL9) + ((_buttonsPerRow - 1) * ZetaSpacing.xL5), + width: (_buttonsPerRow * ZetaSpacing.xl_9) + ((_buttonsPerRow - 1) * ZetaSpacing.xl_5), child: GridView.count( crossAxisCount: _buttonsPerRow, shrinkWrap: true, semanticChildCount: _buttonValues.length, - mainAxisSpacing: ZetaSpacing.xL2, + mainAxisSpacing: ZetaSpacing.xl_2, physics: const NeverScrollableScrollPhysics(), - crossAxisSpacing: ZetaSpacing.xL5, + crossAxisSpacing: ZetaSpacing.xl_5, children: _buttonValues.entries .map( (e) => ZetaDialPadButton( @@ -190,8 +190,8 @@ class ZetaDialPadButton extends StatelessWidget { excludeSemantics: true, child: AnimatedContainer( duration: Durations.short2, - width: ZetaSpacing.xL9, - height: ZetaSpacing.xL9, + width: ZetaSpacing.xl_9, + height: ZetaSpacing.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 302b68aa..04199b2f 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -129,9 +129,9 @@ class _ZetaDialog extends StatelessWidget { titlePadding: context.deviceType == DeviceType.mobilePortrait ? null : const EdgeInsets.only( - left: ZetaSpacing.xL6, - right: ZetaSpacing.xL6, - top: ZetaSpacing.xL2, + left: ZetaSpacing.xl_6, + right: ZetaSpacing.xl_6, + top: ZetaSpacing.xl_2, ), titleTextStyle: zetaTextTheme.headlineSmall?.copyWith( color: zeta.colors.textDefault, @@ -140,10 +140,10 @@ class _ZetaDialog extends StatelessWidget { contentPadding: context.deviceType == DeviceType.mobilePortrait ? null : const EdgeInsets.only( - left: ZetaSpacing.xL6, - right: ZetaSpacing.xL6, + left: ZetaSpacing.xl_6, + right: ZetaSpacing.xl_6, top: ZetaSpacing.medium, - bottom: ZetaSpacing.xL2, + bottom: ZetaSpacing.xl_2, ), contentTextStyle: context.deviceType == DeviceType.mobilePortrait ? zetaTextTheme.bodySmall?.copyWith(color: zeta.colors.textDefault) @@ -153,7 +153,7 @@ class _ZetaDialog extends StatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - if (hasButton) const SizedBox(height: ZetaSpacing.xL2), + if (hasButton) const SizedBox(height: ZetaSpacing.xl_2), if (tertiaryButton == null) Row( children: [ @@ -179,7 +179,7 @@ class _ZetaDialog extends StatelessWidget { children: [ if (tertiaryButton != null) tertiaryButton, if (primaryButton != null || secondaryButton != null) ...[ - const SizedBox(width: ZetaSpacing.xL2), + const SizedBox(width: ZetaSpacing.xl_2), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.end, @@ -197,8 +197,8 @@ class _ZetaDialog extends StatelessWidget { actionsPadding: context.deviceType == DeviceType.mobilePortrait ? null : const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xL6, - vertical: ZetaSpacing.xL2, + horizontal: ZetaSpacing.xl_6, + vertical: ZetaSpacing.xl_2, ), ); } diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 017f304c..53854f43 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -271,7 +271,7 @@ class ZetaDropDownState extends State> { ? Alignment.topLeft : Alignment.bottomLeft, // Align overlay dropdown in its correct position followerAnchor: _menuPosition == MenuPosition.up ? Alignment.bottomLeft : Alignment.topLeft, - offset: const Offset(0, ZetaSpacing.xL * -1), + offset: const Offset(0, ZetaSpacing.xl_1 * -1), child: Align( alignment: _menuPosition == MenuPosition.up ? AlignmentDirectional.bottomStart : AlignmentDirectional.topStart, @@ -442,7 +442,7 @@ class _DropdownItemState extends State<_DropdownItem> { } return ConstrainedBox( - constraints: const BoxConstraints(maxHeight: ZetaSpacing.xL6), + constraints: const BoxConstraints(maxHeight: ZetaSpacing.xl_6), child: DefaultTextStyle( style: ZetaTextStyles.bodyMedium, child: OutlinedButton( @@ -494,7 +494,7 @@ class _DropdownItemState extends State<_DropdownItem> { }, ); case ZetaDropdownMenuType.standard: - return widget.value.icon ?? const SizedBox(width: ZetaSpacing.xL2); + return widget.value.icon ?? const SizedBox(width: ZetaSpacing.xl_2); } } @@ -529,7 +529,7 @@ class _DropdownItemState extends State<_DropdownItem> { ), side: WidgetStateBorderSide.resolveWith((states) { if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.borderPrimary, width: ZetaSpacing.xL); + return BorderSide(color: colors.borderPrimary, width: ZetaSpacing.xl_1); } return BorderSide.none; }), diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index 2eb525ea..e6bdb75d 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -203,8 +203,8 @@ extension on ZetaWidgetBorder { isExpanded ? this == ZetaWidgetBorder.full ? size == ZetaFabSize.small - ? ZetaSpacing.xL3 - : ZetaSpacing.xL8 + ? ZetaSpacing.xl_3 + : ZetaSpacing.xl_8 : ZetaSpacing.small : size == ZetaFabSize.small ? ZetaSpacing.small @@ -215,6 +215,6 @@ extension on ZetaWidgetBorder { } extension on ZetaFabSize { - double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.xL2 : ZetaSpacing.xL5; + double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.xl_2 : ZetaSpacing.xl_5; double get padding => this == ZetaFabSize.small ? ZetaSpacing.large : ZetaSpacingBase.x7_5; } diff --git a/lib/src/components/filter_selection/filter_selection.dart b/lib/src/components/filter_selection/filter_selection.dart index 3502e7fe..8241799c 100644 --- a/lib/src/components/filter_selection/filter_selection.dart +++ b/lib/src/components/filter_selection/filter_selection.dart @@ -25,7 +25,7 @@ class ZetaFilterSelection extends StatelessWidget { @override Widget build(BuildContext context) { return SizedBox( - height: ZetaSpacing.xL7, + height: ZetaSpacing.xl_7, child: Row( children: [ IconButton( @@ -33,7 +33,7 @@ class ZetaFilterSelection extends StatelessWidget { onPressed: onPressed, icon: Icon( rounded ? ZetaIcons.filter_round : ZetaIcons.filter_sharp, - size: ZetaSpacing.xL2, + size: ZetaSpacing.xl_2, ), ), Expanded( diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index 0e07db42..362ff803 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -78,7 +78,7 @@ class _GlobalHeaderState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( - height: ZetaSpacing.xL8, + height: ZetaSpacing.xl_8, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // Top Section @@ -98,13 +98,13 @@ class _GlobalHeaderState extends State { Row( children: [ ...widget.actionButtons.map( - (e) => IconButton(onPressed: e.onPressed, icon: e.icon, iconSize: ZetaSpacing.xL2), + (e) => IconButton(onPressed: e.onPressed, icon: e.icon, iconSize: ZetaSpacing.xl_2), ), if (widget.onAppsButton != null) ...[ Container( color: colors.borderDefault, width: 1, - height: ZetaSpacing.xL2, + height: ZetaSpacing.xl_2, margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), ), IconButton(icon: const Icon(ZetaIcons.apps_round), onPressed: widget.onAppsButton), diff --git a/lib/src/components/global_header/header_tab_item.dart b/lib/src/components/global_header/header_tab_item.dart index c09189f9..3fa5444c 100644 --- a/lib/src/components/global_header/header_tab_item.dart +++ b/lib/src/components/global_header/header_tab_item.dart @@ -65,7 +65,7 @@ class _ZetaGlobalHeaderItemState extends State { const SizedBox(width: ZetaSpacing.small), if (widget.dropdown != null) Icon(ZetaIcons.expand_more_round, color: foregroundColor), ], - ).paddingHorizontal(ZetaSpacing.xL2).paddingVertical(ZetaSpacing.medium), + ).paddingHorizontal(ZetaSpacing.xl_2).paddingVertical(ZetaSpacing.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 05558e8a..6cecba07 100644 --- a/lib/src/components/in_page_banner/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -65,7 +65,7 @@ class ZetaInPageBanner extends StatelessWidget { padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.medium, start: ZetaSpacingBase.x2_5), child: Icon( customIcon ?? status.icon(rounded: rounded), - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, ), ), @@ -99,7 +99,7 @@ class ZetaInPageBanner extends StatelessWidget { onPressed: onClose, icon: Icon( !rounded ? ZetaIcons.close_sharp : ZetaIcons.close_round, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), ), ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index f4f86764..a7d705b0 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -187,7 +187,7 @@ class _ListItemContainer extends StatelessWidget { onTap: enabled ? onTap : null, child: Container( padding: EdgeInsets.symmetric( - horizontal: dense ? ZetaSpacing.large : ZetaSpacing.xL4, + horizontal: dense ? ZetaSpacing.large : ZetaSpacing.xl_4, vertical: dense ? ZetaSpacing.small : ZetaSpacing.large, ), decoration: BoxDecoration( diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart index a23b405a..e0dfd7de 100644 --- a/lib/src/components/list_item/notification_list_item.dart +++ b/lib/src/components/list_item/notification_list_item.dart @@ -213,13 +213,13 @@ class ZetaNotificationBadge extends StatelessWidget { : icon != null ? Icon( icon, - size: ZetaSpacing.xL8, + size: ZetaSpacing.xl_8, color: iconColor, ) : ClipRRect( borderRadius: ZetaRadius.rounded, child: SizedBox.fromSize( - size: const Size.square(ZetaSpacing.xL8), // Image radius + size: const Size.square(ZetaSpacing.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 7dda1f3b..0a6909cd 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -143,7 +143,7 @@ class ZetaNavigationBar extends StatelessWidget { Container( color: colors.borderSubtle, width: _navigationItemBorderWidth, - height: ZetaSpacing.xL7, + height: ZetaSpacing.xl_7, ), _generateNavigationItemRow(rightItems), ], @@ -232,15 +232,15 @@ class _NavigationItem extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: ZetaSpacing.xL7, - height: ZetaSpacing.xL4 - _navigationItemBorderWidth, + width: ZetaSpacing.xl_7, + height: ZetaSpacing.xl_4 - _navigationItemBorderWidth, child: Stack( children: [ Positioned( left: ZetaSpacingBase.x2_5, top: ZetaSpacing.small - _navigationItemBorderWidth, right: ZetaSpacingBase.x2_5, - child: Icon(item.icon, color: elementColor, size: ZetaSpacing.xL2), + child: Icon(item.icon, color: elementColor, size: ZetaSpacing.xl_2), ), if (item.badge != null) _getBadge(colors), ], diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index 6f4bc13d..9d2b729c 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -12,7 +12,7 @@ class ZetaNavigationRail extends StatefulWidget { this.selectedIndex, this.onSelect, this.rounded = true, - this.margin = const EdgeInsets.all(ZetaSpacing.xL), + this.margin = const EdgeInsets.all(ZetaSpacing.xl_1), this.itemSpacing = const EdgeInsets.only(bottom: ZetaSpacing.minimum), this.itemPadding, this.wordWrap, @@ -33,7 +33,7 @@ class ZetaNavigationRail extends StatefulWidget { /// The margin around the [ZetaNavigationRail]. /// Default is: /// ``` - /// const EdgeInsets.all(ZetaSpacing.xL) + /// const EdgeInsets.all(ZetaSpacing.xl_1) /// ``` final EdgeInsets margin; @@ -150,8 +150,8 @@ class _ZetaNavigationRailItemContent extends StatelessWidget { ), child: ConstrainedBox( constraints: const BoxConstraints( - minWidth: ZetaSpacing.xL9, - minHeight: ZetaSpacing.xL9, + minWidth: ZetaSpacing.xl_9, + minHeight: ZetaSpacing.xl_9, ), child: SelectionContainer.disabled( child: Padding( @@ -171,7 +171,7 @@ class _ZetaNavigationRailItemContent extends StatelessWidget { : selected ? zeta.colors.textDefault : zeta.colors.cool.shade70, - size: ZetaSpacing.xL2, + size: ZetaSpacing.xl_2, ), child: icon!, ), diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 1241e59a..5efbbd9d 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -5,8 +5,8 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -const _itemHeight = ZetaSpacing.xL5; -const _itemWidth = ZetaSpacing.xL4; +const _itemHeight = ZetaSpacing.xl_5; +const _itemWidth = ZetaSpacing.xl_4; /// The type of a [ZetaPagination] enum ZetaPaginationType { @@ -183,7 +183,7 @@ class _ZetaPaginationState extends State { ), ); return Container( - height: ZetaSpacing.xL6, + height: ZetaSpacing.xl_6, decoration: BoxDecoration( border: Border.all(color: colors.borderSubtle), borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, diff --git a/lib/src/components/password/password_input.dart b/lib/src/components/password/password_input.dart index 9f0d6b3b..fd32edcc 100644 --- a/lib/src/components/password/password_input.dart +++ b/lib/src/components/password/password_input.dart @@ -162,7 +162,7 @@ class _ZetaPasswordInputState extends State { padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.minimum), icon: Icon( value ? ZetaIcons.visibility_off_sharp : ZetaIcons.visibility_sharp, - size: widget.size == ZetaWidgetSize.small ? ZetaSpacing.large : ZetaSpacing.xL, + size: widget.size == ZetaWidgetSize.small ? ZetaSpacing.large : ZetaSpacing.xl_1, ), color: widget.enabled ? theme.colors.iconDefault : theme.colors.iconDisabled, onPressed: () => _obscureTextNotifier.toggle(), @@ -230,11 +230,11 @@ class _ZetaPasswordInputState extends State { double get _inputHeight { switch (widget.size) { case ZetaWidgetSize.small: - return ZetaSpacing.xL4; + return ZetaSpacing.xl_4; case ZetaWidgetSize.medium: - return ZetaSpacing.xL6; + return ZetaSpacing.xl_6; case ZetaWidgetSize.large: - return ZetaSpacing.xL8; + return ZetaSpacing.xl_8; } } diff --git a/lib/src/components/phone_input/phone_input.dart b/lib/src/components/phone_input/phone_input.dart index 9d9373f8..b230b41e 100644 --- a/lib/src/components/phone_input/phone_input.dart +++ b/lib/src/components/phone_input/phone_input.dart @@ -163,8 +163,8 @@ class _ZetaPhoneInputState extends State { child: Row( children: [ SizedBox( - width: ZetaSpacing.xL9, - height: ZetaSpacing.xL8, + width: ZetaSpacing.xl_9, + height: ZetaSpacing.xl_8, child: DecoratedBox( decoration: BoxDecoration( color: widget.enabled ? zeta.colors.surfacePrimary : zeta.colors.cool.shade30, @@ -203,7 +203,7 @@ class _ZetaPhoneInputState extends State { Icon( widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, color: widget.enabled ? zeta.colors.textDefault : zeta.colors.cool.shade50, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), ], ), @@ -265,8 +265,8 @@ class _ZetaPhoneInputState extends State { ], ), prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.xL8, - minWidth: ZetaSpacing.xL6, + minHeight: ZetaSpacing.xl_8, + minWidth: ZetaSpacing.xl_6, ), filled: true, fillColor: widget.enabled diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index 0161fa74..96aeeda5 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -20,7 +20,7 @@ enum ZetaCircleSizes { l, /// 64 X 64 - xl + xl_1 } ///Class definition for [ZetaProgressCircle] @@ -29,7 +29,7 @@ class ZetaProgressCircle extends ZetaProgress { const ZetaProgressCircle({ super.key, super.progress = 0, - this.size = ZetaCircleSizes.xl, + this.size = ZetaCircleSizes.xl_1, this.rounded = true, }); @@ -77,15 +77,15 @@ class ZetaProgressCircleState extends ZetaProgressState { Size _getSize() { switch (widget.size) { case ZetaCircleSizes.xs: - return const Size(ZetaSpacing.xL2, ZetaSpacing.xL2); + return const Size(ZetaSpacing.xl_2, ZetaSpacing.xl_2); case ZetaCircleSizes.s: - return const Size(ZetaSpacing.xL5, ZetaSpacing.xL5); + return const Size(ZetaSpacing.xl_5, ZetaSpacing.xl_5); case ZetaCircleSizes.m: - return const Size(ZetaSpacing.xL6, ZetaSpacing.xL6); + return const Size(ZetaSpacing.xl_6, ZetaSpacing.xl_6); case ZetaCircleSizes.l: - return const Size(ZetaSpacing.xL8, ZetaSpacing.xL8); - case ZetaCircleSizes.xl: - return const Size(ZetaSpacing.xL9, ZetaSpacing.xL9); + return const Size(ZetaSpacing.xl_8, ZetaSpacing.xl_8); + case ZetaCircleSizes.xl_1: + return const Size(ZetaSpacing.xl_9, ZetaSpacing.xl_9); } } diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index 5cbd66ad..0e2ecc3f 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -66,7 +66,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix mainAxisSize: MainAxisSize.min, children: [ buildToggleable( - size: const Size(ZetaSpacing.xL5, ZetaSpacing.xL5), + size: const Size(ZetaSpacing.xl_5, ZetaSpacing.xl_5), painter: _painter! ..position = position ..reaction = reaction diff --git a/lib/src/components/search_bar/search_bar.dart b/lib/src/components/search_bar/search_bar.dart index dec8cea9..abbf4fda 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -128,8 +128,8 @@ class _ZetaSearchBarState extends State { ) : null, prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.xL2, - minWidth: ZetaSpacing.xL2, + minHeight: ZetaSpacing.xl_2, + minWidth: ZetaSpacing.xl_2, ), suffixIcon: IntrinsicHeight( child: Row( @@ -189,8 +189,8 @@ class _ZetaSearchBarState extends State { ), ), suffixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.xL2, - minWidth: ZetaSpacing.xL2, + minHeight: ZetaSpacing.xl_2, + minWidth: ZetaSpacing.xl_2, ), filled: !widget.disabled ? null : true, fillColor: !widget.disabled ? null : zeta.colors.cool.shade30, @@ -208,8 +208,8 @@ class _ZetaSearchBarState extends State { }; double _iconSize(ZetaWidgetSize size) => switch (size) { - ZetaWidgetSize.large => ZetaSpacing.xL2, - ZetaWidgetSize.medium => ZetaSpacing.xL, + ZetaWidgetSize.large => ZetaSpacing.xl_2, + ZetaWidgetSize.medium => ZetaSpacing.xl_1, ZetaWidgetSize.small => ZetaSpacing.large, }; diff --git a/lib/src/components/segmented_control/segmented_control.dart b/lib/src/components/segmented_control/segmented_control.dart index 6f64729d..a5015aff 100644 --- a/lib/src/components/segmented_control/segmented_control.dart +++ b/lib/src/components/segmented_control/segmented_control.dart @@ -207,14 +207,14 @@ class _SegmentState extends State<_Segment> with TickerProviderStateMixin< children: [ widget.child, IconTheme( - data: const IconThemeData(size: ZetaSpacing.xL), + data: const IconThemeData(size: ZetaSpacing.xl_1), child: DefaultTextStyle( style: ZetaTextStyles.labelMedium.copyWith( color: colors.textDefault, ), child: Padding( padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xL4, + horizontal: ZetaSpacing.xl_4, vertical: ZetaSpacing.minimum, ), child: widget.child, @@ -325,7 +325,7 @@ class _RenderSegmentedControl extends RenderBox @override double computeMaxIntrinsicHeight(double width) { RenderBox? child = firstChild; - double maxMaxChildHeight = ZetaSpacing.xL3; + double maxMaxChildHeight = ZetaSpacing.xl_3; while (child != null) { final double childHeight = child.getMaxIntrinsicHeight(width); maxMaxChildHeight = math.max(maxMaxChildHeight, childHeight); @@ -350,7 +350,7 @@ class _RenderSegmentedControl extends RenderBox @override double computeMinIntrinsicHeight(double width) { RenderBox? child = firstChild; - double maxMinChildHeight = ZetaSpacing.xL3; + double maxMinChildHeight = ZetaSpacing.xl_3; while (child != null) { final double childHeight = child.getMinIntrinsicHeight(width); maxMinChildHeight = math.max(maxMinChildHeight, childHeight); @@ -369,7 +369,7 @@ class _RenderSegmentedControl extends RenderBox maxMinChildWidth = math.max(maxMinChildWidth, childWidth); child = nonSeparatorChildAfter(child); } - return (maxMinChildWidth + 2 * ZetaSpacing.xL4) * childCount + totalSeparatorWidth; + return (maxMinChildWidth + 2 * ZetaSpacing.xl_4) * childCount + totalSeparatorWidth; } @override @@ -559,7 +559,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.xL3; + double maxHeight = ZetaSpacing.xl_3; RenderBox? child = firstChild; while (child != null) { childWidth = math.max(childWidth, child.getMaxIntrinsicWidth(double.infinity) + 2); diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index b1ee0f50..0639e028 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -241,13 +241,13 @@ class _IconButton extends StatelessWidget { style: IconButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), tapTargetSize: MaterialTapTargetSize.shrinkWrap, - minimumSize: const Size(ZetaSpacing.xL, ZetaSpacing.xL), + minimumSize: const Size(ZetaSpacing.xl_1, ZetaSpacing.xl_1), ), onPressed: onPressed, icon: Icon( ZetaIcons.close_round, color: color, - size: ZetaSpacing.xL, + size: ZetaSpacing.xl_1, ), ), ); diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart index c3ba8d1d..64ee4382 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 Widget _buildHorizotalIcon(int index) { return SizedBox( - width: ZetaSpacing.xL4, - height: ZetaSpacing.xL4, + width: ZetaSpacing.xl_4, + height: ZetaSpacing.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.xL8, - height: ZetaSpacing.xL8, + width: ZetaSpacing.xl_8, + height: ZetaSpacing.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.xL2), + margin: EdgeInsets.only(top: _isFirst(index) ? 0.0 : ZetaSpacing.xl_2), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -183,7 +183,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Container( margin: const EdgeInsets.only(top: ZetaSpacing.minimum), width: ZetaSpacing.minimum, - height: ZetaSpacing.xL8, + height: ZetaSpacing.xl_8, decoration: BoxDecoration( borderRadius: ZetaRadius.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.xL2), + margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xl_2), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -307,7 +307,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin child: Container( key: Key('line$index'), margin: const EdgeInsets.only( - top: ZetaSpacing.xL3, + top: ZetaSpacing.xl_3, right: ZetaSpacing.large, left: ZetaSpacing.large, ), @@ -341,7 +341,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Material( color: Colors.transparent, child: Container( - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL2), + margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.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 fae0a5c4..8721d938 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -99,9 +99,9 @@ class _ZetaStepperInputState extends State { double get _height { if (widget.size != ZetaStepperInputSize.large) { - return ZetaSpacing.xL6; + return ZetaSpacing.xl_6; } else { - return ZetaSpacing.xL8; + return ZetaSpacing.xl_8; } } @@ -157,7 +157,7 @@ class _ZetaStepperInputState extends State { children: [ _getButton(), SizedBox( - width: ZetaSpacing.xL9, + width: ZetaSpacing.xl_9, child: TextFormField( keyboardType: TextInputType.number, enabled: !_disabled, diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 3babf383..39c9f3c0 100644 --- a/lib/src/components/switch/zeta_switch.dart +++ b/lib/src/components/switch/zeta_switch.dart @@ -97,7 +97,7 @@ class ZetaSwitch extends StatelessWidget { ), value: value ?? false, onChanged: onChanged, - thumbSize: _variant == ZetaSwitchType.web ? const Size.square(ZetaSpacing.xL2) : null, + thumbSize: _variant == ZetaSwitchType.web ? const Size.square(ZetaSpacing.xl_2) : null, ); } } diff --git a/lib/src/components/text_input/text_input.dart b/lib/src/components/text_input/text_input.dart index bf804a79..57ee2580 100644 --- a/lib/src/components/text_input/text_input.dart +++ b/lib/src/components/text_input/text_input.dart @@ -167,11 +167,11 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt late final double size; switch (widget.size) { case ZetaWidgetSize.large: - size = ZetaSpacing.xL6; + size = ZetaSpacing.xl_6; case ZetaWidgetSize.medium: - size = ZetaSpacing.xL4; + size = ZetaSpacing.xl_4; case ZetaWidgetSize.small: - size = ZetaSpacing.xL2; + size = ZetaSpacing.xl_2; } return BoxConstraints( minWidth: size, 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 3ddf7ccb..40276dd0 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 @@ -5,10 +5,10 @@ import '../../../zeta_flutter.dart'; const _searchBarOffsetTop = ZetaSpacing.minimum * 1.5; const _searchBarOffsetRight = ZetaSpacing.minimum * 22; const _maxExtent = ZetaSpacing.minimum * 26; -const _minExtent = ZetaSpacing.xL9; +const _minExtent = ZetaSpacing.xl_9; const _leftMin = ZetaSpacing.large; const _leftMax = ZetaSpacingBase.x12_5; -const _topMin = ZetaSpacing.xL; +const _topMin = ZetaSpacing.xl_1; const _topMax = ZetaSpacing.minimum * 15; /// Delegate for creating an extended app bar, that grows and shrinks when scrolling. @@ -40,7 +40,7 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.xL9, maxHeight: _maxExtent), + constraints: const BoxConstraints(minHeight: ZetaSpacing.xl_9, maxHeight: _maxExtent), child: ColoredBox( color: Zeta.of(context).colors.surfacePrimary, child: Stack( 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 08ddc048..8e07fb1d 100644 --- a/lib/src/components/top_app_bar/top_app_bar.dart +++ b/lib/src/components/top_app_bar/top_app_bar.dart @@ -165,7 +165,7 @@ class _ZetaTopAppBarState extends State { ? [ IconButtonTheme( data: IconButtonThemeData( - style: IconButton.styleFrom(iconSize: ZetaSpacing.xL), + style: IconButton.styleFrom(iconSize: ZetaSpacing.xl_1), ), child: Row( mainAxisSize: MainAxisSize.min, @@ -177,7 +177,7 @@ class _ZetaTopAppBarState extends State { ), if (widget.onSearchMicrophoneIconPressed != null) ...[ SizedBox( - height: ZetaSpacing.xL2, + height: ZetaSpacing.xl_2, child: VerticalDivider(width: ZetaSpacingBase.x0_5, color: colors.cool.shade70), ), IconButton( @@ -233,7 +233,7 @@ class _ZetaTopAppBarState extends State { elevation: 0, scrolledUnderElevation: 0, iconTheme: IconThemeData(color: colors.cool.shade90), - leadingWidth: ZetaSpacing.xL6, + leadingWidth: ZetaSpacing.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 006da941..f9a93306 100644 --- a/lib/src/theme/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -21,38 +21,38 @@ class ZetaSpacing { /// Large spacing => 16px. static const double large = ZetaSpacingBase.x4; - /// xL spacing => 20px. - static const double xL = ZetaSpacingBase.x5; + /// 1xl spacing => 20px. + static const double xl_1 = ZetaSpacingBase.x5; - /// 2xL spacing => 24px. - static const double xL2 = ZetaSpacingBase.x6; + /// 2xl spacing => 24px. + static const double xl_2 = ZetaSpacingBase.x6; - /// 3xL spacing => 28px. - static const double xL3 = ZetaSpacingBase.x7; + /// 3xl spacing => 28px. + static const double xl_3 = ZetaSpacingBase.x7; - /// 4xL spacing => 32px. - static const double xL4 = ZetaSpacingBase.x8; + /// 4xl spacing => 32px. + static const double xl_4 = ZetaSpacingBase.x8; - /// 5xL spacing => 36px. - static const double xL5 = ZetaSpacingBase.x9; + /// 5xl spacing => 36px. + static const double xl_5 = ZetaSpacingBase.x9; - /// 6xL spacing => 40px. - static const double xL6 = ZetaSpacingBase.x10; + /// 6xl spacing => 40px. + static const double xl_6 = ZetaSpacingBase.x10; - /// 7xL spacing => 44px. - static const double xL7 = ZetaSpacingBase.x11; + /// 7xl spacing => 44px. + static const double xl_7 = ZetaSpacingBase.x11; - /// 8xL spacing => 48px. - static const double xL8 = ZetaSpacingBase.x12; + /// 8xl spacing => 48px. + static const double xl_8 = ZetaSpacingBase.x12; - /// 9xL spacing => 64px. - static const double xL9 = ZetaSpacingBase.x13; + /// 9xl spacing => 64px. + static const double xl_9 = ZetaSpacingBase.x13; - /// 10xL spacing => 80px. - static const double xL10 = ZetaSpacingBase.x14; + /// 10xl spacing => 80px. + static const double xl_10 = ZetaSpacingBase.x14; - /// 11xL spacing => 96px - static const double xL11 = ZetaSpacingBase.x15; + /// 11xl spacing => 96px + static const double xl_11 = ZetaSpacingBase.x15; /// Base multiplier used to calculate spacing values. @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0') @@ -103,7 +103,7 @@ class ZetaSpacing { static const double b = spacingBaseMultiplier * 4; /// 20dp space. - @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0') + @Deprecated('Use xl_1 instead ' 'This size has been deprecated as of 0.11.0') static const double x5 = spacingBaseMultiplier * 5; /// 24dp space. @@ -201,14 +201,14 @@ class ZetaRadius { /// Large radius => 16px radius. static const BorderRadius large = ZetaRadiusBase.l; - /// xL radius => 24px radius. - static const BorderRadius xL = ZetaRadiusBase.xL; + /// xl radius => 24px radius. + static const BorderRadius xl = ZetaRadiusBase.xl; /// Full radius => 360px radius. static const BorderRadius full = ZetaRadiusBase.x4; /// Wide border radius; 24px radius. - @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0') + @Deprecated('Use xl instead ' 'This size has been deprecated as of 0.11.0') static const BorderRadius wide = BorderRadius.all(Radius.circular(ZetaSpacing.m)); } @@ -296,7 +296,7 @@ class ZetaRadiusBase { static const BorderRadius l = BorderRadius.all(Radius.circular(16)); /// 24px radius - static const BorderRadius xL = BorderRadius.all(Radius.circular(24)); + static const BorderRadius xl = BorderRadius.all(Radius.circular(24)); /// 32px radius static const BorderRadius x2 = BorderRadius.all(Radius.circular(32));