feat!: [DX-289] Migrate to token spacing (#509)

MewsSystems · Jan 16, 2024 · 421b480 · 421b480
1 parent 6cc041b
commit 421b480
Show file tree

Hide file tree

Showing 46 changed files with 692 additions and 617 deletions.
diff --git a/optimus/lib/optimus.dart b/optimus/lib/optimus.dart
@@ -73,7 +73,6 @@ export 'src/select.dart';
 export 'src/select_input.dart';
 export 'src/slidable/slidable.dart';
 export 'src/slidable/slide_action.dart';
-export 'src/spacing.dart';
 export 'src/stack.dart';
 export 'src/step_bar/step_bar.dart';
 export 'src/step_bar/step_bar_compact.dart';

diff --git a/optimus/lib/src/badge/base_badge.dart b/optimus/lib/src/badge/base_badge.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/widgets.dart';
-import 'package:optimus/src/spacing.dart';
 import 'package:optimus/src/theme/theme.dart';
 import 'package:optimus/src/typography/presets.dart';
 
@@ -29,7 +28,7 @@ class BaseBadge extends StatelessWidget {
     final textColor = this.textColor ?? tokens.textStaticInverse;
     final outlineColor = this.outlineColor ?? tokens.borderStaticInverse;
     final outlineSize = tokens.borderWidth200;
-    final bareHeight = text.isEmpty ? _emptySize : _badgeHeight;
+    final bareHeight = text.isEmpty ? tokens.spacing100 : _badgeHeight;
     final outlinedHeight = bareHeight + outlineSize * 2;
     final height = outline ? outlinedHeight : bareHeight;
 
@@ -63,14 +62,13 @@ class BaseBadge extends StatelessWidget {
       ),
       height: height,
       decoration: decoration,
-      padding: const EdgeInsets.symmetric(
-        horizontal: spacing50,
-        vertical: spacing25,
+      padding: EdgeInsets.symmetric(
+        horizontal: tokens.spacing50,
+        vertical: tokens.spacing25,
       ),
       child: child,
     );
   }
 }
 
-const _emptySize = spacing100;
 const _badgeHeight = 16.0;
