diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart index 7c317217..c943f6fe 100644 --- a/example/lib/pages/assets/icons_example.dart +++ b/example/lib/pages/assets/icons_example.dart @@ -20,7 +20,7 @@ class _IconsExampleState extends State { return ExampleScaffold( name: IconsExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.s), + padding: EdgeInsets.all(ZetaSpacing.medium), child: Column( children: [ Text('Round', style: ZetaTextStyles.bodyLarge), diff --git a/example/lib/pages/components/accordion_example.dart b/example/lib/pages/components/accordion_example.dart index b23587c8..b0561a66 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.s), + padding: EdgeInsets.all(ZetaSpacing.medium), child: Column( children: [ Text('Rounded Divider'), diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart index ad683953..94ad7733 100644 --- a/example/lib/pages/components/avatar_example.dart +++ b/example/lib/pages/components/avatar_example.dart @@ -20,7 +20,7 @@ class AvatarExample extends StatelessWidget { return ExampleScaffold( name: AvatarExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.s), + padding: EdgeInsets.all(ZetaSpacing.medium), child: Column( children: [ Column( @@ -570,7 +570,7 @@ class AvatarExample extends StatelessWidget { ), ], ), - ].divide(const SizedBox(height: ZetaSpacing.x6)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xL2)).toList(), ), ), ); @@ -581,23 +581,23 @@ extension on ZetaAvatarSize { double get pixelSize { switch (this) { case ZetaAvatarSize.xxxl: - return ZetaSpacing.x50; + return ZetaSpacingBase.x50; case ZetaAvatarSize.xxl: - return ZetaSpacing.x30; + return ZetaSpacingBase.x30; case ZetaAvatarSize.xl: - return ZetaSpacing.x20; + return ZetaSpacing.xL10; case ZetaAvatarSize.l: - return ZetaSpacing.x16; + return ZetaSpacing.xL9; case ZetaAvatarSize.m: - return ZetaSpacing.x12; + return ZetaSpacing.xL8; case ZetaAvatarSize.s: - return ZetaSpacing.x10; + return ZetaSpacing.xL6; case ZetaAvatarSize.xs: - return ZetaSpacing.x9; + return ZetaSpacing.xL5; case ZetaAvatarSize.xxs: - return ZetaSpacing.x8; + return ZetaSpacing.xL4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; } } } diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart index 839d6e1f..27d4b3a9 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.l), + const SizedBox(height: ZetaSpacing.xL4), _PriorityPill(size: ZetaPriorityPillSize.small), _DividingText('Badge'), _Badge(), @@ -44,7 +44,7 @@ class _DividingText extends StatelessWidget { return Text( text, style: ZetaTextStyles.displayMedium, - ).paddingVertical(ZetaSpacing.l); + ).paddingVertical(ZetaSpacing.xL4); } } @@ -73,7 +73,7 @@ class _StatusLabel extends StatelessWidget { statusLabelExampleRow(ZetaWidgetStatus.positive), statusLabelExampleRow(ZetaWidgetStatus.warning), statusLabelExampleRow(ZetaWidgetStatus.negative), - ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), ], ); @@ -145,7 +145,7 @@ class _Badge extends StatelessWidget { badgeExampleRow(ZetaWidgetStatus.warning), badgeExampleRow(ZetaWidgetStatus.negative), badgeExampleRow(ZetaWidgetStatus.neutral), - ].divide(const SizedBox(height: ZetaSpacing.m)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xL2)).toList(), ); } } @@ -177,23 +177,23 @@ class _Indicators extends StatelessWidget { ZetaIndicator.icon(), ZetaIndicator.icon(size: ZetaWidgetSize.medium), ZetaIndicator.icon(size: ZetaWidgetSize.small), - ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.xs)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), ), const SizedBox(width: 50), ], ), ], ), - const SizedBox.square(dimension: ZetaSpacing.xl), + const SizedBox.square(dimension: ZetaSpacing.xL9), Column( children: [ Text( @@ -213,16 +213,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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.s)).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.m)).toList(), + ].divide(SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), ); } diff --git a/example/lib/pages/components/bottom_sheet_example.dart b/example/lib/pages/components/bottom_sheet_example.dart index 1cc6fa0f..ff627041 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.s), + padding: EdgeInsets.all(ZetaSpacing.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 151478d5..8218603e 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.m)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ).divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); + ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).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.m)).toList(), + ).divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(), ), ), - ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); + ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(); } List groupButtons(ZetaWidgetBorder) { @@ -234,6 +234,6 @@ class _ButtonExampleState extends State { ), ], ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); + ].divide(const SizedBox.square(dimension: ZetaSpacing.xL2)).toList(); } } diff --git a/example/lib/pages/components/chat_item_example.dart b/example/lib/pages/components/chat_item_example.dart index e124e765..5e8038a0 100644 --- a/example/lib/pages/components/chat_item_example.dart +++ b/example/lib/pages/components/chat_item_example.dart @@ -37,7 +37,7 @@ class _ChatItemExampleState extends State { "Dummy text to represent the first lines of most recent message dsadas dsa dsa ds dssd sd sdsd s ds"), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.b), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaChatItem( highlighted: true, count: 99, diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart index cbbc09f2..a5c8e5dd 100644 --- a/example/lib/pages/components/chip_example.dart +++ b/example/lib/pages/components/chip_example.dart @@ -211,7 +211,7 @@ class ChipExample extends StatelessWidget { return ExampleScaffold( name: ChipExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.s), + padding: EdgeInsets.all(ZetaSpacing.medium), child: Column( children: [ ...inputChipExample, diff --git a/example/lib/pages/components/dialpad_example.dart b/example/lib/pages/components/dialpad_example.dart index 91f6583a..e67836eb 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.m)).toList(), + ].divide(const SizedBox(height: ZetaSpacing.xL2)).toList(), ), ), ], diff --git a/example/lib/pages/components/filter_selection_example.dart b/example/lib/pages/components/filter_selection_example.dart index 61cde4b4..89ab64fe 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.b), + const SizedBox(height: ZetaSpacing.large), ZetaFilterSelection( items: [ for (int i = 0; i < items.length; i++) @@ -34,7 +34,7 @@ class _FilterSelectionExampleState extends State { ], onPressed: () {}, ), - const SizedBox(height: ZetaSpacing.b), + const SizedBox(height: ZetaSpacing.large), ZetaFilterSelection( rounded: false, items: [ diff --git a/example/lib/pages/components/global_header_example.dart b/example/lib/pages/components/global_header_example.dart index 7a36c4a9..d1d0865d 100644 --- a/example/lib/pages/components/global_header_example.dart +++ b/example/lib/pages/components/global_header_example.dart @@ -45,7 +45,7 @@ class _GroupHeaderExampleState extends State { avatar: const ZetaAvatar(initials: 'PS'), ), const SizedBox( - height: ZetaSpacing.x5, + height: ZetaSpacing.xL, ), 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 9cc60696..af54abec 100644 --- a/example/lib/pages/components/list_item_example.dart +++ b/example/lib/pages/components/list_item_example.dart @@ -32,7 +32,7 @@ class _ListItemExampleState extends State { children: [ // List Item with descriptor Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaListItem( dense: true, leading: Container( @@ -53,20 +53,20 @@ class _ListItemExampleState extends State { // Enabled Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), child: Text( "Enabled", style: ZetaTextStyles.titleLarge, ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.m), + padding: const EdgeInsets.only(top: ZetaSpacing.xL2), child: ZetaListItem(title: Text("List Item")), ), // Selected Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), 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.m), + padding: const EdgeInsets.only(top: ZetaSpacing.xL2), child: ZetaListItem( title: Text("List Item"), selected: _isSelected, @@ -92,14 +92,14 @@ class _ListItemExampleState extends State { // Disabled Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), child: Text( "Disabled", style: ZetaTextStyles.titleLarge, ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.m), + padding: const EdgeInsets.only(top: ZetaSpacing.xL2), 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 5b930512..ba3b7202 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), child: _selectedIndex == null ? const SizedBox() : Text( diff --git a/example/lib/pages/components/password_input_example.dart b/example/lib/pages/components/password_input_example.dart index d7a46e20..f1877fe4 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.x10), + SizedBox(height: ZetaSpacing.xL6), ...passwordInputExampleRow(ZetaWidgetSize.large), - Divider(height: ZetaSpacing.x20), + Divider(height: ZetaSpacing.xL10), ...passwordInputExampleRow(ZetaWidgetSize.medium), - Divider(height: ZetaSpacing.x20), + Divider(height: ZetaSpacing.xL10), ...passwordInputExampleRow(ZetaWidgetSize.small), ], ), diff --git a/example/lib/pages/components/segmented_control_example.dart b/example/lib/pages/components/segmented_control_example.dart index 783e966c..eda3779f 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.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), child: ZetaSegmentedControl( segments: [ for (final value in _textSegments) @@ -46,7 +46,7 @@ class _SegmentedControlExampleState extends State { // Numbers Padding( - padding: const EdgeInsets.all(ZetaSpacing.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), child: ZetaSegmentedControl( segments: [ for (final value in _numberSegments) @@ -64,7 +64,7 @@ class _SegmentedControlExampleState extends State { // Icons Padding( - padding: const EdgeInsets.all(ZetaSpacing.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), 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 b07ab311..5ea2660c 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.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Standard Rounded SnackBar", onPressed: () { @@ -43,7 +43,7 @@ class SnackBarExample extends StatelessWidget { // Standard Sharp Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Standard Sharp SnackBar", onPressed: () { @@ -64,7 +64,7 @@ class SnackBarExample extends StatelessWidget { // Default Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Contectual Default", onPressed: () { @@ -82,7 +82,7 @@ class SnackBarExample extends StatelessWidget { // Action Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Action", onPressed: () { @@ -101,7 +101,7 @@ class SnackBarExample extends StatelessWidget { // Positive Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Positive", onPressed: () { @@ -118,7 +118,7 @@ class SnackBarExample extends StatelessWidget { // Info Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Info", onPressed: () { @@ -135,7 +135,7 @@ class SnackBarExample extends StatelessWidget { // Info Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Info", onPressed: () { @@ -152,7 +152,7 @@ class SnackBarExample extends StatelessWidget { // Warning Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Warning", onPressed: () { @@ -169,7 +169,7 @@ class SnackBarExample extends StatelessWidget { // Error Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Error", onPressed: () { @@ -186,7 +186,7 @@ class SnackBarExample extends StatelessWidget { // Deletion Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: ZetaButton.primary( label: "Deletion", onPressed: () { @@ -204,7 +204,7 @@ class SnackBarExample extends StatelessWidget { // View Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x4), + padding: const EdgeInsets.only(top: ZetaSpacing.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 594b43da..10e1b45b 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.l), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL4), 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 0dcc8077..c3ae64bc 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.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), child: DefaultTabController( length: 5, child: ZetaTabBar( @@ -48,7 +48,7 @@ class _TabsExampleState extends State { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), 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 01912cfc..c755adb5 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.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.right, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.up, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.left, ), - Divider(height: ZetaSpacing.xxl), + Divider(height: ZetaSpacing.xL11), Text('Sharp'), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), rounded: false, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.right, rounded: false, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ZetaTooltip( child: Text('Label'), arrowDirection: ZetaTooltipArrowDirection.up, rounded: false, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), 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 4976a820..18ac9c82 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: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.medium), child: Text("Title"), ), ], @@ -154,7 +154,7 @@ class _TopAppBarExampleState extends State { children: [ ZetaAvatar(size: ZetaAvatarSize.xs, image: image), Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.medium), child: Text("Title"), ), ], @@ -250,7 +250,7 @@ class Painter extends CustomPainter { var p2 = Offset(800 + i, 810); var paint = Paint() ..color = colors.primary - ..strokeWidth = ZetaSpacing.x1; + ..strokeWidth = ZetaSpacing.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 8789529c..d5817117 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.s), + padding: EdgeInsets.all(ZetaSpacing.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.x8), + .paddingVertical(ZetaSpacing.xL4), ...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.s), - ).paddingAll(ZetaSpacing.s), + child: const Text('Toggle generated colors').paddingAll(ZetaSpacing.medium), + ).paddingAll(ZetaSpacing.medium), if (showGeneratedColors) Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(ZetaSpacing.x8), + .paddingVertical(ZetaSpacing.xL4), 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 ba1bb92a..38e364f2 100644 --- a/example/lib/pages/theme/radius_example.dart +++ b/example/lib/pages/theme/radius_example.dart @@ -9,18 +9,12 @@ class RadiusExample extends StatelessWidget { @override Widget build(BuildContext context) { - List radii = [ - ZetaRadius.none, - ZetaRadius.minimal, - ZetaRadius.rounded, - ZetaRadius.wide, - ZetaRadius.full - ]; + List radii = [ZetaRadius.none, ZetaRadius.minimal, ZetaRadius.rounded, ZetaRadius.full]; final colors = Zeta.of(context).colors; return ExampleScaffold( name: name, child: SingleChildScrollView( - padding: EdgeInsets.all(ZetaSpacing.m), + padding: EdgeInsets.all(ZetaSpacing.xL2), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -42,7 +36,7 @@ class RadiusExample extends StatelessWidget { color: Zeta.of(context).colors.surfacePrimary, border: Border.all(color: colors.blue.shade50, width: 3), ), - padding: EdgeInsets.all(ZetaSpacing.b), + padding: EdgeInsets.all(ZetaSpacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( @@ -55,7 +49,7 @@ class RadiusExample extends StatelessWidget { ), ); }) - .divide(const SizedBox(height: ZetaSpacing.l)) + .divide(const SizedBox(height: ZetaSpacing.xL4)) .toList(), ), ], diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart index d21ab5bb..9eeb54f6 100644 --- a/example/lib/pages/theme/spacing_example.dart +++ b/example/lib/pages/theme/spacing_example.dart @@ -3,36 +3,43 @@ import 'package:path_drawing/path_drawing.dart'; import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -Map namedSpacings = { - 'xxs': ZetaSpacing.xxs, - 'xs': ZetaSpacing.xs, - 's': ZetaSpacing.s, - 'b': ZetaSpacing.b, - 'm': ZetaSpacing.m, - 'l': ZetaSpacing.l, - 'xl': ZetaSpacing.xl, - 'xxl': ZetaSpacing.xxl, - 'xxxl': ZetaSpacing.xxxl, +Map semanticSpacings = { + 'none': ZetaSpacing.none, + 'minimum': ZetaSpacing.minimum, + '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, }; -Map valueSpacings = { - 'x1': ZetaSpacing.x1, - 'x2': ZetaSpacing.x2, - 'x3': ZetaSpacing.x3, - 'x3.5': ZetaSpacing.x3_5, - 'x4': ZetaSpacing.x4, - 'x5': ZetaSpacing.x5, - 'x6': ZetaSpacing.x6, - 'x7': ZetaSpacing.x7, - 'x8': ZetaSpacing.x8, - 'x9': ZetaSpacing.x9, - 'x10': ZetaSpacing.x10, - 'x11': ZetaSpacing.x11, - 'x12': ZetaSpacing.x12, - 'x13': ZetaSpacing.x13, - 'x14': ZetaSpacing.x14, - 'x16': ZetaSpacing.x16, - 'x20': ZetaSpacing.x20, - 'x24': ZetaSpacing.x24, +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 { @@ -51,11 +58,11 @@ class SpacingExample extends StatelessWidget { children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, - children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, - children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ) ], ), @@ -75,13 +82,13 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.m), + margin: EdgeInsets.all(ZetaSpacing.xL2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), - padding: EdgeInsets.all(ZetaSpacing.s), + padding: EdgeInsets.all(ZetaSpacing.medium), color: colors.surfacePrimary, child: Text( 'ZetaSpacing.' + size.key, diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart index da763e40..afcd06d1 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.l), + padding: EdgeInsets.all(ZetaSpacing.xL4), child: Row( children: [ Column( @@ -43,7 +43,7 @@ class TypographyExample extends StatelessWidget { .map( (e) => [ Text(e.key, style: e.value), - const SizedBox(height: ZetaSpacing.xxs), + const SizedBox(height: ZetaSpacing.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), + const SizedBox(height: ZetaSpacing.xL9), ], ) .expand((element) => element) diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index db4f327c..8f0736a5 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.l), - Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium).paddingAll(ZetaSpacing.l), + 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), Wrap( - spacing: ZetaSpacing.l, - runSpacing: ZetaSpacing.l, + spacing: ZetaSpacing.xL4, + runSpacing: ZetaSpacing.xL4, 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.x10), Text(nameArr, textAlign: TextAlign.center)], + children: [Icon(e.value, size: ZetaSpacing.xL6), Text(nameArr, textAlign: TextAlign.center)], ), ), ); diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index 79c3bee5..22ee9ae1 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -7,7 +7,7 @@ import '../../utils/utils.dart'; Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.x5), + padding: const EdgeInsets.all(ZetaSpacing.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 3585d9d1..316df5c4 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.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaStatusLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: rounded, @@ -27,7 +27,7 @@ Widget statusLabelUseCase(BuildContext context) { Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaPriorityPill( index: context.knobs.string(label: 'Index'), priority: context.knobs.string(label: 'Label'), @@ -49,7 +49,7 @@ Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget( Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaBadge( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: roundedKnob(context), @@ -67,7 +67,7 @@ Widget indicatorsUseCase(BuildContext context) { return WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaIndicator( type: context.knobs.list( label: 'Type', @@ -89,7 +89,7 @@ Widget indicatorsUseCase(BuildContext context) { Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget( widget: Padding( - padding: const EdgeInsets.all(ZetaSpacing.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), 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 5c796843..4153ac50 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -29,11 +29,11 @@ Widget bannerUseCase(BuildContext context) { return WidgetbookTestWidget( widget: Padding( - padding: EdgeInsets.all(ZetaSpacing.x5), + padding: EdgeInsets.all(ZetaSpacing.xL), child: Column( children: [ banner, - const SizedBox(height: ZetaSpacing.xl), + const SizedBox(height: ZetaSpacing.xL9), 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 86274219..17e345a1 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), child: Column( children: [ sheet, - const SizedBox(height: ZetaSpacing.xl), + const SizedBox(height: ZetaSpacing.xL9), ZetaButton.text( label: 'Open', onPressed: () => showModalBottomSheet(context: context, builder: (_) => sheet), @@ -34,8 +34,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.x3, - runSpacing: ZetaSpacing.x3, + spacing: ZetaSpacing.medium, + runSpacing: ZetaSpacing.medium, children: List.generate( 6, (index) => ZetaMenuItem( diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart index 695e027b..0ebca448 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), 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 1654e7a0..91a31720 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.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 27abb913..711e995a 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.m), + const SizedBox(height: ZetaSpacing.xL2), 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 ea2f6462..8d420bb4 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.x5), + padding: EdgeInsets.all(ZetaSpacing.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 3e4b5138..d7e6fcfc 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), 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 1b36f6c0..acc1c70e 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), 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 af08949d..a70ae08f 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.xl, + width: constraints.maxWidth - ZetaSpacing.xL9, 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 87e0a4ad..61ad5913 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), child: Column( children: [ Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.x5), + padding: const EdgeInsets.only(bottom: ZetaSpacing.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 080be59f..8eb590b0 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -68,7 +68,7 @@ Widget searchBarUseCase(BuildContext context) { }, onSpeechToText: () async => 'I wanted to say...', ), - const SizedBox(height: ZetaSpacing.x5), + const SizedBox(height: ZetaSpacing.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 e3544fa7..189112e9 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.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), child: ZetaSegmentedControl( rounded: rounded, segments: [ @@ -39,7 +39,7 @@ Widget segmentedControlUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.all(ZetaSpacing.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), 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 da2ff862..2a6d13c3 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.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaSelectInput( rounded: rounded, enabled: enabled, diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart index 39d1ea34..e3052ac1 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.l, + type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.xL4, ), child: ZetaStepper( currentStep: currentStep, diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart index d1ef6471..268a405d 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.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 ee6e4ca5..d99fe1bf 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.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), child: DefaultTabController( length: 2, child: ZetaTabBar( @@ -30,7 +30,7 @@ Widget tabsUseCase(BuildContext context) { ), ), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.l), + padding: const EdgeInsets.only(top: ZetaSpacing.xL4), 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 a479f3a3..ef6a40d4 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), 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 a7dec047..9973bdc4 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.x5), + padding: const EdgeInsets.all(ZetaSpacing.xL), 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 8212303e..e54d4a4f 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.l), + padding: const EdgeInsets.all(ZetaSpacing.xL4), child: ZetaTooltip( child: Text(text), rounded: rounded, diff --git a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart index b1153033..9dc76be9 100644 --- a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart @@ -239,7 +239,7 @@ class Painter extends CustomPainter { var p2 = Offset(constraints.maxHeight + i, constraints.maxHeight * 4); var paint = Paint() ..color = colors.primary - ..strokeWidth = ZetaSpacing.x1; + ..strokeWidth = ZetaSpacing.minimum; canvas.drawLine(p1, p2, paint); } } diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart index 4e4289f3..99e88588 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.l), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL4), child: SingleChildScrollView( key: PageStorageKey(0), child: Column( children: [ - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), 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.x8), + Row(children: [Text('Full color swatches')]).paddingVertical(ZetaSpacing.xL4), ...swatches.entries.map( (value) { return Row( @@ -106,7 +106,7 @@ class ColorBody extends StatelessWidget { ); }, ), - const SizedBox(height: ZetaSpacing.l), + const SizedBox(height: ZetaSpacing.xL4), ], ), ), diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart index f35a62ad..e11ef016 100644 --- a/example/widgetbook/pages/theme/radius_widgetbook.dart +++ b/example/widgetbook/pages/theme/radius_widgetbook.dart @@ -30,7 +30,7 @@ Widget radiusUseCase(BuildContext context) { color: Zeta.of(context).colors.surfacePrimary, border: Border.all(color: colors.blue.shade50, width: 3), ), - padding: EdgeInsets.all(ZetaSpacing.b), + padding: EdgeInsets.all(ZetaSpacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( @@ -57,4 +57,4 @@ extension on BorderRadius { } } -List radii = [ZetaRadius.none, ZetaRadius.minimal, ZetaRadius.rounded, ZetaRadius.wide, ZetaRadius.full]; +List radii = [ZetaRadius.none, ZetaRadius.minimal, ZetaRadius.rounded, ZetaRadius.full]; diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart index 02c01ead..5ff72405 100644 --- a/example/widgetbook/pages/theme/spacing_widgetbook.dart +++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart @@ -9,46 +9,53 @@ Widget spacingUseCase(BuildContext context) => SingleChildScrollView( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, - children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, - children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ) ], ), ); -Map namedSpacings = { - 'xxs': ZetaSpacing.xxs, - 'xs': ZetaSpacing.xs, - 's': ZetaSpacing.s, - 'b': ZetaSpacing.b, - 'm': ZetaSpacing.m, - 'l': ZetaSpacing.l, - 'xl': ZetaSpacing.xl, - 'xxl': ZetaSpacing.xxl, - 'xxxl': ZetaSpacing.xxxl, +Map semanticSpacings = { + 'none': ZetaSpacing.none, + 'minimum': ZetaSpacing.minimum, + '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, }; -Map valueSpacings = { - 'x1': ZetaSpacing.x1, - 'x2': ZetaSpacing.x2, - 'x3': ZetaSpacing.x3, - 'x3.5': ZetaSpacing.x3_5, - 'x4': ZetaSpacing.x4, - 'x5': ZetaSpacing.x5, - 'x6': ZetaSpacing.x6, - 'x7': ZetaSpacing.x7, - 'x8': ZetaSpacing.x8, - 'x9': ZetaSpacing.x9, - 'x10': ZetaSpacing.x10, - 'x11': ZetaSpacing.x11, - 'x12': ZetaSpacing.x12, - 'x13': ZetaSpacing.x13, - 'x14': ZetaSpacing.x14, - 'x16': ZetaSpacing.x16, - 'x20': ZetaSpacing.x20, - 'x24': ZetaSpacing.x24, +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 _SpacingDemo extends StatelessWidget { @@ -61,13 +68,13 @@ class _SpacingDemo extends StatelessWidget { final colors = Zeta.of(context).colors; return Container( color: colors.blue.shade30, - margin: EdgeInsets.all(ZetaSpacing.m), + margin: EdgeInsets.all(ZetaSpacing.xL2), child: CustomPaint( painter: _TagPainter(color: colors.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), - padding: EdgeInsets.all(ZetaSpacing.s), + padding: EdgeInsets.all(ZetaSpacing.medium), color: colors.surfacePrimary, child: Text( 'ZetaSpacing.' + size.key, diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart index 45da8649..ecc184d6 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.m), + padding: const EdgeInsets.all(ZetaSpacing.xL2), 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 cd7199af..d2f8e47c 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -153,7 +153,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM child: Flexible(child: Text(widget.title)), ), Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.x4), + padding: const EdgeInsets.only(left: ZetaSpacing.large), child: Icon( _isOpen ? (widget.rounded ? ZetaIcons.remove_round : ZetaIcons.remove_sharp) @@ -169,7 +169,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM sizeFactor: _animation, axisAlignment: -1, child: Padding( - padding: const EdgeInsets.fromLTRB(ZetaSpacing.x4, 0, ZetaSpacing.x4, ZetaSpacing.x4), + padding: const EdgeInsets.fromLTRB(ZetaSpacing.large, 0, ZetaSpacing.large, ZetaSpacing.large), child: Theme( data: Theme.of(context).copyWith( listTileTheme: ListTileThemeData( diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 3dd62b52..cc07d499 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -227,23 +227,23 @@ extension on ZetaAvatarSize { double get pixelSize { switch (this) { case ZetaAvatarSize.xxxl: - return ZetaSpacing.x50; + return ZetaSpacingBase.x50; case ZetaAvatarSize.xxl: - return ZetaSpacing.x30; + return ZetaSpacingBase.x30; case ZetaAvatarSize.xl: - return ZetaSpacing.x20; + return ZetaSpacing.xL10; case ZetaAvatarSize.l: - return ZetaSpacing.x16; + return ZetaSpacing.xL9; case ZetaAvatarSize.m: - return ZetaSpacing.x12; + return ZetaSpacing.xL8; case ZetaAvatarSize.s: - return ZetaSpacing.x10; + return ZetaSpacing.xL6; case ZetaAvatarSize.xs: - return ZetaSpacing.x9; + return ZetaSpacing.xL5; case ZetaAvatarSize.xxs: - return ZetaSpacing.x8; + return ZetaSpacing.xL4; case ZetaAvatarSize.xxxs: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; } } @@ -255,13 +255,13 @@ extension on ZetaAvatarSize { case ZetaAvatarSize.xl: case ZetaAvatarSize.l: case ZetaAvatarSize.m: - return ZetaSpacing.x1; + return ZetaSpacing.minimum; case ZetaAvatarSize.s: case ZetaAvatarSize.xs: case ZetaAvatarSize.xxs: case ZetaAvatarSize.xxxs: - return ZetaSpacing.x0_5; + return ZetaSpacingBase.x0_5; } } @@ -367,7 +367,7 @@ class ZetaAvatarBadge extends StatelessWidget { final backgroundColor = type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : color; final badgeSize = _getContainerSize(); final borderSize = _getBorderSize(); - final paddedSize = badgeSize + ZetaSpacing.x1; + final paddedSize = badgeSize + ZetaSpacing.minimum; final innerContent = Container( margin: const EdgeInsets.all(0.01), diff --git a/lib/src/components/badges/badge.dart b/lib/src/components/badges/badge.dart index 123744f2..151fdd0a 100644 --- a/lib/src/components/badges/badge.dart +++ b/lib/src/components/badges/badge.dart @@ -29,7 +29,7 @@ class ZetaBadge extends StatelessWidget { final Color backgroundColor = status.colorSwatch(context); return Container( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x1, vertical: ZetaSpacing.x0_5), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum, vertical: ZetaSpacingBase.x0_5), decoration: BoxDecoration( color: backgroundColor, borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none, diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index 5321e867..1e3e7a01 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -94,8 +94,8 @@ class ZetaIndicator extends StatelessWidget { final sizePixels = _getSizePixels(size, type); return Container( - width: sizePixels + ZetaSpacing.x1, - height: sizePixels + ZetaSpacing.x1, + width: sizePixels + ZetaSpacing.minimum, + height: sizePixels + ZetaSpacing.minimum, decoration: BoxDecoration( color: (inverse ? foregroundColor : Colors.transparent), borderRadius: ZetaRadius.full, @@ -104,9 +104,9 @@ class ZetaIndicator extends StatelessWidget { child: Container( width: sizePixels, height: sizePixels, - decoration: BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(ZetaSpacing.x4)), + decoration: BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(ZetaSpacing.large)), child: ClipRRect( - borderRadius: BorderRadius.circular(ZetaSpacing.x4), + borderRadius: BorderRadius.circular(ZetaSpacing.large), clipBehavior: Clip.hardEdge, child: size == ZetaWidgetSize.small ? null : _buildContent(foregroundColor), ), @@ -143,20 +143,20 @@ class ZetaIndicator extends StatelessWidget { double _getSizePixels(ZetaWidgetSize size, ZetaIndicatorType type) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x4; + return ZetaSpacing.large; case ZetaWidgetSize.medium: - return type == ZetaIndicatorType.icon ? ZetaSpacing.x3 : ZetaSpacing.x3_5; + return type == ZetaIndicatorType.icon ? ZetaSpacing.medium : ZetaSpacingBase.x3_5; case ZetaWidgetSize.small: - return ZetaSpacing.x2; + return ZetaSpacing.small; } } double _getIconSize(ZetaWidgetSize size) { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x3; + return ZetaSpacing.medium; case ZetaWidgetSize.medium: - return ZetaSpacing.x2; + return ZetaSpacing.small; case ZetaWidgetSize.small: return 0; } diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 6d5974af..9206e336 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -85,7 +85,7 @@ class ZetaPriorityPill extends StatelessWidget { @override Widget build(BuildContext context) { final color = type.color(context); - final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.x5 : ZetaSpacing.x7; + final size = this.size == ZetaPriorityPillSize.small ? ZetaSpacing.xL : ZetaSpacing.xL3; return DecoratedBox( decoration: BoxDecoration( @@ -121,8 +121,8 @@ class ZetaPriorityPill extends StatelessWidget { if (!isBadge) Padding( padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.x2, - vertical: ZetaSpacing.x1, + horizontal: ZetaSpacing.small, + vertical: ZetaSpacing.minimum, ), child: Text( (priority?.isEmpty ?? true) ? type.name.capitalize() : priority!, diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index a31837c7..83c82e3a 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -39,16 +39,16 @@ class ZetaStatusLabel extends StatelessWidget { borderRadius: rounded ? ZetaRadius.full : ZetaRadius.none, ), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x0_5), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.small, vertical: ZetaSpacingBase.x0_5), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon( customIcon ?? Icons.circle, - size: customIcon != null ? ZetaSpacing.x5 : ZetaSpacing.x2, + size: customIcon != null ? ZetaSpacing.xL : ZetaSpacing.small, color: colors.icon, ), - const SizedBox(width: ZetaSpacing.xs), + const SizedBox(width: ZetaSpacing.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 2abeb4b4..7b2e1fdd 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.x9, ZetaSpacing.x7); + static const Size _containerSize = Size(ZetaSpacing.xL5, ZetaSpacing.xL3); @override Widget build(BuildContext context) { @@ -57,7 +57,7 @@ class ZetaTag extends StatelessWidget { child: Center( child: FittedBox( child: Padding( - padding: const EdgeInsets.fromLTRB(ZetaSpacing.x2, 1, ZetaSpacing.x2, 1), + padding: const EdgeInsets.fromLTRB(ZetaSpacing.small, 1, ZetaSpacing.small, 1), child: Text( label, style: ZetaTextStyles.bodyMedium, @@ -76,20 +76,20 @@ class ZetaTag extends StatelessWidget { if (!rounded) return null; if (direction == ZetaTagDirection.right) { return const BorderRadius.only( - topRight: Radius.circular(ZetaSpacing.x0_5), - bottomRight: Radius.circular(ZetaSpacing.x0_5), + topRight: Radius.circular(ZetaSpacingBase.x0_5), + bottomRight: Radius.circular(ZetaSpacingBase.x0_5), ); } else { return const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacing.x0_5), - bottomLeft: Radius.circular(ZetaSpacing.x0_5), + topLeft: Radius.circular(ZetaSpacingBase.x0_5), + bottomLeft: Radius.circular(ZetaSpacingBase.x0_5), ); } } Widget _buildCustomPaint(BuildContext context) { return CustomPaint( - size: const Size(ZetaSpacing.x3, ZetaSpacing.x7), + size: const Size(ZetaSpacing.medium, ZetaSpacing.xL3), painter: _TagPainter( color: Zeta.of(context).colors.surfaceHover, direction: direction, diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart index 15323eaa..73e94d49 100644 --- a/lib/src/components/banners/in_page_banner.dart +++ b/lib/src/components/banners/in_page_banner.dart @@ -55,15 +55,15 @@ class ZetaInPageBanner extends StatelessWidget { borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none, ), child: Padding( - padding: const EdgeInsets.all(ZetaSpacing.x0_5), + padding: const EdgeInsets.all(ZetaSpacingBase.x0_5), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( - padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.x3, start: ZetaSpacing.x2_5), + padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.medium, start: ZetaSpacingBase.x2_5), child: Icon( customIcon ?? status.icon(rounded: rounded), - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, ), ), @@ -71,12 +71,12 @@ class ZetaInPageBanner extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox(height: ZetaSpacing.x2), + const SizedBox(height: ZetaSpacing.small), if (hasTitle) Text( title!, style: ZetaTextStyles.labelLarge, - ).paddingBottom(ZetaSpacing.xxs), + ).paddingBottom(ZetaSpacing.minimum), DefaultTextStyle( style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault), child: content, @@ -85,10 +85,10 @@ class ZetaInPageBanner extends StatelessWidget { Row( children: actions .map((e) => e.copyWith(size: ZetaWidgetSize.medium, type: ZetaButtonType.outlineSubtle)) - .divide(const SizedBox.square(dimension: ZetaSpacing.x2)) + .divide(const SizedBox.square(dimension: ZetaSpacing.small)) .toList(), - ).paddingTop(ZetaSpacing.x4), - const SizedBox(height: ZetaSpacing.x2_5), + ).paddingTop(ZetaSpacing.large), + const SizedBox(height: ZetaSpacingBase.x2_5), ], ), ), @@ -97,10 +97,10 @@ class ZetaInPageBanner extends StatelessWidget { onPressed: onClose, icon: Icon( !rounded ? ZetaIcons.close_sharp : ZetaIcons.close_round, - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, ), ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.x2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), ), ), ); diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banners/system_banner.dart index ebb38d6b..49b06f4a 100644 --- a/lib/src/components/banners/system_banner.dart +++ b/lib/src/components/banners/system_banner.dart @@ -63,11 +63,11 @@ class ZetaSystemBanner extends MaterialBanner { children: [ if (leadingIcon != null) Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.x2), + padding: const EdgeInsets.only(right: ZetaSpacing.small), child: Icon( leadingIcon, color: foregroundColor, - size: ZetaSpacing.x6, + size: ZetaSpacing.xL2, ), ), 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 db1447c2..06c260b2 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.x5, + ZetaSpacing.xL, 0, - ZetaSpacing.x5, - ZetaSpacing.x5, + ZetaSpacing.xL, + ZetaSpacing.xL, ), decoration: BoxDecoration( color: colors.surfaceSecondary, borderRadius: const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacing.x6), - topRight: Radius.circular(ZetaSpacing.x6), + topLeft: Radius.circular(ZetaSpacing.xL2), + topRight: Radius.circular(ZetaSpacing.xL2), ), ), child: Column( @@ -47,12 +47,12 @@ class ZetaBottomSheet extends StatelessWidget { children: [ Align( child: SizedBox( - height: ZetaSpacing.x9, + height: ZetaSpacing.xL5, child: Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x2), + padding: const EdgeInsets.only(top: ZetaSpacing.small), child: Icon( Icons.maximize_rounded, - size: ZetaSpacing.x16, + size: ZetaSpacing.xL9, color: colors.surfaceDisabled, ), ), diff --git a/lib/src/components/bottom sheets/menu_items.dart b/lib/src/components/bottom sheets/menu_items.dart index 750c3ed7..486d9ce9 100644 --- a/lib/src/components/bottom sheets/menu_items.dart +++ b/lib/src/components/bottom sheets/menu_items.dart @@ -85,11 +85,11 @@ class ZetaMenuItem extends StatelessWidget { switch (type) { case ZetaMenuItemType.horizontal: return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.x12), + constraints: const BoxConstraints(minHeight: ZetaSpacing.xL8), child: InkWell( onTap: _onTap, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x4, vertical: ZetaSpacing.x3), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.large, vertical: ZetaSpacing.medium), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -97,14 +97,14 @@ class ZetaMenuItem extends StatelessWidget { child: Row( children: [ if (leading != null) - Padding(padding: const EdgeInsets.only(right: ZetaSpacing.x2), child: leading), + Padding(padding: const EdgeInsets.only(right: ZetaSpacing.small), child: leading), Expanded(child: text), ], ), ), if (trailing != null) IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.x6), + data: _iconThemeData(colors, _enabled, ZetaSpacing.xL2), child: trailing ?? const Icon(Icons.keyboard_arrow_right), ), ], @@ -116,14 +116,14 @@ class ZetaMenuItem extends StatelessWidget { return InkWell( onTap: _onTap, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x4, vertical: ZetaSpacing.x3), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.large, vertical: ZetaSpacing.medium), child: Column( children: [ if (leading != null) Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.x3), + padding: const EdgeInsets.only(bottom: ZetaSpacing.medium), child: IconTheme( - data: _iconThemeData(colors, _enabled, ZetaSpacing.x8), + data: _iconThemeData(colors, _enabled, ZetaSpacing.xL4), child: leading!, ), ), diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart index bfe5bb9a..7cb9b7a8 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -66,14 +66,14 @@ class _ZetaBreadCrumbsState extends State { const Row( children: [ SizedBox( - width: ZetaSpacing.xs, + width: ZetaSpacing.small, ), Icon( ZetaIcons.chevron_right_round, - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, ), SizedBox( - width: ZetaSpacing.xs, + width: ZetaSpacing.small, ), ], ), @@ -199,7 +199,7 @@ class _ZetaBreadCrumbState extends State { color: getColor(controller.value, colors), ), const SizedBox( - width: ZetaSpacing.xs, + width: ZetaSpacing.small, ), Text( widget.label, @@ -297,7 +297,7 @@ class _BreadCrumbsTruncatedState extends State { side: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.focused)) { return BorderSide( - width: ZetaSpacing.x0_5, + width: ZetaSpacingBase.x0_5, color: colors.primary.shade100, ); } @@ -312,8 +312,8 @@ class _BreadCrumbsTruncatedState extends State { ), child: Icon( widget.rounded ? ZetaIcons.more_horizontal_round : ZetaIcons.more_horizontal_sharp, - size: ZetaSpacing.x4, - ).paddingHorizontal(ZetaSpacing.xs).paddingVertical(ZetaSpacing.xxs), + size: ZetaSpacing.large, + ).paddingHorizontal(ZetaSpacing.small).paddingVertical(ZetaSpacing.minimum), ); } @@ -324,14 +324,14 @@ class _BreadCrumbsTruncatedState extends State { const Row( children: [ SizedBox( - width: ZetaSpacing.xs, + width: ZetaSpacing.small, ), Icon( ZetaIcons.chevron_right_round, - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, ), SizedBox( - width: ZetaSpacing.xs, + width: ZetaSpacing.small, ), ], ), diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index 672030bf..46ec6e76 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -172,7 +172,7 @@ class ZetaButton extends StatelessWidget { ] .divide( const SizedBox( - width: ZetaSpacing.x2, + width: ZetaSpacing.small, ), ) .toList(), @@ -187,26 +187,26 @@ class ZetaButton extends StatelessWidget { double get _minConstraints { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x12; + return ZetaSpacing.xL8; case ZetaWidgetSize.medium: - return ZetaSpacing.x10; + return ZetaSpacing.xL6; case ZetaWidgetSize.small: - return ZetaSpacing.x8; + return ZetaSpacing.xL4; } } double get _textPadding { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x4; + return ZetaSpacing.large; case ZetaWidgetSize.medium: - return ZetaSpacing.x3; + return ZetaSpacing.medium; case ZetaWidgetSize.small: - return ZetaSpacing.x1; + return ZetaSpacing.minimum; } } @@ -214,9 +214,9 @@ class ZetaButton extends StatelessWidget { switch (size) { case ZetaWidgetSize.large: case ZetaWidgetSize.medium: - return ZetaSpacing.x5; + return ZetaSpacing.xL; case ZetaWidgetSize.small: - return ZetaSpacing.x4; + return ZetaSpacing.large; } } diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart index 8d462a76..305b326c 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -243,21 +243,21 @@ class _ZetaGroupButtonState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.x5), + if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.xL), 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.x5, + size: ZetaSpacing.xL, ), - ].divide(const SizedBox(width: ZetaSpacing.x1)).toList(), + ].divide(const SizedBox(width: ZetaSpacing.minimum)).toList(), ).paddingAll(_padding), ), ), ); } - double get _padding => widget.isLarge ? ZetaSpacing.x4 : ZetaSpacing.x3; + double get _padding => widget.isLarge ? ZetaSpacing.large : ZetaSpacing.medium; BorderSide _getBorderSide( Set states, @@ -265,7 +265,7 @@ class _ZetaGroupButtonState extends State { bool finalButton, ) { if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5); + return BorderSide(color: colors.blue.shade50, width: ZetaSpacingBase.x0_5); } if (widget.isInverse) return BorderSide(color: colors.black); if (states.contains(WidgetState.disabled)) { diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index f7b836b4..9e85bba9 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -138,7 +138,7 @@ ButtonStyle buttonStyle( } // TODO(thelukewalton): 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: ZetaSpacing.x0_5); + return BorderSide(color: colors.blue, width: ZetaSpacingBase.x0_5); } if (type.border) { return BorderSide( diff --git a/lib/src/components/buttons/fab.dart b/lib/src/components/buttons/fab.dart index f54853d5..992a3d4a 100644 --- a/lib/src/components/buttons/fab.dart +++ b/lib/src/components/buttons/fab.dart @@ -138,7 +138,7 @@ class _ZetaFABState extends State { (Set states) { if (states.contains(WidgetState.focused)) { // TODO(thelukewalton): 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: ZetaSpacing.x0_5); + return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaSpacingBase.x0_5); } return null; }, @@ -148,7 +148,7 @@ class _ZetaFABState extends State { duration: const Duration(milliseconds: 300), child: Padding( padding: _isExpanded - ? const EdgeInsets.symmetric(horizontal: ZetaSpacing.x3_5, vertical: ZetaSpacing.x3) + ? const EdgeInsets.symmetric(horizontal: ZetaSpacingBase.x3_5, vertical: ZetaSpacing.medium) : EdgeInsets.all(widget.size.padding), child: Row( mainAxisSize: MainAxisSize.min, @@ -161,7 +161,7 @@ class _ZetaFABState extends State { Text(widget.label, style: ZetaTextStyles.labelLarge), ], ), - ].divide(const SizedBox(width: ZetaSpacing.x2)).toList(), + ].divide(const SizedBox(width: ZetaSpacing.small)).toList(), ), ), ), @@ -196,18 +196,18 @@ extension on ZetaWidgetBorder { isExpanded ? this == ZetaWidgetBorder.full ? size == ZetaFabSize.small - ? ZetaSpacing.x7 - : ZetaSpacing.x12 - : ZetaSpacing.x2 + ? ZetaSpacing.xL3 + : ZetaSpacing.xL8 + : ZetaSpacing.small : size == ZetaFabSize.small - ? ZetaSpacing.x2 - : ZetaSpacing.x4, + ? ZetaSpacing.small + : ZetaSpacing.large, ), ); } } extension on ZetaFabSize { - double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.x6 : ZetaSpacing.x9; - double get padding => this == ZetaFabSize.small ? ZetaSpacing.x4 : ZetaSpacing.x7_5; + double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.xL2 : ZetaSpacing.xL5; + double get padding => this == ZetaFabSize.small ? ZetaSpacing.large : ZetaSpacingBase.x7_5; } diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 46ed9b75..2c8ad7c5 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -115,22 +115,22 @@ class ZetaIconButton extends StatelessWidget { double get _iconPadding { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x3; + return ZetaSpacing.medium; case ZetaWidgetSize.medium: - return ZetaSpacing.x2; + return ZetaSpacing.small; case ZetaWidgetSize.small: - return ZetaSpacing.x1; + return ZetaSpacing.minimum; } } double get _iconSize { switch (size) { case ZetaWidgetSize.large: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; case ZetaWidgetSize.medium: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; case ZetaWidgetSize.small: - return ZetaSpacing.x5; + return ZetaSpacing.xL; } } diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 1ccef81d..ea044719 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.x20; + final actionsExtend = slidableActionsCount * ZetaSpacing.xL10; final extend = actionsExtend / maxWidth; return extend > 1 ? 1 : extend; @@ -145,15 +145,15 @@ class ZetaChatItem extends StatelessWidget { onTap: onTap, child: Padding( padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.s, - vertical: ZetaSpacing.xs, + horizontal: ZetaSpacing.medium, + vertical: ZetaSpacing.small, ), child: Row( children: [ leading, Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.medium), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -163,10 +163,10 @@ class ZetaChatItem extends StatelessWidget { if (highlighted) Container( margin: const EdgeInsets.only( - right: ZetaSpacing.xxs, + right: ZetaSpacing.minimum, ), - height: ZetaSpacing.x2, - width: ZetaSpacing.x2, + height: ZetaSpacing.small, + width: ZetaSpacing.small, decoration: BoxDecoration( color: colors.primary, shape: BoxShape.circle, @@ -196,7 +196,7 @@ class ZetaChatItem extends StatelessWidget { ), IconTheme( data: const IconThemeData( - size: ZetaSpacing.x4, + size: ZetaSpacing.large, ), child: Row( children: [ @@ -204,7 +204,7 @@ class ZetaChatItem extends StatelessWidget { if (enabledWarningIcon) Padding( padding: const EdgeInsets.only( - left: ZetaSpacing.xxs, + left: ZetaSpacing.minimum, ), child: Icon( ZetaIcons.info_round, @@ -214,7 +214,7 @@ class ZetaChatItem extends StatelessWidget { if (enabledWarningIcon) Padding( padding: const EdgeInsets.only( - left: ZetaSpacing.xxs, + left: ZetaSpacing.minimum, ), child: Icon( Icons.circle_notifications, @@ -224,10 +224,10 @@ class ZetaChatItem extends StatelessWidget { if (_count != null) Container( margin: const EdgeInsets.only( - left: ZetaSpacing.xxs, + left: ZetaSpacing.minimum, ), padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.x2, + horizontal: ZetaSpacing.small, ), decoration: BoxDecoration( color: colors.primary, @@ -265,7 +265,7 @@ class ZetaChatItem extends StatelessWidget { ), Padding( padding: const EdgeInsets.only( - left: ZetaSpacing.xxs, + left: ZetaSpacing.minimum, ), child: Icon( starred ? ZetaIcons.star_sharp : ZetaIcons.star_outline_sharp, @@ -333,7 +333,7 @@ class _ZetaSlidableAction extends StatelessWidget { return Expanded( child: SizedBox.expand( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.xxs), + padding: const EdgeInsets.only(left: ZetaSpacing.minimum), child: IconButton( onPressed: () => onPressed, style: IconButton.styleFrom( @@ -347,7 +347,7 @@ class _ZetaSlidableAction extends StatelessWidget { icon: Icon( icon, color: foregroundColor, - size: ZetaSpacing.x8, + size: ZetaSpacing.xL4, ), ), ), diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 40e176ea..17c644f9 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -198,17 +198,21 @@ class _CheckboxState extends State<_Checkbox> { ), ], color: _getBackground(theme), +<<<<<<< HEAD border: Border.all(color: _getBorderColor(theme), width: ZetaSpacing.x0_5), +======= + border: widget.enabled ? Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5) : null, +>>>>>>> 57778e5 (update : Spacings + radii (#47)) borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, ), - width: ZetaSpacing.x5, - height: ZetaSpacing.x5, + width: ZetaSpacing.xL, + height: ZetaSpacing.xL, child: icon, ), if (widget.label != null) ...[ Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.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 d5eac29a..76711cdf 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -129,15 +129,15 @@ class _ZetaChipState extends State { elevation: WidgetStateProperty.all(0), side: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.focused)) { - return BorderSide(width: ZetaSpacing.x0_5, color: colors.blue.shade50); + return BorderSide(width: ZetaSpacingBase.x0_5, color: colors.blue.shade50); } return BorderSide(color: colors.borderDefault); }), padding: WidgetStateProperty.all( EdgeInsets.fromLTRB( - widget.leading != null ? ZetaSpacing.x2_5 : ZetaSpacing.x3, + widget.leading != null ? ZetaSpacingBase.x2_5 : ZetaSpacing.medium, 0, - widget.trailing != null ? ZetaSpacing.x2_5 : ZetaSpacing.x3, + widget.trailing != null ? ZetaSpacingBase.x2_5 : ZetaSpacing.medium, 0, ), ), @@ -149,7 +149,7 @@ class _ZetaChipState extends State { IconTheme( data: IconThemeData( color: foregroundColor, - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, ), child: leading!, ), @@ -158,11 +158,11 @@ class _ZetaChipState extends State { IconTheme( data: IconThemeData( color: foregroundColor, - size: ZetaSpacing.x5, + size: ZetaSpacing.xL, ), child: widget.trailing!, ), - ].divide(const SizedBox.square(dimension: ZetaSpacing.x2)).toList(), + ].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(), ), ); } diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart index ac1d2bcc..4596d84d 100644 --- a/lib/src/components/contact_item/contact_item.dart +++ b/lib/src/components/contact_item/contact_item.dart @@ -48,16 +48,16 @@ class ZetaContactItem extends StatelessWidget { onTap: onTap, child: Padding( padding: const EdgeInsets.only( - top: ZetaSpacing.xs, - bottom: ZetaSpacing.xs, - left: ZetaSpacing.m, + top: ZetaSpacing.small, + bottom: ZetaSpacing.small, + left: ZetaSpacing.xL2, ), child: Row( children: [ leading, Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.medium), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart index 349f531e..de2c15cd 100644 --- a/lib/src/components/date_input/date_input.dart +++ b/lib/src/components/date_input/date_input.dart @@ -110,11 +110,11 @@ class ZetaDateInputState extends State implements ZetaFormFieldSt double get _iconSize { switch (widget.size) { case ZetaWidgetSize.large: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; case ZetaWidgetSize.medium: - return ZetaSpacing.x5; + return ZetaSpacing.xL; case ZetaWidgetSize.small: - return ZetaSpacing.x4; + return ZetaSpacing.large; } } diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart index 4ab5034e..a5a6f585 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.x16) + ((_buttonsPerRow - 1) * ZetaSpacing.x9), + width: (_buttonsPerRow * ZetaSpacing.xL9) + ((_buttonsPerRow - 1) * ZetaSpacing.xL5), child: GridView.count( crossAxisCount: _buttonsPerRow, shrinkWrap: true, semanticChildCount: _buttonValues.length, - mainAxisSpacing: ZetaSpacing.x6, + mainAxisSpacing: ZetaSpacing.xL2, physics: const NeverScrollableScrollPhysics(), - crossAxisSpacing: ZetaSpacing.x9, + crossAxisSpacing: ZetaSpacing.xL5, children: _buttonValues.entries .map( (e) => ZetaDialPadButton( @@ -190,8 +190,8 @@ class ZetaDialPadButton extends StatelessWidget { excludeSemantics: true, child: AnimatedContainer( duration: Durations.short2, - width: ZetaSpacing.x16, - height: ZetaSpacing.x16, + width: ZetaSpacing.xL9, + height: ZetaSpacing.xL9, 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 f490ebd6..302b68aa 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -112,7 +112,7 @@ class _ZetaDialog extends StatelessWidget { children: [ if (icon != null) Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.s), + padding: const EdgeInsets.only(bottom: ZetaSpacing.medium), child: icon, ), if (title != null) @@ -129,9 +129,9 @@ class _ZetaDialog extends StatelessWidget { titlePadding: context.deviceType == DeviceType.mobilePortrait ? null : const EdgeInsets.only( - left: ZetaSpacing.x10, - right: ZetaSpacing.x10, - top: ZetaSpacing.m, + left: ZetaSpacing.xL6, + right: ZetaSpacing.xL6, + top: ZetaSpacing.xL2, ), 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.x10, - right: ZetaSpacing.x10, - top: ZetaSpacing.s, - bottom: ZetaSpacing.m, + left: ZetaSpacing.xL6, + right: ZetaSpacing.xL6, + top: ZetaSpacing.medium, + bottom: ZetaSpacing.xL2, ), contentTextStyle: context.deviceType == DeviceType.mobilePortrait ? zetaTextTheme.bodySmall?.copyWith(color: zeta.colors.textDefault) @@ -153,20 +153,20 @@ class _ZetaDialog extends StatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - if (hasButton) const SizedBox(height: ZetaSpacing.m), + if (hasButton) const SizedBox(height: ZetaSpacing.xL2), if (tertiaryButton == null) Row( children: [ if (secondaryButton != null) Expanded(child: secondaryButton), - if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.b), + if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.large), if (primaryButton != null) Expanded(child: primaryButton), ], ) else ...[ if (primaryButton != null) primaryButton, - if (primaryButton != null && secondaryButton != null) const SizedBox(height: ZetaSpacing.s), + if (primaryButton != null && secondaryButton != null) const SizedBox(height: ZetaSpacing.medium), if (secondaryButton != null) secondaryButton, - if (primaryButton != null || secondaryButton != null) const SizedBox(height: ZetaSpacing.xs), + if (primaryButton != null || secondaryButton != null) const SizedBox(height: ZetaSpacing.small), Row( mainAxisAlignment: MainAxisAlignment.center, children: [tertiaryButton], @@ -179,13 +179,13 @@ class _ZetaDialog extends StatelessWidget { children: [ if (tertiaryButton != null) tertiaryButton, if (primaryButton != null || secondaryButton != null) ...[ - const SizedBox(width: ZetaSpacing.m), + const SizedBox(width: ZetaSpacing.xL2), Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ if (secondaryButton != null) secondaryButton, - if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.b), + if (primaryButton != null && secondaryButton != null) const SizedBox(width: ZetaSpacing.large), if (primaryButton != null) primaryButton, ], ), @@ -197,8 +197,8 @@ class _ZetaDialog extends StatelessWidget { actionsPadding: context.deviceType == DeviceType.mobilePortrait ? null : const EdgeInsets.symmetric( - horizontal: ZetaSpacing.x10, - vertical: ZetaSpacing.m, + horizontal: ZetaSpacing.xL6, + vertical: ZetaSpacing.xL2, ), ); } diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index c2e2f49b..05b270a4 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -309,13 +309,13 @@ class _DropdownItemState extends State<_DropdownItem> { if (leading != null) { leading = Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.x3), + padding: const EdgeInsets.only(right: ZetaSpacing.medium), child: leading, ); } return ConstrainedBox( - constraints: const BoxConstraints(maxHeight: ZetaSpacing.x10), + constraints: const BoxConstraints(maxHeight: ZetaSpacing.xL6), child: DefaultTextStyle( style: ZetaTextStyles.bodyMedium, child: OutlinedButton( @@ -325,11 +325,11 @@ class _DropdownItemState extends State<_DropdownItem> { child: Row( mainAxisSize: MainAxisSize.min, children: [ - const SizedBox(width: ZetaSpacing.x3), + const SizedBox(width: ZetaSpacing.medium), if (leading != null) leading, Expanded( child: Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.x2), + padding: const EdgeInsets.only(right: ZetaSpacing.small), child: Align( alignment: Alignment.centerLeft, child: FittedBox( @@ -341,7 +341,7 @@ class _DropdownItemState extends State<_DropdownItem> { ), ), ], - ).paddingVertical(ZetaSpacing.x2_5), + ).paddingVertical(ZetaSpacingBase.x2_5), ), ), ); @@ -479,7 +479,7 @@ class _ZetaDropDownMenuState extends State<_ZetaDropDownMenu> { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; return Container( - padding: const EdgeInsets.all(ZetaSpacing.x3), + padding: const EdgeInsets.all(ZetaSpacing.medium), decoration: BoxDecoration( color: colors.surfacePrimary, borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, @@ -509,7 +509,7 @@ class _ZetaDropDownMenuState extends State<_ZetaDropDownMenu> { rounded: widget.rounded, ); }) - .divide(const SizedBox(height: ZetaSpacing.x1)) + .divide(const SizedBox(height: ZetaSpacing.minimum)) .toList(), ); }, diff --git a/lib/src/components/filter_selection/filter_selection.dart b/lib/src/components/filter_selection/filter_selection.dart index 46248b5e..3502e7fe 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.x11, + height: ZetaSpacing.xL7, child: Row( children: [ IconButton( @@ -33,16 +33,18 @@ class ZetaFilterSelection extends StatelessWidget { onPressed: onPressed, icon: Icon( rounded ? ZetaIcons.filter_round : ZetaIcons.filter_sharp, - size: ZetaSpacing.m, + size: ZetaSpacing.xL2, ), ), Expanded( child: ListView( shrinkWrap: true, scrollDirection: Axis.horizontal, - padding: const EdgeInsets.all(ZetaSpacing.xxs), - children: - items.map((e) => e.copyWith(rounded: rounded)).divide(const SizedBox(width: ZetaSpacing.x2)).toList(), + padding: const EdgeInsets.all(ZetaSpacing.minimum), + children: items + .map((e) => e.copyWith(rounded: rounded)) + .divide(const SizedBox(width: ZetaSpacing.small)) + .toList(), ), ), ], diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index 723d81c0..2de08169 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -72,7 +72,7 @@ class _GlobalHeaderState extends State { final deviceType = constraints.deviceType; return Container( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.s, horizontal: ZetaSpacing.b), + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.medium, horizontal: ZetaSpacing.large), decoration: BoxDecoration(color: colors.surfacePrimary), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -86,7 +86,7 @@ class _GlobalHeaderState extends State { Row( children: [ Text(widget.title, style: ZetaTextStyles.h4), - const SizedBox.square(dimension: ZetaSpacing.s), + const SizedBox.square(dimension: ZetaSpacing.medium), if (deviceType.isLarge) // If using large screen, render some tabItems in to section ...renderedChildren(widget.tabItems) @@ -104,19 +104,19 @@ class _GlobalHeaderState extends State { Container( color: colors.borderDefault, width: 1, - height: ZetaSpacing.x6, - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xxs), + height: ZetaSpacing.xL2, + margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), ), IconButton(icon: const Icon(ZetaIcons.apps_round), onPressed: widget.onAppsButton), ], - const SizedBox(width: ZetaSpacing.xs), + const SizedBox(width: ZetaSpacing.small), if (widget.avatar != null) widget.avatar!.copyWith(size: ZetaAvatarSize.m), ], ), - ].gap(ZetaSpacing.s), + ].gap(ZetaSpacing.medium), ), ), - const SizedBox(height: ZetaSpacing.x2), + const SizedBox(height: ZetaSpacing.small), Row( children: [ if (deviceType.isSmall && widget.searchBar != null) Expanded(child: widget.searchBar!), @@ -132,7 +132,7 @@ class _GlobalHeaderState extends State { ), ), ), - ].gap(ZetaSpacing.s), + ].gap(ZetaSpacing.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 4e2ba14c..c09189f9 100644 --- a/lib/src/components/global_header/header_tab_item.dart +++ b/lib/src/components/global_header/header_tab_item.dart @@ -62,10 +62,10 @@ class _ZetaGlobalHeaderItemState extends State { child: Row( children: [ Text(widget.label, style: TextStyle(color: foregroundColor)), - const SizedBox(width: ZetaSpacing.x2), + const SizedBox(width: ZetaSpacing.small), if (widget.dropdown != null) Icon(ZetaIcons.expand_more_round, color: foregroundColor), ], - ).paddingHorizontal(ZetaSpacing.m).paddingVertical(ZetaSpacing.s), + ).paddingHorizontal(ZetaSpacing.xL2).paddingVertical(ZetaSpacing.medium), ), ); } diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index f73ebac6..f4f86764 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -83,14 +83,14 @@ class ZetaListItem extends StatelessWidget { if (leading != null) Padding( padding: EdgeInsets.only( - right: dense ? ZetaSpacing.x2 : ZetaSpacing.x4, + right: dense ? ZetaSpacing.small : ZetaSpacing.large, ), child: leading, ), Flexible( child: Padding( padding: EdgeInsets.symmetric( - vertical: dense ? 0.0 : ZetaSpacing.x4, + vertical: dense ? 0.0 : ZetaSpacing.large, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -122,14 +122,14 @@ class ZetaListItem extends StatelessWidget { if (trailing != null) Padding( padding: EdgeInsets.only( - left: dense ? ZetaSpacing.x2 : ZetaSpacing.x4, + left: dense ? ZetaSpacing.small : ZetaSpacing.large, ), child: trailing, ), if (trailing == null && selected && enabled) Padding( padding: EdgeInsets.only( - left: dense ? ZetaSpacing.x2 : ZetaSpacing.x4, + left: dense ? ZetaSpacing.small : ZetaSpacing.large, ), child: Icon( ZetaIcons.check_mark_round, @@ -187,8 +187,8 @@ class _ListItemContainer extends StatelessWidget { onTap: enabled ? onTap : null, child: Container( padding: EdgeInsets.symmetric( - horizontal: dense ? ZetaSpacing.x4 : ZetaSpacing.x8, - vertical: dense ? ZetaSpacing.x2 : ZetaSpacing.x4, + horizontal: dense ? ZetaSpacing.large : ZetaSpacing.xL4, + vertical: dense ? ZetaSpacing.small : ZetaSpacing.large, ), decoration: BoxDecoration( border: enabled && enabledDivider diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index c865e2ed..affc88fa 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.x11, + height: ZetaSpacing.xL7, ), _generateNavigationItemRow(rightItems), ], @@ -162,8 +162,8 @@ class ZetaNavigationBar extends StatelessWidget { return Container( padding: const EdgeInsets.only( - left: ZetaSpacing.s, - right: ZetaSpacing.s, + left: ZetaSpacing.medium, + right: ZetaSpacing.medium, ), decoration: BoxDecoration( color: colors.surfacePrimary, @@ -198,7 +198,7 @@ class _NavigationItem extends StatelessWidget { Widget _getBadge(ZetaColors colors) { return Positioned( - right: ZetaSpacing.xxs, + right: ZetaSpacing.minimum, child: DecoratedBox( decoration: BoxDecoration( color: colors.surfacePrimary, @@ -227,26 +227,26 @@ class _NavigationItem extends StatelessWidget { borderRadius: ZetaRadius.rounded, onTap: onTap, child: Container( - padding: const EdgeInsets.only(left: ZetaSpacing.xs, right: ZetaSpacing.xs, bottom: ZetaSpacing.xs), + padding: const EdgeInsets.only(left: ZetaSpacing.small, right: ZetaSpacing.small, bottom: ZetaSpacing.small), child: Column( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: ZetaSpacing.x11, - height: ZetaSpacing.x8 - _navigationItemBorderWidth, + width: ZetaSpacing.xL7, + height: ZetaSpacing.xL4 - _navigationItemBorderWidth, child: Stack( children: [ Positioned( - left: ZetaSpacing.x2_5, - top: ZetaSpacing.xs - _navigationItemBorderWidth, - right: ZetaSpacing.x2_5, - child: Icon(item.icon, color: elementColor, size: ZetaSpacing.x6), + left: ZetaSpacingBase.x2_5, + top: ZetaSpacing.small - _navigationItemBorderWidth, + right: ZetaSpacingBase.x2_5, + child: Icon(item.icon, color: elementColor, size: ZetaSpacing.xL2), ), if (item.badge != null) _getBadge(colors), ], ), ), - const SizedBox(height: ZetaSpacing.xs), + const SizedBox(height: ZetaSpacing.small), if (item.label != null) Text( item.label!, diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index 5befe5a4..6624b9f9 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -12,8 +12,8 @@ class ZetaNavigationRail extends StatefulWidget { this.selectedIndex, this.onSelect, this.rounded = true, - this.margin = const EdgeInsets.all(ZetaSpacing.x5), - this.itemSpacing = const EdgeInsets.only(bottom: ZetaSpacing.xxs), + this.margin = const EdgeInsets.all(ZetaSpacing.xL), + this.itemSpacing = const EdgeInsets.only(bottom: ZetaSpacing.minimum), this.itemPadding, this.wordWrap, }); @@ -33,14 +33,14 @@ class ZetaNavigationRail extends StatefulWidget { /// The margin around the [ZetaNavigationRail]. /// Default is: /// ``` - /// const EdgeInsets.all(ZetaSpacing.x5) + /// const EdgeInsets.all(ZetaSpacing.xL) /// ``` final EdgeInsets margin; /// The spacing between items in [ZetaNavigationRail]. /// Default is: /// ``` - /// const EdgeInsets.only(bottom: ZetaSpacing.xxs) + /// const EdgeInsets.only(bottom: ZetaSpacing.minimum) /// ``` final EdgeInsets itemSpacing; @@ -48,8 +48,8 @@ class ZetaNavigationRail extends StatefulWidget { /// Default is: /// ``` /// const EdgeInsets.symmetric( - /// horizontal: ZetaSpacing.xs, - /// vertical: ZetaSpacing.s, + /// horizontal: ZetaSpacing.small, + /// vertical: ZetaSpacing.medium, /// ), /// ``` final EdgeInsets? itemPadding; @@ -150,15 +150,15 @@ class _ZetaNavigationRailItemContent extends StatelessWidget { ), child: ConstrainedBox( constraints: const BoxConstraints( - minWidth: ZetaSpacing.x16, - minHeight: ZetaSpacing.x16, + minWidth: ZetaSpacing.xL9, + minHeight: ZetaSpacing.xL9, ), child: SelectionContainer.disabled( child: Padding( padding: padding ?? const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xs, - vertical: ZetaSpacing.s, + horizontal: ZetaSpacing.small, + vertical: ZetaSpacing.medium, ), child: Column( mainAxisAlignment: MainAxisAlignment.center, diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 9d31923a..1241e59a 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.x9; -const _itemWidth = ZetaSpacing.x8; +const _itemHeight = ZetaSpacing.xL5; +const _itemWidth = ZetaSpacing.xL4; /// The type of a [ZetaPagination] enum ZetaPaginationType { @@ -183,7 +183,7 @@ class _ZetaPaginationState extends State { ), ); return Container( - height: ZetaSpacing.x10, + height: ZetaSpacing.xL6, decoration: BoxDecoration( border: Border.all(color: colors.borderSubtle), borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, @@ -195,13 +195,13 @@ class _ZetaPaginationState extends State { value: _currentPage, icon: Icon( widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, - ).paddingStart(ZetaSpacing.x2), + ).paddingStart(ZetaSpacing.small), underline: const SizedBox(), style: Theme.of(context).textTheme.bodyLarge?.copyWith( color: colors.textSubtle, ), padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.x3, + horizontal: ZetaSpacing.medium, ), ), ); @@ -251,7 +251,7 @@ class _ZetaPaginationState extends State { return Row( key: _paginationKey, mainAxisSize: MainAxisSize.min, - children: buttons.divide(const SizedBox(width: ZetaSpacing.x2)).toList(), + children: buttons.divide(const SizedBox(width: ZetaSpacing.small)).toList(), ); }, ); @@ -321,7 +321,7 @@ class _PaginationItem extends StatelessWidget { enableFeedback: false, child: Container( alignment: Alignment.center, - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x1), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), decoration: BoxDecoration( borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none, ), diff --git a/lib/src/components/password/password_input.dart b/lib/src/components/password/password_input.dart index 59f508a7..9f0d6b3b 100644 --- a/lib/src/components/password/password_input.dart +++ b/lib/src/components/password/password_input.dart @@ -128,7 +128,7 @@ class _ZetaPasswordInputState extends State { children: [ if (widget.label != null) Padding( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.x1), + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.minimum), child: Text(widget.label!, style: ZetaTextStyles.bodyMedium), ), SizedBox( @@ -142,13 +142,13 @@ class _ZetaPasswordInputState extends State { onChanged: widget.onChanged, style: _textStyle, decoration: InputDecoration( - contentPadding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2), + contentPadding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.small), filled: true, fillColor: _getBackgroundColor(theme.colors), enabledBorder: _getBorder(defaultBorderColor), focusedBorder: _getBorder( _errorMessage != null ? theme.colors.error.border : theme.colors.primary.border, - width: ZetaSpacing.x0_5, + width: ZetaSpacingBase.x0_5, ), disabledBorder: _getBorder(theme.colors.borderDefault), border: _getBorder(defaultBorderColor), @@ -159,10 +159,10 @@ class _ZetaPasswordInputState extends State { valueListenable: _obscureTextNotifier, builder: (context, value, child) { return IconButton( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.x1), + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.minimum), icon: Icon( value ? ZetaIcons.visibility_off_sharp : ZetaIcons.visibility_sharp, - size: widget.size == ZetaWidgetSize.small ? ZetaSpacing.x4 : ZetaSpacing.x5, + size: widget.size == ZetaWidgetSize.small ? ZetaSpacing.large : ZetaSpacing.xL, ), color: widget.enabled ? theme.colors.iconDefault : theme.colors.iconDisabled, onPressed: () => _obscureTextNotifier.toggle(), @@ -176,16 +176,16 @@ class _ZetaPasswordInputState extends State { ), if (widget.footerText != null || widget.footerIcon != null || _errorMessage != null) Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.x1), + padding: const EdgeInsets.only(top: ZetaSpacing.minimum), child: Row( children: [ if (_errorMessage != null) ...[ Icon( ZetaIcons.error_round, - size: ZetaSpacing.x4, + size: ZetaSpacing.large, color: theme.colors.error.border, ), - const SizedBox(width: ZetaSpacing.x1), + const SizedBox(width: ZetaSpacing.minimum), Text( _errorMessage!, style: ZetaTextStyles.bodySmall.apply(color: theme.colors.error.border), @@ -194,10 +194,10 @@ class _ZetaPasswordInputState extends State { if (_errorMessage == null && widget.footerIcon != null) ...[ Icon( widget.footerIcon, - size: ZetaSpacing.x4, + size: ZetaSpacing.large, color: widget.enabled ? theme.colors.iconDefault : theme.colors.iconDisabled, ), - const SizedBox(width: ZetaSpacing.x1), + const SizedBox(width: ZetaSpacing.minimum), ], if (_errorMessage == null && widget.footerText != null) ...[ Text( @@ -230,11 +230,11 @@ class _ZetaPasswordInputState extends State { double get _inputHeight { switch (widget.size) { case ZetaWidgetSize.small: - return ZetaSpacing.x8; + return ZetaSpacing.xL4; case ZetaWidgetSize.medium: - return ZetaSpacing.x10; + return ZetaSpacing.xL6; case ZetaWidgetSize.large: - return ZetaSpacing.x12; + return ZetaSpacing.xL8; } } diff --git a/lib/src/components/phone_input/countries_dialog.dart b/lib/src/components/phone_input/countries_dialog.dart index 6539f878..2540cc83 100644 --- a/lib/src/components/phone_input/countries_dialog.dart +++ b/lib/src/components/phone_input/countries_dialog.dart @@ -149,7 +149,7 @@ class _CountriesListState extends State<_CountriesList> { children: [ if (_enableSearch) Padding( - padding: const EdgeInsets.only(bottom: ZetaSpacing.b), + padding: const EdgeInsets.only(bottom: ZetaSpacing.large), child: ZetaSearchBar( onChanged: _search, hint: widget.searchHint ?? 'Country or dial code', @@ -164,7 +164,7 @@ class _CountriesListState extends State<_CountriesList> { else _listView(context), Padding( - padding: const EdgeInsets.only(top: ZetaSpacing.b), + padding: const EdgeInsets.only(top: ZetaSpacing.large), child: TextButton( onPressed: () => Navigator.of(context).pop(), child: const Text('Close'), @@ -185,7 +185,7 @@ class _CountriesListState extends State<_CountriesList> { }, child: Padding( padding: const EdgeInsets.symmetric( - vertical: ZetaSpacing.xs, + vertical: ZetaSpacing.small, ), child: _items[index].child, ), diff --git a/lib/src/components/phone_input/phone_input.dart b/lib/src/components/phone_input/phone_input.dart index f0123ae4..18fbb136 100644 --- a/lib/src/components/phone_input/phone_input.dart +++ b/lib/src/components/phone_input/phone_input.dart @@ -170,8 +170,8 @@ class _ZetaPhoneInputState extends State { color: widget.enabled ? zeta.colors.surfacePrimary : zeta.colors.cool.shade30, borderRadius: widget.rounded ? const BorderRadius.only( - topLeft: Radius.circular(ZetaSpacing.xxs), - bottomLeft: Radius.circular(ZetaSpacing.xxs), + topLeft: Radius.circular(ZetaSpacing.minimum), + bottomLeft: Radius.circular(ZetaSpacing.minimum), ) : ZetaRadius.none, border: Border( @@ -190,7 +190,7 @@ class _ZetaPhoneInputState extends State { children: [ Padding( padding: const EdgeInsets.only( - left: ZetaSpacing.x2_5, + left: ZetaSpacingBase.x2_5, ), child: Image.asset( _selectedCountry.flagUri, @@ -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.x5, + size: ZetaSpacing.xL, ), ], ), @@ -254,7 +254,7 @@ class _ZetaPhoneInputState extends State { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xs), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.small), child: Text( _selectedCountry.dialCode, style: ZetaTextStyles.bodyMedium.copyWith( @@ -265,8 +265,8 @@ class _ZetaPhoneInputState extends State { ], ), prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.x12, - minWidth: ZetaSpacing.x10, + minHeight: ZetaSpacing.xL8, + minWidth: ZetaSpacing.xL6, ), filled: true, fillColor: widget.enabled @@ -300,7 +300,7 @@ class _ZetaPhoneInputState extends State { showError && widget.enabled ? (widget.rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp) : (widget.rounded ? ZetaIcons.info_round : ZetaIcons.info_sharp), - size: ZetaSpacing.b, + size: ZetaSpacing.large, color: hintErrorColor, ), ), @@ -326,8 +326,8 @@ class _ZetaPhoneInputState extends State { OutlineInputBorder( borderRadius: rounded ? const BorderRadius.only( - topRight: Radius.circular(ZetaSpacing.xxs), - bottomRight: Radius.circular(ZetaSpacing.xxs), + topRight: Radius.circular(ZetaSpacing.minimum), + bottomRight: Radius.circular(ZetaSpacing.minimum), ) : ZetaRadius.none, borderSide: BorderSide(color: zeta.colors.cool.shade40), @@ -340,8 +340,8 @@ class _ZetaPhoneInputState extends State { OutlineInputBorder( borderRadius: rounded ? const BorderRadius.only( - topRight: Radius.circular(ZetaSpacing.xxs), - bottomRight: Radius.circular(ZetaSpacing.xxs), + topRight: Radius.circular(ZetaSpacing.minimum), + bottomRight: Radius.circular(ZetaSpacing.minimum), ) : ZetaRadius.none, borderSide: BorderSide(color: zeta.colors.blue.shade50), @@ -354,8 +354,8 @@ class _ZetaPhoneInputState extends State { OutlineInputBorder( borderRadius: rounded ? const BorderRadius.only( - topRight: Radius.circular(ZetaSpacing.xxs), - bottomRight: Radius.circular(ZetaSpacing.xxs), + topRight: Radius.circular(ZetaSpacing.minimum), + bottomRight: Radius.circular(ZetaSpacing.minimum), ) : ZetaRadius.none, borderSide: BorderSide(color: zeta.colors.red.shade50), diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index 37a2ce86..98bfe79d 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -103,7 +103,7 @@ class _ZetaProgressBarState extends ZetaProgressState { : ''), style: ZetaTextStyles.titleMedium, textAlign: TextAlign.start, - ).paddingBottom(ZetaSpacing.x4), + ).paddingBottom(ZetaSpacing.large), Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -131,13 +131,13 @@ class _ZetaProgressBarState extends ZetaProgressState { BorderRadius get _border => widget.rounded ? ZetaRadius.rounded : ZetaRadius.none; /// Returns thickness of progress bar based on its weight. - double get _weight => widget.isThin ? ZetaSpacing.x2 : ZetaSpacing.x4; + double get _weight => widget.isThin ? ZetaSpacing.small : ZetaSpacing.large; Widget bufferingWidget(ZetaColors colors) { final Iterable> extraList = List.generate( 3, (e) => [ - const SizedBox(width: ZetaSpacing.x4), + const SizedBox(width: ZetaSpacing.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 90f48c5b..f5fc9abb 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -77,15 +77,15 @@ class ZetaProgressCircleState extends ZetaProgressState { Size _getSize() { switch (widget.size) { case ZetaCircleSizes.xs: - return const Size(ZetaSpacing.x6, ZetaSpacing.x6); + return const Size(ZetaSpacing.xL2, ZetaSpacing.xL2); case ZetaCircleSizes.s: - return const Size(ZetaSpacing.x9, ZetaSpacing.x9); + return const Size(ZetaSpacing.xL5, ZetaSpacing.xL5); case ZetaCircleSizes.m: - return const Size(ZetaSpacing.x10, ZetaSpacing.x10); + return const Size(ZetaSpacing.xL6, ZetaSpacing.xL6); case ZetaCircleSizes.l: - return const Size(ZetaSpacing.x12, ZetaSpacing.x12); + return const Size(ZetaSpacing.xL8, ZetaSpacing.xL8); case ZetaCircleSizes.xl: - return const Size(ZetaSpacing.x16, ZetaSpacing.x16); + return const Size(ZetaSpacing.xL9, ZetaSpacing.xL9); } } diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index a575f06b..5cbd66ad 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.x9, ZetaSpacing.x9), + size: const Size(ZetaSpacing.xL5, ZetaSpacing.xL5), painter: _painter! ..position = position ..reaction = reaction @@ -76,7 +76,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix ..reactionColor = Colors.transparent ..hoverColor = Colors.transparent ..focusColor = zetaColors.blue.shade50 - ..splashRadius = ZetaSpacing.x3 + ..splashRadius = ZetaSpacing.medium ..downPosition = downPosition ..isFocused = states.contains(WidgetState.focused) ..isHovered = states.contains(WidgetState.hovered) @@ -165,7 +165,7 @@ class _RadioPainter extends ToggleablePainter { final Paint paint = Paint() ..color = colors.surfacePrimary ..style = PaintingStyle.stroke - ..strokeWidth = ZetaSpacing.x2_5; + ..strokeWidth = ZetaSpacingBase.x2_5; if (isFocused) canvas.drawCircle(center, _kInnerRadius, paint); // Outer circle @@ -176,7 +176,7 @@ class _RadioPainter extends ToggleablePainter { ? inactiveColor : activeColor ..style = PaintingStyle.stroke - ..strokeWidth = ZetaSpacing.x0_5; + ..strokeWidth = ZetaSpacingBase.x0_5; 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 098a2ab2..dec8cea9 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -119,7 +119,7 @@ class _ZetaSearchBarState extends State { ), prefixIcon: widget.showLeadingIcon ? Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.x2_5, right: ZetaSpacing.xs), + padding: const EdgeInsets.only(left: ZetaSpacingBase.x2_5, right: ZetaSpacing.small), child: Icon( sharp ? ZetaIcons.search_sharp : ZetaIcons.search_round, color: !widget.disabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, @@ -128,8 +128,8 @@ class _ZetaSearchBarState extends State { ) : null, prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.m, - minWidth: ZetaSpacing.m, + minHeight: ZetaSpacing.xL2, + minWidth: ZetaSpacing.xL2, ), suffixIcon: IntrinsicHeight( child: Row( @@ -162,7 +162,7 @@ class _ZetaSearchBarState extends State { ), ], Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.xxs), + padding: const EdgeInsets.only(right: ZetaSpacing.minimum), child: widget.showSpeechToText ? IconButton( visualDensity: const VisualDensity( @@ -189,8 +189,8 @@ class _ZetaSearchBarState extends State { ), ), suffixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.m, - minWidth: ZetaSpacing.m, + minHeight: ZetaSpacing.xL2, + minWidth: ZetaSpacing.xL2, ), filled: !widget.disabled ? null : true, fillColor: !widget.disabled ? null : zeta.colors.cool.shade30, @@ -202,15 +202,15 @@ class _ZetaSearchBarState extends State { } double _inputVerticalPadding(ZetaWidgetSize size) => switch (size) { - ZetaWidgetSize.large => ZetaSpacing.x3, - ZetaWidgetSize.medium => ZetaSpacing.x2, - ZetaWidgetSize.small => ZetaSpacing.x1, + ZetaWidgetSize.large => ZetaSpacing.medium, + ZetaWidgetSize.medium => ZetaSpacing.small, + ZetaWidgetSize.small => ZetaSpacing.minimum, }; double _iconSize(ZetaWidgetSize size) => switch (size) { - ZetaWidgetSize.large => ZetaSpacing.x6, - ZetaWidgetSize.medium => ZetaSpacing.x5, - ZetaWidgetSize.small => ZetaSpacing.x4, + ZetaWidgetSize.large => ZetaSpacing.xL2, + ZetaWidgetSize.medium => ZetaSpacing.xL, + ZetaWidgetSize.small => ZetaSpacing.large, }; OutlineInputBorder _defaultInputBorder( diff --git a/lib/src/components/segmented_control/segmented_control.dart b/lib/src/components/segmented_control/segmented_control.dart index 250ef740..6f64729d 100644 --- a/lib/src/components/segmented_control/segmented_control.dart +++ b/lib/src/components/segmented_control/segmented_control.dart @@ -126,7 +126,7 @@ class _ZetaSegmentedControlState extends State> cursor: SystemMouseCursors.click, child: SelectionContainer.disabled( child: Container( - padding: const EdgeInsets.all(ZetaSpacing.xxs), + padding: const EdgeInsets.all(ZetaSpacing.minimum), decoration: BoxDecoration( color: colors.surfaceDisabled, borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, @@ -207,15 +207,15 @@ class _SegmentState extends State<_Segment> with TickerProviderStateMixin< children: [ widget.child, IconTheme( - data: const IconThemeData(size: ZetaSpacing.x5), + data: const IconThemeData(size: ZetaSpacing.xL), child: DefaultTextStyle( style: ZetaTextStyles.labelMedium.copyWith( color: colors.textDefault, ), child: Padding( padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.l, - vertical: ZetaSpacing.xxs, + horizontal: ZetaSpacing.xL4, + 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.x7; + double maxMaxChildHeight = ZetaSpacing.xL3; 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.x7; + double maxMinChildHeight = ZetaSpacing.xL3; 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.l) * childCount + totalSeparatorWidth; + return (maxMinChildWidth + 2 * ZetaSpacing.xL4) * 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.x7; + double maxHeight = ZetaSpacing.xL3; 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 c657dea1..5db08cb2 100644 --- a/lib/src/components/select_input/select_input.dart +++ b/lib/src/components/select_input/select_input.dart @@ -159,8 +159,8 @@ class _ZetaSelectInputState extends State { setState(() { _menuPosition = upperHeight > lowerHeight ? _MenuPosition.top : _MenuPosition.bottom; _menuSize = Size( - box?.size.width ?? (MediaQuery.of(context).size.width - ZetaSpacing.x10), - (upperHeight > lowerHeight ? upperHeight : lowerHeight) - ZetaSpacing.m, + box?.size.width ?? (MediaQuery.of(context).size.width - ZetaSpacing.xL6), + (upperHeight > lowerHeight ? upperHeight : lowerHeight) - ZetaSpacing.xL2, ); _menuItems = List.from(widget.items); }); @@ -304,7 +304,7 @@ class _InputComponentState extends State<_InputComponent> { prefixIcon: widget.leadingIcon == null ? null : Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.x2_5, right: ZetaSpacing.xs), + padding: const EdgeInsets.only(left: ZetaSpacingBase.x2_5, right: ZetaSpacing.small), child: IconTheme( data: IconThemeData( color: widget.enabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, @@ -314,13 +314,13 @@ class _InputComponentState extends State<_InputComponent> { ), ), prefixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.m, - minWidth: ZetaSpacing.m, + minHeight: ZetaSpacing.xL2, + minWidth: ZetaSpacing.xL2, ), suffixIcon: widget.onToggleMenu == null ? null : Padding( - padding: const EdgeInsets.only(right: ZetaSpacing.xxs), + padding: const EdgeInsets.only(right: ZetaSpacing.minimum), child: IconButton( visualDensity: const VisualDensity( horizontal: -4, @@ -337,8 +337,8 @@ class _InputComponentState extends State<_InputComponent> { ), ), suffixIconConstraints: const BoxConstraints( - minHeight: ZetaSpacing.m, - minWidth: ZetaSpacing.m, + minHeight: ZetaSpacing.xL2, + minWidth: ZetaSpacing.xL2, ), hintStyle: _size == ZetaWidgetSize.small ? ZetaTextStyles.bodyXSmall.copyWith( @@ -375,7 +375,7 @@ class _InputComponentState extends State<_InputComponent> { showError && widget.enabled ? (widget.rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp) : (widget.rounded ? ZetaIcons.info_round : ZetaIcons.info_sharp), - size: ZetaSpacing.b, + size: ZetaSpacing.large, color: hintErrorColor, ), ), @@ -395,15 +395,15 @@ class _InputComponentState extends State<_InputComponent> { } double _inputVerticalPadding(ZetaWidgetSize size) => switch (size) { - ZetaWidgetSize.large => ZetaSpacing.x3, - ZetaWidgetSize.medium => ZetaSpacing.x2, - ZetaWidgetSize.small => ZetaSpacing.x2, + ZetaWidgetSize.large => ZetaSpacing.medium, + ZetaWidgetSize.medium => ZetaSpacing.small, + ZetaWidgetSize.small => ZetaSpacing.small, }; double _iconSize(ZetaWidgetSize size) => switch (size) { - ZetaWidgetSize.large => ZetaSpacing.x5, - ZetaWidgetSize.medium => ZetaSpacing.x5, - ZetaWidgetSize.small => ZetaSpacing.x4, + ZetaWidgetSize.large => ZetaSpacing.xL, + ZetaWidgetSize.medium => ZetaSpacing.xL, + ZetaWidgetSize.small => ZetaSpacing.large, }; OutlineInputBorder _defaultInputBorder( @@ -547,14 +547,14 @@ class ZetaSelectInputItem extends StatelessWidget { selected ? BorderSide(color: colors.primary.shade60) : BorderSide.none, ), padding: const WidgetStatePropertyAll( - EdgeInsets.symmetric(horizontal: ZetaSpacing.b), + EdgeInsets.symmetric(horizontal: ZetaSpacing.large), ), elevation: const WidgetStatePropertyAll(0), overlayColor: const WidgetStatePropertyAll(Colors.transparent), textStyle: WidgetStatePropertyAll( size == ZetaWidgetSize.small ? ZetaTextStyles.bodyXSmall : ZetaTextStyles.bodyMedium, ), - minimumSize: const WidgetStatePropertyAll(Size.fromHeight(ZetaSpacing.x12)), + minimumSize: const WidgetStatePropertyAll(Size.fromHeight(ZetaSpacing.xL8)), alignment: Alignment.centerLeft, visualDensity: VisualDensity( horizontal: visualDensity, diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index 7dce0e50..f0bfb43d 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -60,7 +60,7 @@ class ZetaSnackBar extends SnackBar { : ZetaRadius.none, ), content: Padding( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.xs), + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.small), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -70,7 +70,7 @@ class ZetaSnackBar extends SnackBar { _LeadingIcon(type, leadingIcon), Flexible( child: Padding( - padding: const EdgeInsets.only(left: ZetaSpacing.s), + padding: const EdgeInsets.only(left: ZetaSpacing.medium), child: _Content(type: type, child: content), ), ), @@ -236,10 +236,10 @@ class _IconButton extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.xxs), + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.minimum), child: IconButton( style: IconButton.styleFrom( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.s), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), tapTargetSize: MaterialTapTargetSize.shrinkWrap, minimumSize: const Size(20, 20), ), @@ -277,13 +277,13 @@ class _ActionButton extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.s), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium), child: TextButton( style: TextButton.styleFrom( textStyle: ZetaTextStyles.labelLarge, padding: const EdgeInsets.symmetric( - horizontal: ZetaSpacing.s, - vertical: ZetaSpacing.xxs, + horizontal: ZetaSpacing.medium, + vertical: ZetaSpacing.minimum, ), tapTargetSize: MaterialTapTargetSize.shrinkWrap, minimumSize: Size.zero, @@ -338,7 +338,7 @@ class _LeadingIcon extends StatelessWidget { final colors = Zeta.of(context).colors; return Padding( - padding: type != null || icon != null ? const EdgeInsets.only(left: ZetaSpacing.s) : EdgeInsets.zero, + padding: type != null || icon != null ? const EdgeInsets.only(left: ZetaSpacing.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 dcd9f28f..c3ba8d1d 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.l, - height: ZetaSpacing.l, + width: ZetaSpacing.xL4, + height: ZetaSpacing.xL4, 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.x12, - height: ZetaSpacing.x12, + width: ZetaSpacing.xL8, + height: ZetaSpacing.xL8, 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.m), + margin: EdgeInsets.only(top: _isFirst(index) ? 0.0 : ZetaSpacing.xL2), 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.x1), - width: ZetaSpacing.x1, - height: ZetaSpacing.x12, + margin: const EdgeInsets.only(top: ZetaSpacing.minimum), + width: ZetaSpacing.minimum, + height: ZetaSpacing.xL8, 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.m), + margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL2), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -293,7 +293,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Center( child: Padding( padding: const EdgeInsets.symmetric( - vertical: ZetaSpacing.s, + vertical: ZetaSpacing.medium, ), child: _buildHorizotalIcon(index), ), @@ -307,11 +307,11 @@ class _ZetaStepperState extends State with TickerProviderStateMixin child: Container( key: Key('line$index'), margin: const EdgeInsets.only( - top: ZetaSpacing.x7, - right: ZetaSpacing.b, - left: ZetaSpacing.b, + top: ZetaSpacing.xL3, + right: ZetaSpacing.large, + left: ZetaSpacing.large, ), - height: ZetaSpacing.x0_5, + height: ZetaSpacingBase.x0_5, decoration: BoxDecoration( borderRadius: ZetaRadius.full, color: switch (widget.steps[index].type) { @@ -341,7 +341,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Material( color: Colors.transparent, child: Container( - margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.m), + margin: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xL2), 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 7291d37f..65a49d9e 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.x10; + return ZetaSpacing.xL6; } else { - return ZetaSpacing.x12; + return ZetaSpacing.xL8; } } @@ -157,7 +157,7 @@ class _ZetaStepperInputState extends State { children: [ _getButton(), SizedBox( - width: ZetaSpacing.xl, + width: ZetaSpacing.xL9, child: TextFormField( keyboardType: TextInputType.number, enabled: !_disabled, @@ -186,7 +186,7 @@ class _ZetaStepperInputState extends State { ), ), _getButton(increase: true), - ].divide(const SizedBox(width: ZetaSpacing.x2)).toList(), + ].divide(const SizedBox(width: ZetaSpacing.small)).toList(), ); } } diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 7a9e7899..3babf383 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.m) : null, + thumbSize: _variant == ZetaSwitchType.web ? const Size.square(ZetaSpacing.xL2) : null, ); } } diff --git a/lib/src/components/tabs/tab.dart b/lib/src/components/tabs/tab.dart index aaa77635..a23c71b3 100644 --- a/lib/src/components/tabs/tab.dart +++ b/lib/src/components/tabs/tab.dart @@ -14,15 +14,15 @@ class ZetaTab extends Tab { mainAxisAlignment: MainAxisAlignment.center, children: [ if (icon != null) ...[ - const SizedBox(width: ZetaSpacing.s), + const SizedBox(width: ZetaSpacing.medium), icon, ], if (text != null) Padding( - padding: icon != null ? const EdgeInsets.only(left: ZetaSpacing.x2) : EdgeInsets.zero, + padding: icon != null ? const EdgeInsets.only(left: ZetaSpacing.small) : EdgeInsets.zero, child: Text(text), ), - if (icon != null) const SizedBox(width: ZetaSpacing.s), + if (icon != null) const SizedBox(width: ZetaSpacing.medium), ], ), ); diff --git a/lib/src/components/text_input/text_input.dart b/lib/src/components/text_input/text_input.dart index e1eb2db0..7216c40f 100644 --- a/lib/src/components/text_input/text_input.dart +++ b/lib/src/components/text_input/text_input.dart @@ -142,10 +142,10 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt EdgeInsets get _contentPadding { switch (widget.size) { case ZetaWidgetSize.large: - return const EdgeInsets.symmetric(horizontal: ZetaSpacing.x3, vertical: ZetaSpacing.x4); + return const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.large); case ZetaWidgetSize.small: case ZetaWidgetSize.medium: - return const EdgeInsets.symmetric(horizontal: ZetaSpacing.x3, vertical: ZetaSpacing.x3); + return const EdgeInsets.symmetric(horizontal: ZetaSpacing.medium, vertical: ZetaSpacing.medium); } } @@ -161,11 +161,11 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt late final double size; switch (widget.size) { case ZetaWidgetSize.large: - size = ZetaSpacing.x10; + size = ZetaSpacing.xL6; case ZetaWidgetSize.medium: - size = ZetaSpacing.x8; + size = ZetaSpacing.xL4; case ZetaWidgetSize.small: - size = ZetaSpacing.x6; + size = ZetaSpacing.xL2; } return BoxConstraints( minWidth: size, @@ -182,7 +182,7 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt widget.prefixText!, style: style, ), - ).paddingStart(ZetaSpacing.x2); + ).paddingStart(ZetaSpacing.small); } return null; @@ -198,7 +198,7 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt widget.suffixText!, style: style, ), - ).paddingEnd(ZetaSpacing.x2); + ).paddingEnd(ZetaSpacing.small); } return null; @@ -210,11 +210,11 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt ); OutlineInputBorder get _focusedBorder => _baseBorder.copyWith( - borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaSpacing.x0_5), + borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaSpacingBase.x0_5), ); // TODO(mikecoomber): change to colors.borderPrimary when added OutlineInputBorder get _errorBorder => _baseBorder.copyWith( - borderSide: BorderSide(color: _colors.error, width: ZetaSpacing.x0_5), + borderSide: BorderSide(color: _colors.error, width: ZetaSpacingBase.x0_5), ); @override @@ -259,7 +259,7 @@ class ZetaTextInputState extends State implements ZetaFormFieldSt requirementLevel: widget.requirementLevel, disabled: widget.disabled, ), - const SizedBox(height: ZetaSpacing.x1), + const SizedBox(height: ZetaSpacing.minimum), ], MouseRegion( onEnter: !widget.disabled @@ -361,7 +361,7 @@ class _Label extends StatelessWidget { color: disabled ? colors.textDisabled : colors.textDefault, ), ), - if (requirementWidget != null) requirementWidget.paddingStart(ZetaSpacing.x1), + if (requirementWidget != null) requirementWidget.paddingStart(ZetaSpacing.minimum), ], ); } @@ -417,11 +417,11 @@ class _HintText extends StatelessWidget { : rounded ? ZetaIcons.info_round : ZetaIcons.info_sharp, - size: ZetaSpacing.x4, + size: ZetaSpacing.large, color: elementColor, ), const SizedBox( - width: ZetaSpacing.x1, + width: ZetaSpacing.minimum, ), Expanded( child: Text( @@ -431,7 +431,7 @@ class _HintText extends StatelessWidget { ), ), ], - ).paddingTop(ZetaSpacing.x2); + ).paddingTop(ZetaSpacing.small); } @override diff --git a/lib/src/components/time_input/time_input.dart b/lib/src/components/time_input/time_input.dart index 0d7ad7fd..65be2fd3 100644 --- a/lib/src/components/time_input/time_input.dart +++ b/lib/src/components/time_input/time_input.dart @@ -107,11 +107,11 @@ class ZetaTimeInputState extends State implements ZetaFormFieldSt double get _iconSize { switch (widget.size) { case ZetaWidgetSize.large: - return ZetaSpacing.x6; + return ZetaSpacing.xL2; case ZetaWidgetSize.medium: - return ZetaSpacing.x5; + return ZetaSpacing.xL; case ZetaWidgetSize.small: - return ZetaSpacing.x4; + return ZetaSpacing.large; } } diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart index 8f2fcc41..b0a7bf71 100644 --- a/lib/src/components/tooltip/tooltip.dart +++ b/lib/src/components/tooltip/tooltip.dart @@ -46,8 +46,8 @@ class ZetaTooltip extends StatelessWidget { /// Default is: /// ``` /// const EdgeInsets.symmetric( - /// horizontal: ZetaSpacing.xs, - /// vertical: ZetaSpacing.xxs, + /// horizontal: ZetaSpacing.small, + /// vertical: ZetaSpacing.minimum, /// ) /// ``` final EdgeInsets? padding; @@ -122,8 +122,8 @@ class ZetaTooltip extends StatelessWidget { child: Padding( padding: padding ?? const EdgeInsets.symmetric( - horizontal: ZetaSpacing.xs, - vertical: ZetaSpacing.xxs, + horizontal: ZetaSpacing.small, + vertical: ZetaSpacing.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 7866d3e6..30566b91 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 @@ -2,14 +2,14 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -const _searchBarOffsetTop = ZetaSpacing.x1 * 1.5; -const _searchBarOffsetRight = ZetaSpacing.x1 * 22; -const _maxExtent = ZetaSpacing.x1 * 26; -const _minExtent = ZetaSpacing.x16; -const _leftMin = ZetaSpacing.x4; -const _leftMax = ZetaSpacing.x14; -const _topMin = ZetaSpacing.x5; -const _topMax = ZetaSpacing.x1 * 15; +const _searchBarOffsetTop = ZetaSpacing.minimum * 1.5; +const _searchBarOffsetRight = ZetaSpacing.minimum * 22; +const _maxExtent = ZetaSpacing.minimum * 26; +const _minExtent = ZetaSpacing.xL9; +const _leftMin = ZetaSpacing.large; +const _leftMax = ZetaSpacingBase.x12_5; +const _topMin = ZetaSpacing.xL; +const _topMax = ZetaSpacing.minimum * 15; /// Delegate for creating an extended app bar, that grows and shrinks when scrolling. class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { @@ -40,7 +40,7 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { @override Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { return ConstrainedBox( - constraints: const BoxConstraints(minHeight: ZetaSpacing.x16, maxHeight: _maxExtent), + constraints: const BoxConstraints(minHeight: ZetaSpacing.xL9, maxHeight: _maxExtent), child: ColoredBox( color: Zeta.of(context).colors.surfacePrimary, child: Stack( @@ -52,12 +52,13 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { _topMax, ) : _topMax, - left: shrinks ? ((shrinkOffset / _maxExtent) * ZetaSpacing.x50).clamp(_leftMin, _leftMax) : _leftMin, + left: shrinks ? ((shrinkOffset / _maxExtent) * ZetaSpacingBase.x50).clamp(_leftMin, _leftMax) : _leftMin, right: searchController != null && searchController!.isEnabled ? _searchBarOffsetRight : 0, child: title, ), - if (leading != null) Positioned(top: ZetaSpacing.x3, left: ZetaSpacing.x2, child: leading!), - if (actions != null) Positioned(top: ZetaSpacing.x3, right: ZetaSpacing.x2, child: Row(children: actions!)), + if (leading != null) Positioned(top: ZetaSpacing.medium, left: ZetaSpacing.small, child: leading!), + if (actions != null) + Positioned(top: ZetaSpacing.medium, right: ZetaSpacing.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 d79a3991..9c2ae281 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,7 +3,7 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; -const _extendedOffset = ZetaSpacing.x1 * 6.5; +const _extendedOffset = ZetaSpacing.minimum * 6.5; /// Creates a search field used on a [ZetaTopAppBar]. class ZetaTopAppBarSearchField extends StatefulWidget { 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 10df8e87..08ddc048 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.x5), + style: IconButton.styleFrom(iconSize: ZetaSpacing.xL), ), child: Row( mainAxisSize: MainAxisSize.min, @@ -177,8 +177,8 @@ class _ZetaTopAppBarState extends State { ), if (widget.onSearchMicrophoneIconPressed != null) ...[ SizedBox( - height: ZetaSpacing.m, - child: VerticalDivider(width: ZetaSpacing.x0_5, color: colors.cool.shade70), + height: ZetaSpacing.xL2, + child: VerticalDivider(width: ZetaSpacingBase.x0_5, color: colors.cool.shade70), ), IconButton( onPressed: widget.onSearchMicrophoneIconPressed, @@ -228,12 +228,12 @@ class _ZetaTopAppBarState extends State { child: IconButtonTheme( data: IconButtonThemeData(style: IconButton.styleFrom(tapTargetSize: MaterialTapTargetSize.shrinkWrap)), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x1), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.minimum), child: AppBar( elevation: 0, scrolledUnderElevation: 0, iconTheme: IconThemeData(color: colors.cool.shade90), - leadingWidth: ZetaSpacing.x10, + leadingWidth: ZetaSpacing.xL6, leading: widget.leading, automaticallyImplyLeading: widget.automaticallyImplyLeading, surfaceTintColor: Colors.transparent, diff --git a/lib/src/theme/tokens.dart b/lib/src/theme/tokens.dart index 286ac88a..41025080 100644 --- a/lib/src/theme/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -5,124 +5,170 @@ import 'package:flutter/material.dart'; /// Values are doubles, and can be used for padding, margins and other spacings. /// // TODO(thelukewalton): Refactor to match latest designs. +/// Semantic zeta spacings. class ZetaSpacing { - /// Base multiplier used to calculate spacing values. - static const double spacingBaseMultiplier = 4; + /// No spacing => 0px. + static const double none = ZetaSpacingBase.x0; - /// 2dp space. - static const double x0_5 = spacingBaseMultiplier * 0.5; + /// Minimum spacing => 4px. + static const double minimum = ZetaSpacingBase.x1; - /// 4dp space. - static const double x1 = spacingBaseMultiplier; + /// Small spacing => 8px. + static const double small = ZetaSpacingBase.x2; - /// 4dp space. - static const double xxs = spacingBaseMultiplier; + /// Medium spacing => 12px. + static const double medium = ZetaSpacingBase.x3; - /// 8dp space. - static const double x2 = spacingBaseMultiplier * 2; + /// Large spacing => 16px. + static const double large = ZetaSpacingBase.x4; - /// 8dp space. - static const double xs = spacingBaseMultiplier * 2; + /// xL spacing => 20px. + static const double xL = ZetaSpacingBase.x5; - /// 10dp space. - static const double x2_5 = spacingBaseMultiplier * 2.5; + /// 2xL spacing => 24px. + static const double xL2 = ZetaSpacingBase.x6; - /// 12dp space. - static const double x3 = spacingBaseMultiplier * 3; + /// 3xL spacing => 28px. + static const double xL3 = ZetaSpacingBase.x7; - /// 12dp space. - static const double s = spacingBaseMultiplier * 3; + /// 4xL spacing => 32px. + static const double xL4 = ZetaSpacingBase.x8; - /// 14dp space. - static const double x3_5 = spacingBaseMultiplier * 3.5; + /// 5xL spacing => 36px. + static const double xL5 = ZetaSpacingBase.x9; - /// 16dp space. - static const double x4 = spacingBaseMultiplier * 4; + /// 6xL spacing => 40px. + static const double xL6 = ZetaSpacingBase.x10; - /// 16dp space. - static const double b = spacingBaseMultiplier * 4; + /// 7xL spacing => 44px. + static const double xL7 = ZetaSpacingBase.x11; - /// 20dp space. - static const double x5 = spacingBaseMultiplier * 5; + /// 8xL spacing => 48px. + static const double xL8 = ZetaSpacingBase.x12; - /// 24dp space. - static const double x6 = spacingBaseMultiplier * 6; + /// 9xL spacing => 64px. + static const double xL9 = ZetaSpacingBase.x13; - /// 24dp space. - static const double m = spacingBaseMultiplier * 6; + /// 10xL spacing => 80px. + static const double xL10 = ZetaSpacingBase.x14; - /// 28dp space. - static const double x7 = spacingBaseMultiplier * 7; + /// 11xL spacing => 96px + static const double xL11 = ZetaSpacingBase.x15; +} - /// 30dp space. - static const double x7_5 = spacingBaseMultiplier * 7.5; +/// Semantic zeta radii. +class ZetaRadius { + /// No radius => 0px radius. + static const BorderRadius none = BorderRadius.zero; + + /// Minimal radius => 4px radius. + static const BorderRadius minimal = ZetaRadiusBase.s; - /// 32dp space. - static const double x8 = spacingBaseMultiplier * 8; + /// Rounded radius => 8px radius. + static const BorderRadius rounded = ZetaRadiusBase.m; - /// 32dp space. - static const double l = spacingBaseMultiplier * 8; + /// Large radius => 16px radius. + static const BorderRadius large = ZetaRadiusBase.l; - /// 36dp space. - static const double x9 = spacingBaseMultiplier * 9; + /// xL radius => 24px radius. + static const BorderRadius xL = ZetaRadiusBase.xL; - /// 40dp space. - static const double x10 = spacingBaseMultiplier * 10; + /// Full radius => 360px radius. + static const BorderRadius full = ZetaRadiusBase.x4; +} + +///Tokens that are used for Spacing +class ZetaSpacingBase { + /// 0dp space + static const double x0 = 0; + + /// 2dp space + static const double x0_5 = 2; - /// 44dp space. - static const double x11 = spacingBaseMultiplier * 11; + /// 4dp space + static const double x1 = 4; - /// 48dp space. - static const double x12 = spacingBaseMultiplier * 12; + /// 8dp space + static const double x2 = 8; - /// 52dp Space. - static const double x13 = spacingBaseMultiplier * 13; + /// 10dp space + static const double x2_5 = 10; - /// 56dp Space. - static const double x14 = spacingBaseMultiplier * 14; + /// 12dp space + static const double x3 = 12; - /// 64dp space. - static const double x16 = spacingBaseMultiplier * 16; + /// 14dp space. + static const double x3_5 = 14; + + /// 16dp space + static const double x4 = 16; - /// 64dp space. - static const double xl = spacingBaseMultiplier * 16; + /// 20dp space + static const double x5 = 20; - /// 80dp space. - static const double x20 = spacingBaseMultiplier * 20; + /// 24dp space + static const double x6 = 24; - /// 80dp space. - static const double xxl = spacingBaseMultiplier * 20; + /// 28dp space + static const double x7 = 28; - /// 96dp space. - static const double x24 = spacingBaseMultiplier * 24; + /// 30dp space. + static const double x7_5 = 30; - /// 96dp space. - static const double xxxl = spacingBaseMultiplier * 24; + /// 32dp space + static const double x8 = 32; + + /// 36dp space + static const double x9 = 36; + + /// 40dp space + static const double x10 = 40; + + /// 44dp space + static const double x11 = 44; + + /// 48dp space + static const double x12 = 48; + + /// 56dp space + static const double x12_5 = 56; + + /// 64dp space + static const double x13 = 64; + + /// 80dp space + static const double x14 = 80; + + /// 96dp space + static const double x15 = 96; /// 120dp space - static const double x30 = spacingBaseMultiplier * 30; + static const double x30 = 120; /// 200dp space - static const double x50 = spacingBaseMultiplier * 50; + static const double x50 = 200; } -/// Tokens used for Border Radius. -class ZetaRadius { - /// No border radius; 0px radius. - static const BorderRadius none = BorderRadius.zero; +///Tokens that are used for Border Radius +class ZetaRadiusBase { + /// 4px radius + static const BorderRadius s = BorderRadius.all(Radius.circular(4)); + + /// 8px radius + static const BorderRadius m = BorderRadius.all(Radius.circular(8)); - /// Smallest amount of border radius; 4px radius. - static const BorderRadius minimal = BorderRadius.all(Radius.circular(ZetaSpacing.xxs)); + /// 16px radius + static const BorderRadius l = BorderRadius.all(Radius.circular(16)); - /// Border radius used when rounded parameter is true; 8px radius. - static const BorderRadius rounded = BorderRadius.all(Radius.circular(ZetaSpacing.xs)); + /// 24px radius + static const BorderRadius xL = BorderRadius.all(Radius.circular(24)); - /// Large border radius; 16px radius. - static const BorderRadius large = BorderRadius.all(Radius.circular(ZetaSpacing.b)); + /// 32px radius + static const BorderRadius x2 = BorderRadius.all(Radius.circular(32)); - /// Wide border radius; 24px radius. - static const BorderRadius wide = BorderRadius.all(Radius.circular(ZetaSpacing.m)); + /// 128px radius + static const BorderRadius x3 = BorderRadius.all(Radius.circular(128)); - /// Largest amount of border radius; 360px radius. - static const BorderRadius full = BorderRadius.all(Radius.circular(360)); + /// 360px radius + static const BorderRadius x4 = BorderRadius.all(Radius.circular(360)); }