fix: Spacings + Radii tokens (#48)

Authored-by: Osman <[email protected]>
ZebraDevs · Jun 10, 2024 · 7db99a9 · 7db99a9
1 parent a89c615
commit 7db99a9
Show file tree

Hide file tree

Showing 104 changed files with 713 additions and 652 deletions.
diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart
@@ -20,7 +20,7 @@ class _IconsExampleState extends State<IconsExample> {
     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
@@ -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
@@ -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
@@ -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
@@ -19,7 +19,7 @@ class _BottomSheetExampleState extends State<BottomSheetExample> {
     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
@@ -114,7 +114,7 @@ class _ButtonExampleState extends State<ButtonExample> {
                   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<ButtonExample> {
               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<Widget> inputButtons(ZetaWidgetBorder borderType) {
@@ -164,10 +164,10 @@ class _ButtonExampleState extends State<ButtonExample> {
                   ? 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<Widget> groupButtons(ZetaWidgetBorder) {
@@ -234,6 +234,6 @@ class _ButtonExampleState extends State<ButtonExample> {
           ),
         ],
       ),
-    ].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
@@ -37,7 +37,7 @@ class _ChatItemExampleState extends State<ChatItemExample> {
                   "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
@@ -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
@@ -84,7 +84,7 @@ class _DialPadExampleState extends State<DialPadExample> {
                     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
@@ -22,7 +22,7 @@ class _FilterSelectionExampleState extends State<FilterSelectionExample> {
       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<FilterSelectionExample> {
             ],
             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
@@ -45,7 +45,7 @@ class _GroupHeaderExampleState extends State<GroupHeaderExample> {
                 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
@@ -32,7 +32,7 @@ class _ListItemExampleState extends State<ListItemExample> {
             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<ListItemExample> {
 
               // 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<ListItemExample> {
                 ),
               ),
               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<ListItemExample> {
 
               // 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
@@ -56,7 +56,7 @@ class _NavigationRailExampleState extends State<NavigationRailExample> {
             ),
             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
@@ -51,11 +51,11 @@ class _PasswordInputExampleState extends State<PasswordInputExample> {
                       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),
                 ],
               ),