diff --git a/optimus/lib/optimus.dart b/optimus/lib/optimus.dart index e598ef68..2f055e84 100644 --- 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 index b5fc6c24..077c7f4a 100644 --- 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 index 9ef47928..9f7a2d2c 100644 --- 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 index 7905843c..764e5b04 100644 --- 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 index 2b02bd50..545f9361 100644 --- a/optimus/lib/src/button/base_dropdown_button.dart +++ b/optimus/lib/src/button/base_dropdown_button.dart @@ -124,7 +124,7 @@ class _BaseDropDownButtonState extends State> 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 index 0bca9ea6..91707939 100644 --- 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 index 562d6ff0..f3823e87 100644 --- 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,6 +101,7 @@ 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), @@ -104,11 +109,11 @@ class _Bubble extends StatelessWidget { 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) { diff --git a/optimus/lib/src/chat/chat.dart b/optimus/lib/src/chat/chat.dart index a81fbb76..a131fb27 100644 --- a/optimus/lib/src/chat/chat.dart +++ b/optimus/lib/src/chat/chat.dart @@ -37,8 +37,6 @@ class OptimusChat extends StatelessWidget { final ValueChanged onSendPressed; final Predicate isFromCurrentUser; - double get _avatarWidth => hasAvatars ? spacing500 : 0; - bool _previousMessageIsFromSameUser(int index) => index - 1 >= 0 && _messages[index - 1].author.id == _messages[index].author.id; @@ -115,58 +113,63 @@ class OptimusChat extends StatelessWidget { m2.time.compareTo(m1.time); @override - Widget build(BuildContext context) => Padding( - padding: const EdgeInsets.only( - left: spacing200, - right: spacing200, - bottom: spacing200, - ), - child: OptimusStack( - spacing: OptimusStackSpacing.spacing200, - children: [ - Expanded( - child: ListView.builder( - itemCount: _messages.length, - reverse: true, - itemBuilder: (_, index) => Column( - children: [ - _Bubble( - hasAvatars: hasAvatars, - avatar: _Avatar( - avatarWidth: _avatarWidth, - isAvatarVisible: _showAvatar(index), - avatar: _messages[index].author.avatar, - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + final avatarWidth = hasAvatars ? tokens.spacing500 : tokens.spacing0; + + return Padding( + padding: EdgeInsets.only( + left: tokens.spacing200, + right: tokens.spacing200, + bottom: tokens.spacing200, + ), + child: OptimusStack( + spacing: OptimusStackSpacing.spacing200, + children: [ + Expanded( + child: ListView.builder( + itemCount: _messages.length, + reverse: true, + itemBuilder: (_, index) => Column( + children: [ + _Bubble( + hasAvatars: hasAvatars, + avatar: _Avatar( + avatarWidth: avatarWidth, + isAvatarVisible: _showAvatar(index), + avatar: _messages[index].author.avatar, + ), + message: _messages[index], + isUserNameVisible: _showUserName(index), + isDateVisible: _showDate(index), + formatTime: formatDate, + formatDate: formatTime, + sending: sending, + sent: sent, + error: error, + alignment: _messages[index].alignment, + ), + if (_showStatus(index)) + _StatusEnd( + avatarWidth: avatarWidth, + error: error, + formatTime: formatTime, message: _messages[index], - isUserNameVisible: _showUserName(index), - isDateVisible: _showDate(index), - formatTime: formatDate, - formatDate: formatTime, sending: sending, sent: sent, - error: error, + isFromCurrentUser: isFromCurrentUser(_messages[index]), + isLatestMessage: _latestMessage(index), alignment: _messages[index].alignment, ), - if (_showStatus(index)) - _StatusEnd( - avatarWidth: _avatarWidth, - error: error, - formatTime: formatTime, - message: _messages[index], - sending: sending, - sent: sent, - isFromCurrentUser: isFromCurrentUser(_messages[index]), - isLatestMessage: _latestMessage(index), - alignment: _messages[index].alignment, - ), - ], - ), + ], ), ), - OptimusChatInput(onSendPressed: onSendPressed), - ], - ), - ); + ), + OptimusChatInput(onSendPressed: onSendPressed), + ], + ), + ); + } } class _StatusEnd extends StatelessWidget { @@ -193,28 +196,35 @@ class _StatusEnd extends StatelessWidget { final MessageAlignment alignment; @override - Widget build(BuildContext context) => Column( - children: [ - const SizedBox(height: spacing50), - Row( - mainAxisAlignment: alignment.mainAxisAlignment, - children: [ - if (alignment.isStart) SizedBox(width: spacing100 + avatarWidth), - _StatusText( - message: message, - formatTime: formatTime, - sending: sending, - sent: sent, - error: error, - isFromCurrentUser: isFromCurrentUser, + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Column( + children: [ + SizedBox(height: tokens.spacing50), + Row( + mainAxisAlignment: alignment.mainAxisAlignment, + children: [ + if (alignment.isStart) + SizedBox(width: tokens.spacing100 + avatarWidth), + _StatusText( + message: message, + formatTime: formatTime, + sending: sending, + sent: sent, + error: error, + isFromCurrentUser: isFromCurrentUser, + ), + if (alignment.isEnd) + SizedBox( + height: isLatestMessage ? tokens.spacing0 : tokens.spacing100, ), - if (alignment.isEnd) - SizedBox(height: isLatestMessage ? 0 : spacing100), - ], - ), - SizedBox(height: isLatestMessage ? 0 : spacing100), - ], - ); + ], + ), + SizedBox(height: isLatestMessage ? tokens.spacing0 : tokens.spacing100), + ], + ); + } } class _Avatar extends StatelessWidget { diff --git a/optimus/lib/src/checkbox/checkbox.dart b/optimus/lib/src/checkbox/checkbox.dart index db4fe1a7..ab8fbccd 100644 --- a/optimus/lib/src/checkbox/checkbox.dart +++ b/optimus/lib/src/checkbox/checkbox.dart @@ -117,44 +117,48 @@ class OptimusCheckbox extends StatelessWidget { } @override - Widget build(BuildContext context) => IgnorePointer( - ignoring: !isEnabled, - child: GroupWrapper( - error: error, - isEnabled: isEnabled, - child: GestureDetector( - onTap: _handleTap, - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: const EdgeInsets.only(top: 9), - child: CheckboxTick( - isError: _isError, - isChecked: isChecked, - isEnabled: isEnabled, - onChanged: onChanged, - onTap: _handleTap, - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return IgnorePointer( + ignoring: !isEnabled, + child: GroupWrapper( + error: error, + isEnabled: isEnabled, + child: GestureDetector( + onTap: _handleTap, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: const EdgeInsets.only(top: 9), + child: CheckboxTick( + isError: _isError, + isChecked: isChecked, + isEnabled: isEnabled, + onChanged: onChanged, + onTap: _handleTap, ), - Expanded( - child: Padding( - padding: const EdgeInsets.fromLTRB( - spacing150, - spacing50, - spacing0, - spacing50, - ), - child: DefaultTextStyle.merge( - style: _labelStyle(OptimusTheme.of(context).tokens), - child: label, - ), + ), + Expanded( + child: Padding( + padding: EdgeInsets.fromLTRB( + tokens.spacing150, + tokens.spacing50, + tokens.spacing0, + tokens.spacing50, + ), + child: DefaultTextStyle.merge( + style: _labelStyle(OptimusTheme.of(context).tokens), + child: label, ), ), - ], - ), + ), + ], ), ), - ); + ), + ); + } } diff --git a/optimus/lib/src/checkbox/nested_checkbox.dart b/optimus/lib/src/checkbox/nested_checkbox.dart index 20f1f8ec..fc56bbfa 100644 --- a/optimus/lib/src/checkbox/nested_checkbox.dart +++ b/optimus/lib/src/checkbox/nested_checkbox.dart @@ -69,7 +69,7 @@ class OptimusNestedCheckboxGroup extends StatelessWidget { }, ), Padding( - padding: const EdgeInsets.only(left: spacing200), + padding: EdgeInsets.only(left: context.tokens.spacing200), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, diff --git a/optimus/lib/src/chip.dart b/optimus/lib/src/chip.dart index aff0b837..5cbd0e3f 100644 --- a/optimus/lib/src/chip.dart +++ b/optimus/lib/src/chip.dart @@ -78,13 +78,15 @@ class _OptimusChipState extends State with ThemeGetter { color: _backgroundColor, ), child: Padding( - padding: const EdgeInsets.symmetric(horizontal: spacing50), + padding: + EdgeInsets.symmetric(horizontal: context.tokens.spacing50), child: Row( mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: - const EdgeInsets.symmetric(horizontal: spacing50), + padding: EdgeInsets.symmetric( + horizontal: context.tokens.spacing50, + ), child: DefaultTextStyle.merge( style: preset200r.copyWith(color: _foregroundColor), child: widget.child, diff --git a/optimus/lib/src/common/anchored_overlay.dart b/optimus/lib/src/common/anchored_overlay.dart index e0e75db5..48e2f96a 100644 --- a/optimus/lib/src/common/anchored_overlay.dart +++ b/optimus/lib/src/common/anchored_overlay.dart @@ -74,14 +74,17 @@ class AnchoredOverlayState extends State double get _overlayWidth => _overlaySize?.width ?? 0; - double get _offsetBottom => _overlayHeight - _savedRect.top + _widgetPadding; + double get _offsetBottom => + _overlayHeight - _savedRect.top + context.tokens.spacing100; - double get _offsetTop => _savedRect.top + _savedRect.height + _widgetPadding; + double get _offsetTop => + _savedRect.top + _savedRect.height + context.tokens.spacing100; double get _paddingBottom => - MediaQuery.viewInsetsOf(context).bottom + _screenPadding; + MediaQuery.viewInsetsOf(context).bottom + context.tokens.spacing200; - double get _paddingTop => MediaQuery.paddingOf(context).top + _screenPadding; + double get _paddingTop => + MediaQuery.paddingOf(context).top + context.tokens.spacing200; double get _rightSpace => _overlayWidth - _savedRect.left; @@ -134,7 +137,7 @@ class AnchoredOverlayState extends State @override Widget build(BuildContext context) { - final widthWithPadding = _width + _widgetPadding; + final widthWithPadding = _width + context.tokens.spacing100; // If we have enough space to the right, dropdown's left side will be // aligned with anchor's left side. If there's not enough space to the @@ -168,6 +171,3 @@ class AnchoredOverlayState extends State ); } } - -const double _screenPadding = spacing200; -const double _widgetPadding = spacing100; diff --git a/optimus/lib/src/common/field_error.dart b/optimus/lib/src/common/field_error.dart index 9f425bbf..1e35a9e4 100644 --- a/optimus/lib/src/common/field_error.dart +++ b/optimus/lib/src/common/field_error.dart @@ -22,7 +22,7 @@ class OptimusFieldError extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.only(right: spacing150), + padding: EdgeInsets.only(right: context.tokens.spacing150), child: Icon(OptimusIcons.error_circle, size: 16, color: color), ), OptimusCaption(child: Text(error, style: TextStyle(color: color))), diff --git a/optimus/lib/src/common/field_wrapper.dart b/optimus/lib/src/common/field_wrapper.dart index ced77b81..8b917ccd 100644 --- a/optimus/lib/src/common/field_wrapper.dart +++ b/optimus/lib/src/common/field_wrapper.dart @@ -100,6 +100,7 @@ class _FieldWrapper extends State with ThemeGetter { @override Widget build(BuildContext context) { + final tokens = context.tokens; final label = widget.label; final helperMessage = widget.helperMessage; final caption = widget.caption; @@ -114,7 +115,7 @@ class _FieldWrapper extends State with ThemeGetter { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: widget.size.labelPadding, + padding: widget.size.getLabelPadding(tokens), child: Row( children: [ if (label != null) @@ -156,16 +157,16 @@ class _FieldWrapper extends State with ThemeGetter { onExit: (_) => _handleHoverChanged(false), child: AnimatedContainer( duration: const Duration(milliseconds: 200), - height: widget.size.height, + height: widget.size.getHeight(tokens), child: Padding( padding: EdgeInsets.symmetric( - horizontal: widget.size.contentPadding, + horizontal: widget.size.getContentPadding(tokens), ), child: Row( children: [ if (prefix != null) Padding( - padding: const EdgeInsets.only(right: spacing50), + padding: EdgeInsets.only(right: tokens.spacing50), child: _Styled( isEnabled: widget.isEnabled, child: prefix, @@ -174,7 +175,7 @@ class _FieldWrapper extends State with ThemeGetter { ...widget.children, if (suffix != null) Padding( - padding: const EdgeInsets.only(left: spacing50), + padding: EdgeInsets.only(left: tokens.spacing50), child: _Styled( isEnabled: widget.isEnabled, child: suffix, @@ -189,7 +190,7 @@ class _FieldWrapper extends State with ThemeGetter { ), if (helperMessage != null) Padding( - padding: widget.size.helperPadding, + padding: widget.size.getHelperPadding(tokens), child: OptimusCaption( child: DefaultTextStyle.merge( style: TextStyle(color: captionColor), @@ -199,7 +200,7 @@ class _FieldWrapper extends State with ThemeGetter { ), if (_isUsingBottomHint && _normalizedError.isNotEmpty) Padding( - padding: widget.size.errorPadding, + padding: widget.size.getErrorPadding(tokens), child: OptimusFieldError( error: _normalizedError, isEnabled: widget.isEnabled, @@ -233,7 +234,7 @@ class _InputCaption extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.symmetric(horizontal: spacing50), + padding: EdgeInsets.symmetric(horizontal: tokens.spacing50), child: OptimusCaption( variation: Variation.variationSecondary, child: DefaultTextStyle.merge( @@ -243,7 +244,7 @@ class _InputCaption extends StatelessWidget { ), ), if (captionIcon != null) - Icon(captionIcon, color: iconColor, size: _captionIconSize), + Icon(captionIcon, color: iconColor, size: tokens.sizing200), ], ); } @@ -266,7 +267,7 @@ class _Styled extends StatelessWidget { return DefaultTextStyle.merge( style: preset200r.copyWith(color: textColor), child: IconTheme( - data: IconThemeData(color: iconColor, size: _iconSize), + data: IconThemeData(color: iconColor, size: tokens.sizing200), child: child, ), ); @@ -274,32 +275,30 @@ class _Styled extends StatelessWidget { } extension on OptimusWidgetSize { - EdgeInsets get labelPadding => switch (this) { + EdgeInsets getLabelPadding(OptimusTokens tokens) => switch (this) { OptimusWidgetSize.small || OptimusWidgetSize.medium => - const EdgeInsets.only(bottom: spacing50), - OptimusWidgetSize.large => const EdgeInsets.only(bottom: spacing100), + EdgeInsets.only(bottom: tokens.spacing50), + OptimusWidgetSize.large => EdgeInsets.only(bottom: tokens.spacing100), }; - EdgeInsets get helperPadding => switch (this) { + EdgeInsets getHelperPadding(OptimusTokens tokens) => switch (this) { OptimusWidgetSize.small || OptimusWidgetSize.medium => - const EdgeInsets.only(top: spacing50), - OptimusWidgetSize.large => const EdgeInsets.only(top: spacing100), + EdgeInsets.only(top: tokens.spacing50), + OptimusWidgetSize.large => EdgeInsets.only(top: tokens.spacing100), }; - EdgeInsets get errorPadding => const EdgeInsets.only(top: spacing50); + EdgeInsets getErrorPadding(OptimusTokens tokens) => + EdgeInsets.only(top: tokens.spacing50); - double get contentPadding => switch (this) { - OptimusWidgetSize.small => spacing150, - OptimusWidgetSize.medium => spacing200, - OptimusWidgetSize.large => spacing250, + double getContentPadding(OptimusTokens tokens) => switch (this) { + OptimusWidgetSize.small => tokens.spacing150, + OptimusWidgetSize.medium => tokens.spacing200, + OptimusWidgetSize.large => tokens.spacing250, }; - double get height => switch (this) { - OptimusWidgetSize.small => spacing400, - OptimusWidgetSize.medium => spacing500, - OptimusWidgetSize.large => spacing600, + double getHeight(OptimusTokens tokens) => switch (this) { + OptimusWidgetSize.small => tokens.sizing400, + OptimusWidgetSize.medium => tokens.sizing500, + OptimusWidgetSize.large => tokens.sizing600, }; } - -const _captionIconSize = 16.0; -const _iconSize = 16.0; diff --git a/optimus/lib/src/dialogs/dialog.dart b/optimus/lib/src/dialogs/dialog.dart index 79f7b5f1..070c7144 100644 --- a/optimus/lib/src/dialogs/dialog.dart +++ b/optimus/lib/src/dialogs/dialog.dart @@ -189,6 +189,7 @@ class OptimusDialog extends StatelessWidget { @override Widget build(BuildContext context) { final size = _autoSize(context); + final tokens = context.tokens; return SafeArea( child: Align( @@ -200,7 +201,7 @@ class OptimusDialog extends StatelessWidget { type: type, size: size, maxWidth: size.width, - spacing: spacing300, + spacing: tokens.spacing300, margin: MediaQuery.viewInsetsOf(context), contentWrapperBuilder: contentWrapperBuilder, isDismissible: isDismissible, @@ -221,5 +222,5 @@ class OptimusDialogContentPadding extends StatelessWidget { @override Widget build(BuildContext context) => - Padding(padding: const EdgeInsets.all(spacing200), child: child); + Padding(padding: EdgeInsets.all(context.tokens.spacing200), child: child); } diff --git a/optimus/lib/src/dialogs/dialog_content.dart b/optimus/lib/src/dialogs/dialog_content.dart index 7f50b83a..fcabe2ae 100644 --- a/optimus/lib/src/dialogs/dialog_content.dart +++ b/optimus/lib/src/dialogs/dialog_content.dart @@ -131,28 +131,34 @@ class _Title extends StatelessWidget { final bool isDismissible; @override - Widget build(BuildContext context) => Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.all(spacing200), - child: OptimusSubsectionTitle(child: title), - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Padding( + padding: EdgeInsets.all(tokens.spacing200), + child: OptimusSubsectionTitle(child: title), ), - if (isDismissible) - Padding( - padding: - const EdgeInsets.only(top: spacing200, right: spacing200), - child: OptimusIconButton( - icon: const OptimusIcon(iconData: OptimusIcons.cross_close), - size: OptimusWidgetSize.small, - variant: OptimusButtonVariant.tertiary, - onPressed: close, - ), + ), + if (isDismissible) + Padding( + padding: EdgeInsets.only( + top: tokens.spacing200, + right: tokens.spacing200, ), - ], - ); + child: OptimusIconButton( + icon: const OptimusIcon(iconData: OptimusIcons.cross_close), + size: OptimusWidgetSize.small, + variant: OptimusButtonVariant.tertiary, + onPressed: close, + ), + ), + ], + ); + } } class _Actions extends StatelessWidget { @@ -182,12 +188,13 @@ class _Actions extends StatelessWidget { @override Widget build(BuildContext context) { + final tokens = context.tokens; final children = actions .mapIndexed( (i, e) => Padding( padding: EdgeInsets.only( - bottom: _isVertical ? spacing200 : 0, - left: _isVertical ? 0 : spacing200, + bottom: _isVertical ? tokens.spacing200 : tokens.spacing0, + left: _isVertical ? tokens.spacing0 : tokens.spacing200, ), child: OptimusButton( onPressed: e.onPressed ?? close, @@ -205,10 +212,10 @@ class _Actions extends StatelessWidget { return Padding( padding: EdgeInsets.only( - left: _isVertical ? spacing200 : 0, - right: spacing200, - top: spacing200, - bottom: _isVertical ? 0 : spacing200, + left: _isVertical ? tokens.spacing200 : tokens.spacing0, + right: tokens.spacing200, + top: tokens.spacing200, + bottom: _isVertical ? tokens.spacing0 : tokens.spacing200, ), child: Flex( mainAxisAlignment: MainAxisAlignment.end, diff --git a/optimus/lib/src/divider.dart b/optimus/lib/src/divider.dart index e7b3d4f1..e4a64daa 100644 --- a/optimus/lib/src/divider.dart +++ b/optimus/lib/src/divider.dart @@ -18,15 +18,16 @@ class OptimusDivider extends StatelessWidget { /// The direction of the divider. final Axis direction; - double get _verticalPadding => - direction == Axis.horizontal ? spacing100 : spacing150; + double _getVerticalPadding(OptimusTokens tokens) => + direction == Axis.horizontal ? tokens.spacing100 : tokens.spacing150; - double get _horizontalPadding => - direction == Axis.horizontal ? spacing200 : spacing150; + double _getHorizontalPadding(OptimusTokens tokens) => + direction == Axis.horizontal ? tokens.spacing200 : tokens.spacing150; @override Widget build(BuildContext context) { final theme = OptimusTheme.of(context); + final tokens = context.tokens; final child = this.child; final color = theme.tokens.borderStaticSecondary; @@ -45,8 +46,8 @@ class OptimusDivider extends StatelessWidget { if (child != null) ...[ Padding( padding: EdgeInsetsDirectional.symmetric( - horizontal: _horizontalPadding, - vertical: _verticalPadding, + horizontal: _getHorizontalPadding(tokens), + vertical: _getVerticalPadding(tokens), ), child: AnimatedContainer( duration: themeChangeAnimationDuration, diff --git a/optimus/lib/src/dropdown/base_dropdown_tile.dart b/optimus/lib/src/dropdown/base_dropdown_tile.dart index 0e17ba14..03aaed24 100644 --- a/optimus/lib/src/dropdown/base_dropdown_tile.dart +++ b/optimus/lib/src/dropdown/base_dropdown_tile.dart @@ -19,6 +19,7 @@ class BaseDropdownTile extends StatelessWidget { @override Widget build(BuildContext context) { + final tokens = context.tokens; final tile = Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, @@ -37,16 +38,16 @@ class BaseDropdownTile extends StatelessWidget { ); return Padding( - padding: const EdgeInsets.symmetric( - horizontal: spacing200, - vertical: spacing150, + padding: EdgeInsets.symmetric( + horizontal: tokens.spacing200, + vertical: tokens.spacing150, ), child: isSelected != null ? Row( mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.only(right: spacing100), + padding: EdgeInsets.only(right: tokens.spacing100), child: CheckboxTick( isEnabled: true, onChanged: (_) {}, diff --git a/optimus/lib/src/dropdown/dropdown.dart b/optimus/lib/src/dropdown/dropdown.dart index 48884639..fbf96eab 100644 --- a/optimus/lib/src/dropdown/dropdown.dart +++ b/optimus/lib/src/dropdown/dropdown.dart @@ -166,20 +166,22 @@ class _DropdownListView extends StatelessWidget { final bool isReversed; final double maxHeight; - double get _minHeight => - items.length * _itemMinHeight + _listVerticalSpacing * 2; - @override - Widget build(BuildContext context) => SizedBox( - height: min(_minHeight, maxHeight), - child: ListView.builder( - reverse: isReversed, - padding: const EdgeInsets.symmetric(vertical: _listVerticalSpacing), - itemCount: items.length, - itemBuilder: (context, index) => - _DropdownItem(onChanged: onChanged, child: items[index]), - ), - ); + Widget build(BuildContext context) { + final tokens = context.tokens; + final minHeight = items.length * _itemMinHeight + tokens.spacing100 * 2; + + return SizedBox( + height: min(minHeight, maxHeight), + child: ListView.builder( + reverse: isReversed, + padding: EdgeInsets.symmetric(vertical: tokens.spacing100), + itemCount: items.length, + itemBuilder: (context, index) => + _DropdownItem(onChanged: onChanged, child: items[index]), + ), + ); + } } class _GroupedDropdownListView extends StatefulWidget { @@ -254,11 +256,6 @@ class _GroupedDropdownListViewState int get _leadingIndex => widget.isReversed ? _sortedItems.length - 1 : 0; - double get _minListHeight => - _groupsCount * _groupMinHeight + - widget.items.length * _itemMinHeight + - _listVerticalSpacing * 2; - bool _isSameGroup( OptimusDropdownTile first, OptimusDropdownTile second, @@ -266,37 +263,43 @@ class _GroupedDropdownListViewState widget.groupBy(second.value) == widget.groupBy(first.value); @override - Widget build(BuildContext context) => SizedBox( - height: min(_minListHeight, widget.maxHeight), - child: ListView.builder( - reverse: widget.isReversed, - padding: const EdgeInsets.symmetric(vertical: _listVerticalSpacing), - itemCount: widget.items.length, - itemBuilder: (context, index) { - final current = _sortedItems[index]; - final child = - _DropdownItem(onChanged: widget.onChanged, child: current); - - if (index == _leadingIndex) { - return _GroupWrapper( - useBorder: false, - group: _effectiveGroupBuilder(widget.groupBy(current.value)), - child: child, - ); - } - - final previous = _sortedItems[index + (widget.isReversed ? 1 : -1)]; - - return _isSameGroup(current, previous) - ? child - : _GroupWrapper( - group: - _effectiveGroupBuilder(widget.groupBy(current.value)), - child: child, - ); - }, - ), - ); + Widget build(BuildContext context) { + final tokens = context.tokens; + final minListHeight = _groupsCount * _groupMinHeight + + widget.items.length * _itemMinHeight + + tokens.spacing100 * 2; + + return SizedBox( + height: min(minListHeight, widget.maxHeight), + child: ListView.builder( + reverse: widget.isReversed, + padding: EdgeInsets.symmetric(vertical: context.tokens.spacing100), + itemCount: widget.items.length, + itemBuilder: (context, index) { + final current = _sortedItems[index]; + final child = + _DropdownItem(onChanged: widget.onChanged, child: current); + + if (index == _leadingIndex) { + return _GroupWrapper( + useBorder: false, + group: _effectiveGroupBuilder(widget.groupBy(current.value)), + child: child, + ); + } + + final previous = _sortedItems[index + (widget.isReversed ? 1 : -1)]; + + return _isSameGroup(current, previous) + ? child + : _GroupWrapper( + group: _effectiveGroupBuilder(widget.groupBy(current.value)), + child: child, + ); + }, + ), + ); + } } class _GroupWrapper extends StatelessWidget { @@ -417,4 +420,3 @@ class _SearchWrapperState extends State<_SearchWrapper> with ThemeGetter { const _embeddedSearchHeight = 61.0; const _groupMinHeight = 28.0; const _itemMinHeight = 69.0; -const _listVerticalSpacing = spacing100; diff --git a/optimus/lib/src/dropdown/dropdown_group_separator.dart b/optimus/lib/src/dropdown/dropdown_group_separator.dart index 7fc1fc7d..3728cffb 100644 --- a/optimus/lib/src/dropdown/dropdown_group_separator.dart +++ b/optimus/lib/src/dropdown/dropdown_group_separator.dart @@ -8,16 +8,20 @@ class OptimusDropdownGroupSeparator extends StatelessWidget { final Widget child; @override - Widget build(BuildContext context) => Padding( - padding: const EdgeInsets.symmetric( - vertical: spacing25, - horizontal: spacing200, - ), - child: DefaultTextStyle.merge( - style: preset300r.copyWith( - color: OptimusTheme.of(context).colors.neutral50, - ), - child: child, + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Padding( + padding: EdgeInsets.symmetric( + vertical: tokens.spacing25, + horizontal: tokens.spacing200, + ), + child: DefaultTextStyle.merge( + style: preset300r.copyWith( + color: OptimusTheme.of(context).colors.neutral50, ), - ); + child: child, + ), + ); + } } diff --git a/optimus/lib/src/form/multiselect_field.dart b/optimus/lib/src/form/multiselect_field.dart index 16caa83b..1b591447 100644 --- a/optimus/lib/src/form/multiselect_field.dart +++ b/optimus/lib/src/form/multiselect_field.dart @@ -83,6 +83,7 @@ class _OptimusMultiSelectInputFieldState extends State @override Widget build(BuildContext context) { + final tokens = context.tokens; final error = widget.error; final inlineError = _isUsingInlineError && error != null && error.isNotEmpty ? InlineErrorTooltip(error: error) @@ -125,7 +126,7 @@ class _OptimusMultiSelectInputFieldState extends State Flexible( fit: FlexFit.loose, child: Padding( - padding: const EdgeInsets.symmetric(vertical: spacing25), + padding: EdgeInsets.symmetric(vertical: tokens.spacing25), child: Focus( focusNode: _effectiveFocusNode, child: Container( @@ -135,8 +136,8 @@ class _OptimusMultiSelectInputFieldState extends State child: Wrap( crossAxisAlignment: WrapCrossAlignment.center, runAlignment: WrapAlignment.center, - spacing: spacing50, - runSpacing: spacing50, + spacing: tokens.spacing50, + runSpacing: tokens.spacing50, clipBehavior: Clip.antiAlias, children: widget.values, ), diff --git a/optimus/lib/src/link/base_link.dart b/optimus/lib/src/link/base_link.dart index 77611282..7644d360 100644 --- a/optimus/lib/src/link/base_link.dart +++ b/optimus/lib/src/link/base_link.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:optimus/src/common/gesture_wrapper.dart'; import 'package:optimus/src/enabled.dart'; import 'package:optimus/src/link/link_variant.dart'; -import 'package:optimus/src/spacing.dart'; import 'package:optimus/src/theme/optimus_tokens.dart'; import 'package:optimus/src/theme/theme.dart'; @@ -79,7 +78,7 @@ class _BaseLinkState extends State with ThemeGetter { children: [ text, Padding( - padding: const EdgeInsets.only(left: spacing100), + padding: EdgeInsets.only(left: tokens.spacing100), child: IconTheme( data: IconThemeData(color: _effectiveColor), child: icon, diff --git a/optimus/lib/src/lists/base_list_tile.dart b/optimus/lib/src/lists/base_list_tile.dart index 6c57bf5a..48346a98 100644 --- a/optimus/lib/src/lists/base_list_tile.dart +++ b/optimus/lib/src/lists/base_list_tile.dart @@ -18,7 +18,7 @@ class BaseListTile extends StatelessWidget { return Container( decoration: BoxDecoration(border: Border(bottom: borderSide(theme))), - constraints: const BoxConstraints(minHeight: spacing700), + constraints: BoxConstraints(minHeight: context.tokens.spacing700), child: InkWell( highlightColor: theme.isDark ? theme.colors.neutral300 : theme.colors.neutral50, diff --git a/optimus/lib/src/lists/list_tile.dart b/optimus/lib/src/lists/list_tile.dart index 06f8a8ab..048f6c14 100644 --- a/optimus/lib/src/lists/list_tile.dart +++ b/optimus/lib/src/lists/list_tile.dart @@ -66,12 +66,15 @@ class OptimusListTile extends StatelessWidget { /// will be used. final EdgeInsets? contentPadding; - EdgeInsets get _contentPadding => + EdgeInsets _getContentPadding(OptimusTokens tokens) => contentPadding ?? - const EdgeInsets.symmetric(vertical: spacing300, horizontal: spacing200); + EdgeInsets.symmetric( + vertical: tokens.spacing300, + horizontal: tokens.spacing200, + ); - Widget _buildPrefix(Widget prefix) => Padding( - padding: const EdgeInsets.only(right: spacing100), + Widget _buildPrefix(OptimusTokens tokens, Widget prefix) => Padding( + padding: EdgeInsets.only(right: tokens.spacing100), child: OptimusTypography( color: OptimusTypographyColor.secondary, resolveStyle: (_) => preset200s, @@ -85,8 +88,8 @@ class OptimusListTile extends StatelessWidget { child: info, ); - Widget get _title => Padding( - padding: const EdgeInsets.only(right: spacing100), + Widget _getTitle(OptimusTokens tokens) => Padding( + padding: EdgeInsets.only(right: tokens.spacing100), child: OptimusTypography( resolveStyle: (_) => fontVariant.primaryStyle, child: title, @@ -112,6 +115,7 @@ class OptimusListTile extends StatelessWidget { @override Widget build(BuildContext context) { + final tokens = context.tokens; final prefix = this.prefix; final info = this.info; final suffix = this.suffix; @@ -120,17 +124,17 @@ class OptimusListTile extends StatelessWidget { return BaseListTile( onTap: onTap, content: Padding( - padding: _contentPadding, + padding: _getContentPadding(tokens), child: Row( children: [ - if (prefix != null) _buildPrefix(prefix), + if (prefix != null) _buildPrefix(tokens, prefix), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ - Expanded(child: _title), + Expanded(child: _getTitle(tokens)), if (info != null) _buildInfo(info), ], ), diff --git a/optimus/lib/src/lists/nav_list_tile.dart b/optimus/lib/src/lists/nav_list_tile.dart index a7177786..7ad16910 100644 --- a/optimus/lib/src/lists/nav_list_tile.dart +++ b/optimus/lib/src/lists/nav_list_tile.dart @@ -76,17 +76,17 @@ class OptimusNavListTile extends StatelessWidget { /// the need to scroll is important for the user's task completion. final TileSize tileSize; - Widget _buildLeadingIcon(Widget icon) => Padding( - padding: const EdgeInsets.only(right: spacing200), + Widget _buildLeadingIcon(OptimusTokens tokens, Widget icon) => Padding( + padding: EdgeInsets.only(right: tokens.spacing200), child: IconTheme.merge( - data: const IconThemeData(size: spacing300), + data: IconThemeData(size: tokens.sizing300), child: icon, ), ); - Widget _buildLeadingAvatar(Widget avatar) => Padding( - padding: const EdgeInsets.only(right: spacing200), - child: SizedBox(width: spacing500, child: avatar), + Widget _buildLeadingAvatar(OptimusTokens tokens, Widget avatar) => Padding( + padding: EdgeInsets.only(right: tokens.spacing200), + child: SizedBox(width: tokens.sizing500, child: avatar), ); Widget _buildMetadata(Widget metadata) => OptimusTypography( @@ -95,13 +95,13 @@ class OptimusNavListTile extends StatelessWidget { child: metadata, ); - double get _contentSpacing => switch (tileSize) { - TileSize.normal => spacing200, - TileSize.small => spacing100, + double _getContentSpacing(OptimusTokens tokens) => switch (tileSize) { + TileSize.normal => tokens.spacing200, + TileSize.small => tokens.spacing100, }; - Widget get _headline => Padding( - padding: const EdgeInsets.only(right: spacing100), + Widget _getHeadline(OptimusTokens tokens) => Padding( + padding: EdgeInsets.only(right: tokens.spacing100), child: OptimusTypography( resolveStyle: (_) => fontVariant.primaryStyle, child: DefaultTextStyle.merge( @@ -112,12 +112,12 @@ class OptimusNavListTile extends StatelessWidget { ), ); - Widget get _description { + Widget _getDescription(OptimusTokens tokens) { final description = this.description; return description != null ? Padding( - padding: const EdgeInsets.only(right: spacing100), + padding: EdgeInsets.only(right: tokens.spacing100), child: OptimusTypography( resolveStyle: (_) => preset200s, color: fontVariant.secondaryColor, @@ -131,16 +131,17 @@ class OptimusNavListTile extends StatelessWidget { : const SizedBox.shrink(); } - Widget _buildTrailingIcon(Widget suffix) => Padding( - padding: const EdgeInsets.only(left: spacing200), + Widget _buildTrailingIcon(OptimusTokens tokens, Widget suffix) => Padding( + padding: EdgeInsets.only(left: tokens.spacing200), child: IconTheme.merge( - data: const IconThemeData(size: spacing300), + data: IconThemeData(size: tokens.sizing300), child: suffix, ), ); @override Widget build(BuildContext context) { + final tokens = context.tokens; final metadata = this.metadata; final trailingIcon = this.trailingIcon; final leadingIcon = this.leadingIcon; @@ -150,25 +151,26 @@ class OptimusNavListTile extends StatelessWidget { onTap: onTap, content: Padding( padding: EdgeInsets.symmetric( - vertical: _contentSpacing, - horizontal: spacing200, + vertical: _getContentSpacing(tokens), + horizontal: tokens.spacing200, ), child: Row( children: [ - if (leadingAvatar != null) _buildLeadingAvatar(leadingAvatar), + if (leadingAvatar != null) + _buildLeadingAvatar(tokens, leadingAvatar), if (leadingAvatar == null && leadingIcon != null) - _buildLeadingIcon(leadingIcon), + _buildLeadingIcon(tokens, leadingIcon), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - _headline, - _description, + _getHeadline(tokens), + _getDescription(tokens), ], ), ), if (metadata != null) _buildMetadata(metadata), - if (trailingIcon != null) _buildTrailingIcon(trailingIcon), + if (trailingIcon != null) _buildTrailingIcon(tokens, trailingIcon), ], ), ), diff --git a/optimus/lib/src/notification/notification.dart b/optimus/lib/src/notification/notification.dart index 5df875dd..a1edffb3 100644 --- a/optimus/lib/src/notification/notification.dart +++ b/optimus/lib/src/notification/notification.dart @@ -44,11 +44,11 @@ class OptimusNotification extends StatelessWidget { double _getPadding(BuildContext context) => switch (MediaQuery.sizeOf(context).screenBreakpoint) { - Breakpoint.small || Breakpoint.extraSmall => spacing100, + Breakpoint.small || Breakpoint.extraSmall => context.tokens.spacing100, Breakpoint.medium || Breakpoint.large || Breakpoint.extraLarge => - spacing200, + context.tokens.spacing200, }; @override @@ -196,14 +196,14 @@ class _NotificationContent extends StatelessWidget { final VoidCallback? onLinkPressed; final bool dismissible; - EdgeInsets get _contentPadding => dismissible - ? const EdgeInsets.fromLTRB( - spacing200, - spacing200, - spacing400, - spacing200, + EdgeInsets _getContentPadding(OptimusTokens tokens) => dismissible + ? EdgeInsets.fromLTRB( + tokens.spacing200, + tokens.spacing200, + tokens.spacing400, + tokens.spacing200, ) - : const EdgeInsets.all(spacing200); + : EdgeInsets.all(tokens.spacing200); @override Widget build(BuildContext context) { @@ -220,9 +220,9 @@ class _NotificationContent extends StatelessWidget { child: Stack( children: [ Positioned( - left: 0, - bottom: 0, - top: 0, + left: tokens.spacing0, + bottom: tokens.spacing0, + top: tokens.spacing0, width: _leadingSectionWidth, child: DecoratedBox( decoration: BoxDecoration( @@ -239,7 +239,7 @@ class _NotificationContent extends StatelessWidget { const SizedBox(width: _leadingSectionWidth), Expanded( child: Container( - padding: _contentPadding, + padding: _getContentPadding(tokens), decoration: BoxDecoration( color: theme.colors.neutral0, borderRadius: BorderRadius.horizontal( @@ -253,12 +253,12 @@ class _NotificationContent extends StatelessWidget { _NotificationTitle(title), if (body != null) Padding( - padding: const EdgeInsets.only(top: spacing50), + padding: EdgeInsets.only(top: tokens.spacing50), child: _NotificationBody(body), ), if (link != null) Padding( - padding: const EdgeInsets.only(top: spacing50), + padding: EdgeInsets.only(top: tokens.spacing50), child: GestureDetector( onTap: onLinkPressed, child: _NotificationLink(link), @@ -312,14 +312,15 @@ class _NotificationCloseButton extends StatelessWidget { @override Widget build(BuildContext context) { final theme = OptimusTheme.of(context); + final tokens = context.tokens; return Positioned( - top: spacing100, - right: spacing100, + top: tokens.spacing100, + right: tokens.spacing100, child: GestureDetector( onTap: onDismissed, child: Padding( - padding: const EdgeInsets.all(spacing100), + padding: EdgeInsets.all(tokens.spacing100), child: Icon( OptimusIcons.cross_close, color: theme.colors.neutral500, diff --git a/optimus/lib/src/notification/notification_overlay.dart b/optimus/lib/src/notification/notification_overlay.dart index 32dee7c1..56319ae3 100644 --- a/optimus/lib/src/notification/notification_overlay.dart +++ b/optimus/lib/src/notification/notification_overlay.dart @@ -103,6 +103,7 @@ class _OptimusNotificationsOverlayState @override Widget build(BuildContext context) { + final tokens = context.tokens; final isCompact = MediaQuery.sizeOf(context).screenBreakpoint.index <= Breakpoint.medium.index; @@ -113,10 +114,12 @@ class _OptimusNotificationsOverlayState children: [ widget.child, Positioned( - left: widget.position.left(isCompact: isCompact), - top: widget.position.top(isCompact: isCompact), - right: widget.position.right(isCompact: isCompact), - bottom: widget.position.bottom(isCompact: isCompact), + left: widget.position.left(tokens: tokens, isCompact: isCompact), + top: widget.position.top(tokens: tokens, isCompact: isCompact), + right: + widget.position.right(tokens: tokens, isCompact: isCompact), + bottom: + widget.position.bottom(tokens: tokens, isCompact: isCompact), child: SafeArea( child: ConstrainedBox( constraints: const BoxConstraints(maxWidth: _maxWidth), @@ -220,40 +223,44 @@ class _NoClipSizeTransition extends AnimatedWidget { enum OptimusNotificationPosition { topLeft, topRight, bottomRight, bottomLeft } extension on OptimusNotificationPosition { - double? left({required bool isCompact}) => switch (this) { + double? left({required OptimusTokens tokens, required bool isCompact}) => + switch (this) { OptimusNotificationPosition.bottomLeft || OptimusNotificationPosition.topLeft => - isCompact ? spacing100 : spacing200, + isCompact ? tokens.spacing100 : tokens.spacing200, OptimusNotificationPosition.topRight || OptimusNotificationPosition.bottomRight => - isCompact ? spacing100 : null, + isCompact ? tokens.spacing100 : null, }; - double? top({required bool isCompact}) => switch (this) { + double? top({required OptimusTokens tokens, required bool isCompact}) => + switch (this) { OptimusNotificationPosition.topLeft || OptimusNotificationPosition.topRight => - isCompact ? spacing100 : spacing200, + isCompact ? tokens.spacing100 : tokens.spacing200, OptimusNotificationPosition.bottomRight || OptimusNotificationPosition.bottomLeft => null, }; - double? right({required bool isCompact}) => switch (this) { + double? right({required OptimusTokens tokens, required bool isCompact}) => + switch (this) { OptimusNotificationPosition.bottomRight || OptimusNotificationPosition.topRight => - isCompact ? spacing100 : spacing200, + isCompact ? tokens.spacing100 : tokens.spacing200, OptimusNotificationPosition.topLeft || OptimusNotificationPosition.bottomLeft => - isCompact ? spacing100 : null, + isCompact ? tokens.spacing100 : null, }; - double? bottom({required bool isCompact}) => switch (this) { + double? bottom({required OptimusTokens tokens, required bool isCompact}) => + switch (this) { OptimusNotificationPosition.topLeft || OptimusNotificationPosition.topRight => null, OptimusNotificationPosition.bottomRight || OptimusNotificationPosition.bottomLeft => - isCompact ? spacing100 : spacing200, + isCompact ? tokens.spacing100 : tokens.spacing200, }; Tween get slideTween => switch (this) { diff --git a/optimus/lib/src/radio/radio.dart b/optimus/lib/src/radio/radio.dart index 8d1ce5c5..8276a768 100644 --- a/optimus/lib/src/radio/radio.dart +++ b/optimus/lib/src/radio/radio.dart @@ -151,8 +151,8 @@ class _OptimusRadioState extends State> with ThemeGetter { const SizedBox(width: _leadingSize), Expanded( child: Padding( - padding: const EdgeInsets.symmetric( - vertical: spacing25, + padding: EdgeInsets.symmetric( + vertical: context.tokens.spacing25, ), child: DefaultTextStyle.merge( style: _labelStyle, @@ -180,27 +180,30 @@ class _RadioCircle extends StatelessWidget { final bool isSelected; @override - Widget build(BuildContext context) => Padding( - padding: const EdgeInsets.only( - top: spacing100, - bottom: spacing100, - right: spacing200, - ), - child: AnimatedContainer( - duration: const Duration(milliseconds: 100), - width: 16, - height: 16, - decoration: BoxDecoration( - shape: BoxShape.circle, - border: Border.all( - width: - isSelected ? _selectedBorder : context.tokens.borderWidth150, - color: state.borderColor(context, isSelected: isSelected), - ), - color: state.circleFillColor(context), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Padding( + padding: EdgeInsets.only( + top: tokens.spacing100, + bottom: tokens.spacing100, + right: tokens.spacing200, + ), + child: AnimatedContainer( + duration: const Duration(milliseconds: 100), + width: 16, + height: 16, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + width: isSelected ? _selectedBorder : context.tokens.borderWidth150, + color: state.borderColor(context, isSelected: isSelected), ), + color: state.circleFillColor(context), ), - ); + ), + ); + } } enum _RadioState { basic, hover, active, disabled } diff --git a/optimus/lib/src/segmented_control/segmented_control.dart b/optimus/lib/src/segmented_control/segmented_control.dart index 07c6ed0e..e066863e 100644 --- a/optimus/lib/src/segmented_control/segmented_control.dart +++ b/optimus/lib/src/segmented_control/segmented_control.dart @@ -171,7 +171,7 @@ class _OptimusSegmentedControlItemState @override Widget build(BuildContext context) { - final tokens = OptimusTheme.of(context).tokens; + final tokens = context.tokens; return LayoutBuilder( builder: (context, constrains) => GestureWrapper( @@ -179,12 +179,12 @@ class _OptimusSegmentedControlItemState onHoverChanged: _handleHoverChanged, onPressedChanged: _handlePressedChanged, child: Padding( - padding: const EdgeInsets.all(spacing25), + padding: EdgeInsets.all(tokens.spacing25), child: AnimatedContainer( duration: const Duration(milliseconds: 100), curve: Curves.easeOut, constraints: BoxConstraints(minHeight: widget.size.value), - padding: const EdgeInsets.symmetric(vertical: spacing50), + padding: EdgeInsets.symmetric(vertical: tokens.spacing50), decoration: BoxDecoration( color: _color(tokens), borderRadius: @@ -198,7 +198,7 @@ class _OptimusSegmentedControlItemState style: preset200s.copyWith(color: _foregroundColor(tokens)), child: Padding( padding: EdgeInsets.symmetric( - horizontal: constrains.adaptivePadding, + horizontal: constrains.getAdaptivePadding(tokens), ), child: widget.child, ), @@ -211,5 +211,6 @@ class _OptimusSegmentedControlItemState } extension on BoxConstraints { - double get adaptivePadding => maxWidth < 300 ? spacing100 : spacing200; + double getAdaptivePadding(OptimusTokens tokens) => + maxWidth < 300 ? tokens.spacing100 : tokens.spacing200; } diff --git a/optimus/lib/src/select.dart b/optimus/lib/src/select.dart index 65f79607..32f17a93 100644 --- a/optimus/lib/src/select.dart +++ b/optimus/lib/src/select.dart @@ -140,13 +140,18 @@ class _SelectedValue extends StatelessWidget { final TextStyle textStyle; @override - Widget build(BuildContext context) => Expanded( - child: Padding( - padding: const EdgeInsets.only(left: spacing200, right: spacing100), - child: SizedBox( - height: size.value, - child: DefaultTextStyle(style: textStyle, child: child), - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Expanded( + child: Padding( + padding: + EdgeInsets.only(left: tokens.spacing200, right: tokens.spacing100), + child: SizedBox( + height: size.value, + child: DefaultTextStyle(style: textStyle, child: child), ), - ); + ), + ); + } } diff --git a/optimus/lib/src/spacing.dart b/optimus/lib/src/spacing.dart deleted file mode 100644 index dae7ec09..00000000 --- a/optimus/lib/src/spacing.dart +++ /dev/null @@ -1,14 +0,0 @@ -const double spacing0 = 0; -const double spacing25 = 2; -const double spacing50 = 4; -const double spacing100 = 8; -const double spacing150 = 12; -const double spacing200 = 16; -const double spacing250 = 20; -const double spacing300 = 24; -const double spacing400 = 32; -const double spacing500 = 40; -const double spacing600 = 48; -const double spacing700 = 56; -const double spacing900 = 72; -const double spacing1200 = 96; diff --git a/optimus/lib/src/stack.dart b/optimus/lib/src/stack.dart index cf9123b0..bbdd3345 100644 --- a/optimus/lib/src/stack.dart +++ b/optimus/lib/src/stack.dart @@ -1,8 +1,7 @@ import 'package:dfunc/dfunc.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -import 'package:optimus/src/breakpoint.dart'; -import 'package:optimus/src/spacing.dart'; +import 'package:optimus/optimus.dart'; enum OptimusStackAlignment { /// Default value. All items in a stack are aligned to the start of the @@ -113,8 +112,10 @@ class OptimusStack extends StatelessWidget { ) { final direction = _direction(context); final spacer = SizedBox( - width: direction == Axis.vertical ? null : spacing.size, - height: direction == Axis.vertical ? spacing.size : null, + width: + direction == Axis.vertical ? null : spacing.getSize(context.tokens), + height: + direction == Axis.vertical ? spacing.getSize(context.tokens) : null, ); return children.intersperse(spacer).toList(); @@ -131,15 +132,15 @@ class OptimusStack extends StatelessWidget { } extension on OptimusStackSpacing { - double get size => switch (this) { - OptimusStackSpacing.spacing0 => spacing0, - OptimusStackSpacing.spacing25 => spacing25, - OptimusStackSpacing.spacing50 => spacing50, - OptimusStackSpacing.spacing100 => spacing100, - OptimusStackSpacing.spacing200 => spacing200, - OptimusStackSpacing.spacing300 => spacing300, - OptimusStackSpacing.spacing400 => spacing400, - OptimusStackSpacing.spacing500 => spacing500, + double getSize(OptimusTokens tokens) => switch (this) { + OptimusStackSpacing.spacing0 => tokens.spacing0, + OptimusStackSpacing.spacing25 => tokens.spacing25, + OptimusStackSpacing.spacing50 => tokens.spacing50, + OptimusStackSpacing.spacing100 => tokens.spacing100, + OptimusStackSpacing.spacing200 => tokens.spacing200, + OptimusStackSpacing.spacing300 => tokens.spacing300, + OptimusStackSpacing.spacing400 => tokens.spacing400, + OptimusStackSpacing.spacing500 => tokens.spacing500, }; } diff --git a/optimus/lib/src/step_bar/step_bar_compact.dart b/optimus/lib/src/step_bar/step_bar_compact.dart index 8baa39c6..73052c17 100644 --- a/optimus/lib/src/step_bar/step_bar_compact.dart +++ b/optimus/lib/src/step_bar/step_bar_compact.dart @@ -174,13 +174,14 @@ class _CompactStepBarItem extends StatelessWidget { @override Widget build(BuildContext context) { + final tokens = context.tokens; final data = _StepBarData.of(context); return data != null ? Padding( - padding: const EdgeInsets.symmetric( - horizontal: spacing100, - vertical: spacing100, + padding: EdgeInsets.symmetric( + horizontal: tokens.spacing100, + vertical: tokens.spacing100, ), child: StepBarItem( item: data.items[data.currentItem], @@ -207,25 +208,29 @@ class _CompactStepBarIndicator extends StatelessWidget { maxSteps == null ? '$currentStep' : '$currentStep/$maxSteps'; @override - Widget build(BuildContext context) => SizedBox( - width: 90, - child: Padding( - padding: const EdgeInsets.only(right: spacing200), - child: Row( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - OptimusTypography( - resolveStyle: (_) => - preset200s.copyWith(overflow: TextOverflow.ellipsis), - maxLines: 1, - child: Text(text), - ), - const SizedBox(width: spacing50), - const OptimusIcon(iconData: OptimusIcons.chevron_up), - ], - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return SizedBox( + width: 90, + child: Padding( + padding: EdgeInsets.only(right: tokens.spacing200), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + OptimusTypography( + resolveStyle: (_) => + preset200s.copyWith(overflow: TextOverflow.ellipsis), + maxLines: 1, + child: Text(text), + ), + SizedBox(width: tokens.spacing50), + const OptimusIcon(iconData: OptimusIcons.chevron_up), + ], ), - ); + ), + ); + } } class _ExpandedCompactStepBar extends StatefulWidget { @@ -414,6 +419,7 @@ class _AnimatedStepBarState extends State<_AnimatedStepBar> { @override Widget build(BuildContext context) { + final tokens = context.tokens; final data = _StepBarData.of(context); return data != null @@ -429,8 +435,8 @@ class _AnimatedStepBarState extends State<_AnimatedStepBar> { BorderRadius.circular(context.tokens.borderRadius50), ), child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: spacing100, + padding: EdgeInsets.symmetric( + horizontal: tokens.spacing100, vertical: _verticalSpacing, ), child: Stack( @@ -443,8 +449,8 @@ class _AnimatedStepBarState extends State<_AnimatedStepBar> { maxItem: data.maxItem, ), Positioned( - top: spacing100, - right: spacing100, + top: tokens.spacing100, + right: tokens.spacing100, child: RotationTransition( turns: _iconTurns, child: const OptimusIcon( diff --git a/optimus/lib/src/step_bar/step_bar_item.dart b/optimus/lib/src/step_bar/step_bar_item.dart index bef79fec..63dfa2b5 100644 --- a/optimus/lib/src/step_bar/step_bar_item.dart +++ b/optimus/lib/src/step_bar/step_bar_item.dart @@ -63,6 +63,7 @@ class StepBarItem extends StatelessWidget { @override Widget build(BuildContext context) { final theme = OptimusTheme.of(context); + final tokens = context.tokens; final description = item.description; return ConstrainedBox( @@ -72,9 +73,9 @@ class StepBarItem extends StatelessWidget { child: Row( mainAxisSize: MainAxisSize.min, children: [ - const SizedBox(width: _itemLeftPadding), + SizedBox(width: tokens.spacing100), _icon, - const SizedBox(width: spacing100), + SizedBox(width: tokens.spacing100), Flexible( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -100,7 +101,7 @@ class StepBarItem extends StatelessWidget { ], ), ), - const SizedBox(width: spacing200), + SizedBox(width: tokens.spacing200), ], ), ), @@ -133,8 +134,8 @@ class StepBarItemIconIndicator extends StatelessWidget { final theme = OptimusTheme.of(context); return Container( - width: _iconWrapperSize, - height: _iconWrapperSize, + width: context.tokens.sizing500, + height: context.tokens.sizing500, decoration: BoxDecoration(shape: BoxShape.circle, color: _color(theme)), child: OptimusIcon(iconData: _icon, colorOption: state.iconColor), ); @@ -153,13 +154,14 @@ class StepBarItemNumberIndicator extends StatelessWidget { @override Widget build(BuildContext context) { + final tokens = context.tokens; final theme = OptimusTheme.of(context); return state == OptimusStepBarItemState.completed - ? const SizedBox( - width: _iconWrapperSize, - height: _iconWrapperSize, - child: OptimusIcon( + ? SizedBox( + width: tokens.sizing500, + height: tokens.sizing500, + child: const OptimusIcon( iconData: OptimusIcons.done, colorOption: OptimusIconColorOption.primary, ), @@ -168,8 +170,8 @@ class StepBarItemNumberIndicator extends StatelessWidget { alignment: Alignment.center, children: [ Container( - width: _iconWrapperSize, - height: _iconWrapperSize, + width: tokens.sizing500, + height: tokens.sizing500, decoration: state == OptimusStepBarItemState.active ? BoxDecoration( shape: BoxShape.circle, @@ -211,8 +213,10 @@ class StepBarSpacer extends StatelessWidget { @override Widget build(BuildContext context) { final theme = OptimusTheme.of(context); + final tokens = context.tokens; final enabled = nextItemState.isAccessible; final color = enabled ? theme.colors.primary : theme.colors.neutral1000t32; + final verticalSpacerLeftPadding = tokens.sizing500 / 2 + tokens.spacing100; return switch (layout) { Axis.horizontal => Flexible( @@ -223,10 +227,10 @@ class StepBarSpacer extends StatelessWidget { ), ), Axis.vertical => Padding( - padding: const EdgeInsets.only( - left: _verticalSpacerLeftPadding, - bottom: spacing100, - top: spacing100, + padding: EdgeInsets.only( + left: verticalSpacerLeftPadding, + bottom: tokens.spacing100, + top: tokens.spacing100, ), child: SizedBox( height: _spacerHeight, @@ -271,8 +275,5 @@ extension OptimusStepBarItemTheme on OptimusStepBarItemState { this == OptimusStepBarItemState.active; } -const _iconWrapperSize = spacing500; -const _itemLeftPadding = spacing100; -const _verticalSpacerLeftPadding = _iconWrapperSize / 2 + _itemLeftPadding; const double _spacerHeight = 16; const double _spacerThickness = 1; diff --git a/optimus/lib/src/tabs.dart b/optimus/lib/src/tabs.dart index 95268390..572be424 100644 --- a/optimus/lib/src/tabs.dart +++ b/optimus/lib/src/tabs.dart @@ -18,30 +18,34 @@ class OptimusTab extends StatelessWidget { final double? maxWidth; @override - Widget build(BuildContext context) => Container( - padding: const EdgeInsets.symmetric(horizontal: spacing150), - height: 48, - constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - if (icon != null) - Padding( - padding: const EdgeInsets.only(right: spacing50), - child: Icon(icon, size: 16), - ), - Text(label, overflow: TextOverflow.ellipsis), - if (badge case final badge?) - Padding( - padding: const EdgeInsets.only(left: spacing50), - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 32), - child: BaseBadge(text: badge, outline: false), - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Container( + padding: EdgeInsets.symmetric(horizontal: tokens.spacing150), + height: 48, + constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (icon != null) + Padding( + padding: EdgeInsets.only(right: tokens.spacing50), + child: Icon(icon, size: 16), + ), + Text(label, overflow: TextOverflow.ellipsis), + if (badge case final badge?) + Padding( + padding: EdgeInsets.only(left: tokens.spacing50), + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 32), + child: BaseBadge(text: badge, outline: false), ), - ], - ), - ); + ), + ], + ), + ); + } } class OptimusTabBar extends StatelessWidget { diff --git a/optimus/lib/src/tag.dart b/optimus/lib/src/tag.dart index b46b97b3..60a302ab 100644 --- a/optimus/lib/src/tag.dart +++ b/optimus/lib/src/tag.dart @@ -144,45 +144,49 @@ class _Tag extends StatelessWidget { final bool outline; @override - Widget build(BuildContext context) => Container( - decoration: BoxDecoration( - color: outline ? null : backgroundColor, - border: outline - ? Border.all( - color: borderColor, - width: context.tokens.borderWidth150, - style: BorderStyle.solid, - ) - : null, - borderRadius: BorderRadius.circular(context.tokens.borderRadius50), - ), - padding: const EdgeInsets.symmetric(horizontal: spacing100), - height: 24, - child: Row( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - if (leadingIcon != null) - Padding( - padding: const EdgeInsets.only(right: spacing50), - child: Icon(leadingIcon, color: foregroundColor, size: 16), - ), - ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 200), - child: Text( - text, - style: preset200r.copyWith(color: foregroundColor), - overflow: TextOverflow.ellipsis, - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return Container( + decoration: BoxDecoration( + color: outline ? null : backgroundColor, + border: outline + ? Border.all( + color: borderColor, + width: tokens.borderWidth150, + style: BorderStyle.solid, + ) + : null, + borderRadius: BorderRadius.circular(tokens.borderRadius50), + ), + padding: EdgeInsets.symmetric(horizontal: tokens.spacing100), + height: 24, + child: Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + if (leadingIcon != null) + Padding( + padding: EdgeInsets.only(right: tokens.spacing50), + child: Icon(leadingIcon, color: foregroundColor, size: 16), + ), + ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 200), + child: Text( + text, + style: preset200r.copyWith(color: foregroundColor), + overflow: TextOverflow.ellipsis, ), - if (trailingIcon != null) - Padding( - padding: const EdgeInsets.only(left: spacing50), - child: Icon(trailingIcon, color: foregroundColor, size: 16), - ), - ], - ), - ); + ), + if (trailingIcon != null) + Padding( + padding: EdgeInsets.only(left: tokens.spacing50), + child: Icon(trailingIcon, color: foregroundColor, size: 16), + ), + ], + ), + ); + } } extension on OptimusColorOption { diff --git a/optimus/lib/src/toggle.dart b/optimus/lib/src/toggle.dart index 6f32ae82..2f66aa4e 100644 --- a/optimus/lib/src/toggle.dart +++ b/optimus/lib/src/toggle.dart @@ -70,52 +70,56 @@ class _OptimusToggleState extends State with ThemeGetter { setState(() => _isPressed = isPressed); @override - Widget build(BuildContext context) => IgnorePointer( - ignoring: !_isEnabled, - child: GestureWrapper( - onHoverChanged: _handleHoveredChanged, - onPressedChanged: _handlePressedChanged, - onTap: () => widget.onChanged?.call(!widget.isChecked), - child: AnimatedContainer( - width: _toggleWidth, - height: _toggleHeight, - duration: _animationDuration, - padding: const EdgeInsets.all(spacing50), - decoration: ShapeDecoration( - color: _color, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(56)), - ), + Widget build(BuildContext context) { + final tokens = context.tokens; + + return IgnorePointer( + ignoring: !_isEnabled, + child: GestureWrapper( + onHoverChanged: _handleHoveredChanged, + onPressedChanged: _handlePressedChanged, + onTap: () => widget.onChanged?.call(!widget.isChecked), + child: AnimatedContainer( + width: _toggleWidth, + height: _toggleHeight, + duration: _animationDuration, + padding: EdgeInsets.all(tokens.spacing50), + decoration: ShapeDecoration( + color: _color, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(56)), ), - child: Stack( - children: [ - if (widget.offIcon != null || widget.onChanged != null) - Row( - children: [ - _Icon( - icon: widget.offIcon, - isVisible: widget.isChecked, - isEnabled: _isEnabled, - ), - const SizedBox(width: spacing50), - _Icon( - icon: widget.onIcon, - isVisible: !widget.isChecked, - isEnabled: _isEnabled, - ), - ], - ), - AnimatedPositioned( - duration: _animationDuration, - curve: _animationCurve, - left: _leftPadding, - child: const _Knob(), + ), + child: Stack( + children: [ + if (widget.offIcon != null || widget.onChanged != null) + Row( + children: [ + _Icon( + icon: widget.offIcon, + isVisible: widget.isChecked, + isEnabled: _isEnabled, + ), + SizedBox(width: tokens.spacing50), + _Icon( + icon: widget.onIcon, + isVisible: !widget.isChecked, + isEnabled: _isEnabled, + ), + ], ), - ], - ), + AnimatedPositioned( + duration: _animationDuration, + curve: _animationCurve, + left: _leftPadding, + child: const _Knob(), + ), + ], ), ), - ); + ), + ); + } } class _Knob extends StatelessWidget { diff --git a/optimus/lib/src/tooltip/tooltip.dart b/optimus/lib/src/tooltip/tooltip.dart index fa8d8e7f..c0634325 100644 --- a/optimus/lib/src/tooltip/tooltip.dart +++ b/optimus/lib/src/tooltip/tooltip.dart @@ -34,11 +34,11 @@ class OptimusTooltip extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = OptimusTheme.of(context); + final tokens = context.tokens; final alignment = TooltipOverlay.of(context)?.alignment ?? _fallbackPosition.toTooltipAlignment(); - final foregroundColor = theme.tokens.textStaticInverse; - final backgroundColor = theme.tokens.backgroundStaticInverse; + final foregroundColor = tokens.textStaticInverse; + final backgroundColor = tokens.backgroundStaticInverse; return Padding( padding: const EdgeInsets.all(_arrowHeight), @@ -46,13 +46,13 @@ class OptimusTooltip extends StatelessWidget { painter: _TooltipPainter( color: backgroundColor, alignment: alignment, - borderRadius: Radius.circular(context.tokens.borderRadius50), + borderRadius: Radius.circular(tokens.borderRadius50), ), child: Container( width: size.maxWidth, - padding: const EdgeInsets.symmetric( - vertical: spacing50, - horizontal: spacing150, + padding: EdgeInsets.symmetric( + vertical: tokens.spacing50, + horizontal: tokens.spacing150, ), child: Material( color: backgroundColor, diff --git a/optimus/lib/src/tooltip/tooltip_overlay.dart b/optimus/lib/src/tooltip/tooltip_overlay.dart index d1e6afa9..49f1eabd 100644 --- a/optimus/lib/src/tooltip/tooltip_overlay.dart +++ b/optimus/lib/src/tooltip/tooltip_overlay.dart @@ -85,6 +85,12 @@ class TooltipOverlayState extends State bool get _isOnTop => _spaceTop > _spaceBottom; + double get _widgetPadding => context.tokens.spacing100; + + double get _screenPadding => context.tokens.spacing200; + + double get _sideAlignOffset => context.tokens.spacing100; + double get _spaceLeft => _savedRect.left - _widgetPadding; double get _spaceRight => _overlayWidth - _widgetPadding - _savedRect.right; @@ -300,8 +306,5 @@ class TooltipOverlayState extends State ); } -const double _screenPadding = spacing200; -const double _widgetPadding = spacing100; -const double _sideAlignOffset = spacing100; const double _tooltipAlignOffset = 20.0; const Duration _animationDuration = Duration(milliseconds: 100); diff --git a/storybook/lib/stories/compact_step_bar.dart b/storybook/lib/stories/compact_step_bar.dart index 2e97cf5f..75e87fbb 100644 --- a/storybook/lib/stories/compact_step_bar.dart +++ b/storybook/lib/stories/compact_step_bar.dart @@ -25,7 +25,7 @@ final Story compactStepBarStory = Story( ); return Padding( - padding: const EdgeInsets.all(spacing100), + padding: const EdgeInsets.all(8), child: SizedBox( width: 400, child: Align( diff --git a/storybook/lib/stories/dialog.dart b/storybook/lib/stories/dialog.dart index 6ba77255..59673126 100644 --- a/storybook/lib/stories/dialog.dart +++ b/storybook/lib/stories/dialog.dart @@ -23,11 +23,11 @@ final Story dialogStory = Story( child: Column( children: [ const Padding( - padding: EdgeInsets.only(top: spacing300, bottom: spacing200), + padding: EdgeInsets.only(top: 24, bottom: 16), child: OptimusSectionTitle(child: Text('Small dialog')), ), Wrap( - spacing: spacing100, + spacing: 8, children: [ OptimusButton( variant: OptimusButtonVariant.primary, @@ -68,11 +68,11 @@ final Story dialogStory = Story( ], ), const Padding( - padding: EdgeInsets.only(top: spacing300, bottom: spacing200), + padding: EdgeInsets.only(top: 24, bottom: 16), child: OptimusSectionTitle(child: Text('Regular dialog')), ), Wrap( - spacing: spacing100, + spacing: 8, children: [ OptimusButton( variant: OptimusButtonVariant.primary, @@ -113,11 +113,11 @@ final Story dialogStory = Story( ], ), const Padding( - padding: EdgeInsets.only(top: spacing300, bottom: spacing200), + padding: EdgeInsets.only(top: 24, bottom: 16), child: OptimusSectionTitle(child: Text('Large dialog')), ), Wrap( - spacing: spacing100, + spacing: 8, children: [ OptimusButton( variant: OptimusButtonVariant.primary, @@ -158,11 +158,11 @@ final Story dialogStory = Story( ], ), const Padding( - padding: EdgeInsets.only(top: spacing300, bottom: spacing200), + padding: EdgeInsets.only(top: 24, bottom: 16), child: OptimusSectionTitle(child: Text('Custom content')), ), Wrap( - spacing: spacing100, + spacing: 8, children: [ OptimusButton( variant: OptimusButtonVariant.primary, diff --git a/storybook/lib/stories/icon/icons.dart b/storybook/lib/stories/icon/icons.dart index 617a66a7..7f231fa6 100644 --- a/storybook/lib/stories/icon/icons.dart +++ b/storybook/lib/stories/icon/icons.dart @@ -11,7 +11,7 @@ final Story allIconsStory = Story( crossAxisCount: 5, ), itemBuilder: (context, index) => Padding( - padding: const EdgeInsets.all(spacing100), + padding: const EdgeInsets.all(8), child: Column( children: [ OptimusIcon(iconData: optimusIcons[index].data), diff --git a/storybook/lib/stories/segmented_control.dart b/storybook/lib/stories/segmented_control.dart index 857c7356..119179f4 100644 --- a/storybook/lib/stories/segmented_control.dart +++ b/storybook/lib/stories/segmented_control.dart @@ -40,7 +40,7 @@ final Story segmentedControlStory = Story( mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.symmetric(vertical: spacing100), + padding: const EdgeInsets.symmetric(vertical: 8), child: _SegmentedControlExample( label: label, error: error, @@ -53,7 +53,7 @@ final Story segmentedControlStory = Story( ), ), Padding( - padding: const EdgeInsets.symmetric(vertical: spacing100), + padding: const EdgeInsets.symmetric(vertical: 8), child: _SegmentedControlExample( label: label, error: error, @@ -66,7 +66,7 @@ final Story segmentedControlStory = Story( ), ), Padding( - padding: const EdgeInsets.symmetric(vertical: spacing100), + padding: const EdgeInsets.symmetric(vertical: 8), child: _SegmentedControlExample( label: label, error: error, @@ -79,7 +79,7 @@ final Story segmentedControlStory = Story( ), ), Padding( - padding: const EdgeInsets.symmetric(vertical: spacing100), + padding: const EdgeInsets.symmetric(vertical: 8), child: _SegmentedControlExample( label: label, error: error, diff --git a/storybook/lib/stories/select_input.dart b/storybook/lib/stories/select_input.dart index 276df9e7..4ff83f57 100644 --- a/storybook/lib/stories/select_input.dart +++ b/storybook/lib/stories/select_input.dart @@ -95,7 +95,7 @@ class _SelectInputStoryState extends State { .toList(), builder: (option) => option, emptyResultPlaceholder: const Padding( - padding: EdgeInsets.all(spacing100), + padding: EdgeInsets.all(8), child: OptimusLabel(child: Text('No results found')), ), multiselect: multiselect, diff --git a/storybook/lib/stories/spacing.dart b/storybook/lib/stories/spacing.dart index 175cff59..5460001b 100644 --- a/storybook/lib/stories/spacing.dart +++ b/storybook/lib/stories/spacing.dart @@ -4,26 +4,33 @@ import 'package:storybook_flutter/storybook_flutter.dart'; final Story spacingStory = Story( name: 'Layout/Spacing', - builder: (_) => SingleChildScrollView( - child: Column( - children: [ - _buildSpacing(spacing0, 'Spacing 0'), - _buildSpacing(spacing25, 'Spacing 25'), - _buildSpacing(spacing50, 'Spacing 50'), - _buildSpacing(spacing100, 'Spacing 100'), - _buildSpacing(spacing200, 'Spacing 200'), - _buildSpacing(spacing300, 'Spacing 300'), - _buildSpacing(spacing400, 'Spacing 400'), - _buildSpacing(spacing500, 'Spacing 500'), - _buildSpacing(spacing700, 'Spacing 700'), - _buildSpacing(spacing900, 'Spacing 900'), - _buildSpacing(spacing1200, 'Spacing 1200'), - ], - ), - ), + builder: (BuildContext context) { + final tokens = context.tokens; + + return SingleChildScrollView( + child: OptimusTheme( + child: Column( + children: [ + _buildSpacing(tokens, tokens.spacing0, 'Spacing 0'), + _buildSpacing(tokens, tokens.spacing25, 'Spacing 25'), + _buildSpacing(tokens, tokens.spacing50, 'Spacing 50'), + _buildSpacing(tokens, tokens.spacing100, 'Spacing 100'), + _buildSpacing(tokens, tokens.spacing200, 'Spacing 200'), + _buildSpacing(tokens, tokens.spacing300, 'Spacing 300'), + _buildSpacing(tokens, tokens.spacing400, 'Spacing 400'), + _buildSpacing(tokens, tokens.spacing500, 'Spacing 500'), + _buildSpacing(tokens, tokens.spacing700, 'Spacing 700'), + _buildSpacing(tokens, tokens.spacing900, 'Spacing 900'), + _buildSpacing(tokens, tokens.spacing1200, 'Spacing 1200'), + ], + ), + ), + ); + }, ); -Widget _buildSpacing(double spacing, String label) => Padding( +Widget _buildSpacing(OptimusTokens tokens, double spacing, String label) => + Padding( padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12), child: Row( children: [ @@ -33,11 +40,12 @@ Widget _buildSpacing(double spacing, String label) => Padding( child: Container(color: Colors.black), ), Padding( - padding: EdgeInsets.only(left: _getPadding(spacing)), + padding: EdgeInsets.only(left: _getPadding(tokens, spacing)), child: Text(label, textAlign: TextAlign.left), ), ], ), ); -double _getPadding(double spacing) => 24 + spacing1200 - spacing; +double _getPadding(OptimusTokens tokens, double spacing) => + 24 + tokens.spacing1200 - spacing; diff --git a/storybook/lib/stories/tooltip_wrapper.dart b/storybook/lib/stories/tooltip_wrapper.dart index 29f23eaa..2c2546bf 100644 --- a/storybook/lib/stories/tooltip_wrapper.dart +++ b/storybook/lib/stories/tooltip_wrapper.dart @@ -33,7 +33,7 @@ final Story tooltipWrapperStory = Story( ); return Padding( - padding: const EdgeInsets.all(spacing200), + padding: const EdgeInsets.all(16), child: Stack( children: [ Align(