diff --git a/optimus/lib/src/banner.dart b/optimus/lib/src/banner.dart
@@ -72,6 +72,7 @@ class OptimusBanner extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = OptimusTheme.of(context);
+    final tokens = context.tokens;
 
     return DecoratedBox(
       decoration: BoxDecoration(
@@ -81,13 +82,13 @@ class OptimusBanner extends StatelessWidget {
       child: Stack(
         children: [
           Padding(
-            padding: const EdgeInsets.all(spacing200),
+            padding: EdgeInsets.all(tokens.spacing200),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 if (hasIcon)
                   Padding(
-                    padding: const EdgeInsets.only(right: spacing200),
+                    padding: EdgeInsets.only(right: tokens.spacing200),
                     child: OptimusIcon(
                       iconData: variant.icon,
                       colorOption: variant.iconColor,
@@ -99,7 +100,7 @@ class OptimusBanner extends StatelessWidget {
                     children: [
                       Padding(
                         padding: isDismissible
-                            ? const EdgeInsets.only(right: spacing200)
+                            ? EdgeInsets.only(right: tokens.spacing200)
                             : EdgeInsets.zero,
                         child: DefaultTextStyle.merge(
                           child: title,
@@ -108,7 +109,7 @@ class OptimusBanner extends StatelessWidget {
                       ),
                       if (description case final description?)
                         Padding(
-                          padding: const EdgeInsets.only(top: spacing50),
+                          padding: EdgeInsets.only(top: tokens.spacing50),
                           child: DefaultTextStyle.merge(
                             child: description,
                             style: preset200r.copyWith(
@@ -124,8 +125,8 @@ class OptimusBanner extends StatelessWidget {
           ),
           if (isDismissible)
             Positioned(
-              top: spacing100,
-              right: spacing100,
+              top: tokens.spacing100,
+              right: tokens.spacing100,
               child: OptimusIconButton(
                 onPressed: onDismiss,
                 icon: const Icon(OptimusIcons.cross_close),

diff --git a/optimus/lib/src/button/base_button.dart b/optimus/lib/src/button/base_button.dart
@@ -183,7 +183,7 @@ class _ButtonContentState extends State<_ButtonContent> with ThemeGetter {
           if (leadingIcon != null)
             Icon(widget.leadingIcon, size: _iconSize, color: foregroundColor),
           Padding(
-            padding: const EdgeInsets.symmetric(horizontal: spacing100),
+            padding: EdgeInsets.symmetric(horizontal: tokens.spacing100),
             child: DefaultTextStyle.merge(
               style: _textStyle.copyWith(color: foregroundColor),
               child: widget.child,

diff --git a/optimus/lib/src/button/base_dropdown_button.dart b/optimus/lib/src/button/base_dropdown_button.dart
@@ -124,7 +124,7 @@ class _BaseDropDownButtonState<T> extends State<BaseDropDownButton<T>>
             child: SizedBox(
               height: widget.size.value,
               child: AnimatedContainer(
-                padding: const EdgeInsets.symmetric(horizontal: spacing200),
+                padding: EdgeInsets.symmetric(horizontal: tokens.spacing200),
                 key: _selectFieldKey,
                 decoration: BoxDecoration(
                   color: _color,

diff --git a/optimus/lib/src/card.dart b/optimus/lib/src/card.dart
@@ -226,15 +226,15 @@ class OptimusCardChildPadding extends StatelessWidget {
   final Widget child;
   final OptimusCardSpacing spacing;
 
-  @override
-  Widget build(BuildContext context) =>
-      Padding(padding: _padding, child: child);
-
-  EdgeInsets get _padding => switch (spacing) {
+  EdgeInsets _getPadding(OptimusTokens tokens) => switch (spacing) {
         OptimusCardSpacing.spacing0 => EdgeInsets.zero,
-        OptimusCardSpacing.spacing100 => const EdgeInsets.all(spacing100),
-        OptimusCardSpacing.spacing200 => const EdgeInsets.all(spacing200),
-        OptimusCardSpacing.spacing300 => const EdgeInsets.all(spacing300),
-        OptimusCardSpacing.spacing400 => const EdgeInsets.all(spacing400),
+        OptimusCardSpacing.spacing100 => EdgeInsets.all(tokens.spacing100),
+        OptimusCardSpacing.spacing200 => EdgeInsets.all(tokens.spacing200),
+        OptimusCardSpacing.spacing300 => EdgeInsets.all(tokens.spacing300),
+        OptimusCardSpacing.spacing400 => EdgeInsets.all(tokens.spacing400),
       };
+
+  @override
+  Widget build(BuildContext context) =>
+      Padding(padding: _getPadding(context.tokens), child: child);
 }
diff --git a/optimus/lib/src/chat/bubble.dart b/optimus/lib/src/chat/bubble.dart
@@ -28,28 +28,32 @@ class OptimusChatBubble extends StatelessWidget {
   final Widget error;
 
   @override
-  Widget build(BuildContext context) => Column(
-        crossAxisAlignment: message.alignment.crossAxisAlignment,
-        children: [
-          if (isDateVisible) ...[
-            const SizedBox(height: spacing200),
-            _Date(date: formatDate(message.time)),
-            const SizedBox(height: spacing200),
-          ],
-          const SizedBox(height: spacing100),
-          if (isUserNameVisible) ...[
-            Padding(
-              padding: message.alignment.horizontalPadding,
-              child: Text(message.author.username, style: preset100s),
-            ),
-            const SizedBox(height: spacing50),
-          ],
+  Widget build(BuildContext context) {
+    final tokens = context.tokens;
+
+    return Column(
+      crossAxisAlignment: message.alignment.crossAxisAlignment,
+      children: [
+        if (isDateVisible) ...[
+          SizedBox(height: tokens.spacing200),
+          _Date(date: formatDate(message.time)),
+          SizedBox(height: tokens.spacing200),
+        ],
+        SizedBox(height: tokens.spacing100),
+        if (isUserNameVisible) ...[
           Padding(
-            padding: message.alignment.horizontalPadding,
-            child: _Bubble(message: message),
+            padding: message.alignment.getHorizontalPadding(tokens),
+            child: Text(message.author.username, style: preset100s),
           ),
+          SizedBox(height: tokens.spacing50),
         ],
-      );
+        Padding(
+          padding: message.alignment.getHorizontalPadding(tokens),
+          child: _Bubble(message: message),
+        ),
+      ],
+    );
+  }
 }
 
 class _Date extends StatelessWidget {
@@ -97,18 +101,19 @@ class _Bubble extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = OptimusTheme.of(context);
+    final tokens = context.tokens;
 
     return Container(
       constraints: const BoxConstraints(maxWidth: 480),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(context.tokens.borderRadius100),
         color: _getBackgroundColor(theme),
       ),
-      padding: const EdgeInsets.only(
-        left: spacing100,
-        right: spacing100,
-        top: spacing50,
-        bottom: spacing100,
+      padding: EdgeInsets.only(
+        left: tokens.spacing100,
+        right: tokens.spacing100,
+        top: tokens.spacing50,
+        bottom: tokens.spacing100,
       ),
       child: Text(
         message.message,
@@ -119,11 +124,12 @@ class _Bubble extends StatelessWidget {
 }
 
 extension on MessageAlignment {
-  EdgeInsetsGeometry get horizontalPadding => switch (this) {
+  EdgeInsetsGeometry getHorizontalPadding(OptimusTokens tokens) =>
+      switch (this) {
         MessageAlignment.left =>
-          const EdgeInsets.only(left: spacing100, right: 0),
+          EdgeInsets.only(left: tokens.spacing100, right: tokens.spacing0),
         MessageAlignment.right =>
-          const EdgeInsets.only(left: 0, right: spacing100),
+          EdgeInsets.only(left: tokens.spacing0, right: tokens.spacing100),
       };
 
   CrossAxisAlignment get crossAxisAlignment => switch (this) {