feat: [DX-723] Migrate to typography tokens

MewsSystems · Jan 29, 2024 · c9e2ef5 · c9e2ef5
1 parent 683cc29
commit c9e2ef5
Show file tree

Hide file tree

Showing 35 changed files with 211 additions and 314 deletions.
diff --git a/optimus/lib/optimus.dart b/optimus/lib/optimus.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:optimus/src/colors/colors.dart';
-import 'package:optimus/src/typography/presets.dart';
+import 'package:optimus/src/theme/optimus_tokens.dart';
 
 export 'package:intl/intl.dart' show DateFormat;
 
@@ -94,32 +94,39 @@ export 'src/typography/title.dart';
 export 'src/typography/variation.dart';
 export 'src/widget_size.dart';
 
-ThemeData createOptimusMaterialTheme(Brightness brightness) => ThemeData(
+ThemeData createOptimusMaterialTheme(Brightness brightness) {
+  final tokensTheme =
+      brightness == Brightness.light ? OptimusTokens.light : OptimusTokens.dark;
+  final baseTextStyle = tokensTheme.bodyMedium;
+
+  return ThemeData(
+    brightness: brightness,
+    scaffoldBackgroundColor: OptimusColors(brightness).background,
+    primarySwatch: Colors.blue,
+    fontFamily: tokensTheme.fontFamilyUi,
+    package: 'optimus',
+    textTheme: TextTheme(
+      displayLarge: baseTextStyle,
+      displayMedium: baseTextStyle,
+      displaySmall: baseTextStyle,
+      headlineMedium: baseTextStyle,
+      headlineSmall: baseTextStyle,
+      titleLarge: baseTextStyle,
+      bodyLarge: baseTextStyle,
+      bodyMedium: baseTextStyle,
+      titleMedium: baseTextStyle,
+      titleSmall: baseTextStyle,
+      bodySmall: baseTextStyle,
+      labelLarge: baseTextStyle,
+      labelSmall: baseTextStyle,
+    ),
+    cupertinoOverrideTheme: CupertinoThemeData(
       brightness: brightness,
-      scaffoldBackgroundColor: OptimusColors(brightness).background,
-      primarySwatch: Colors.blue,
-      fontFamily: 'packages/optimus/Inter',
-      textTheme: const TextTheme(
-        displayLarge: baseTextStyle,
-        displayMedium: baseTextStyle,
-        displaySmall: baseTextStyle,
-        headlineMedium: baseTextStyle,
-        headlineSmall: baseTextStyle,
-        titleLarge: baseTextStyle,
-        bodyLarge: baseTextStyle,
-        bodyMedium: baseTextStyle,
-        titleMedium: baseTextStyle,
-        titleSmall: baseTextStyle,
-        bodySmall: baseTextStyle,
-        labelLarge: baseTextStyle,
-        labelSmall: baseTextStyle,
-      ),
-      cupertinoOverrideTheme: CupertinoThemeData(
-        brightness: brightness,
-        primaryColor: Colors.blue,
-        primaryContrastingColor: Colors.blue,
-        textTheme: const CupertinoTextThemeData(),
-        barBackgroundColor: Colors.white,
-        scaffoldBackgroundColor: Colors.white,
-      ),
-    );
+      primaryColor: Colors.blue,
+      primaryContrastingColor: Colors.blue,
+      textTheme: const CupertinoTextThemeData(),
+      barBackgroundColor: Colors.white,
+      scaffoldBackgroundColor: Colors.white,
+    ),
+  );
+}
diff --git a/optimus/lib/src/avatar.dart b/optimus/lib/src/avatar.dart
@@ -3,7 +3,6 @@ import 'dart:typed_data';
 import 'package:dfunc/dfunc.dart';
 import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 class OptimusAvatar extends StatelessWidget {
   const OptimusAvatar({
@@ -80,7 +79,8 @@ class _FallbackText extends StatelessWidget {
   @override
   Widget build(BuildContext context) => Text(
         substring(title, 0, 1).toUpperCase(),
-        style: preset300b.copyWith(
+        style: context.tokens.bodyLarge.copyWith(
+          fontWeight: FontWeight.w700,
           color: OptimusTheme.of(context).colors.neutral0t64,
         ),
       );

diff --git a/optimus/lib/src/badge/base_badge.dart b/optimus/lib/src/badge/base_badge.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/src/theme/theme.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 class BaseBadge extends StatelessWidget {
   const BaseBadge({
@@ -46,13 +45,7 @@ class BaseBadge extends StatelessWidget {
             maxLines: 1,
             overflow: overflow,
             textAlign: TextAlign.center,
-            style: baseTextStyle.copyWith(
-              fontSize: 11,
-              letterSpacing: 0.2,
-              height: 1,
-              fontWeight: FontWeight.w600,
-              color: textColor,
-            ),
+            style: tokens.bodyExtraSmallStrong.copyWith(color: textColor),
           )
         : null;
 

diff --git a/optimus/lib/src/banner.dart b/optimus/lib/src/banner.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 enum OptimusBannerVariant {
   /// To display an informative message.
@@ -104,15 +103,15 @@ class OptimusBanner extends StatelessWidget {
                             : EdgeInsets.zero,
                         child: DefaultTextStyle.merge(
                           child: title,
-                          style: preset300s,
+                          style: tokens.bodyLargeStrong,
                         ),
                       ),
                       if (description case final description?)
                         Padding(
                           padding: EdgeInsets.only(top: tokens.spacing50),
                           child: DefaultTextStyle.merge(
                             child: description,
-                            style: preset200r.copyWith(
+                            style: tokens.bodyMedium.copyWith(
                               color: _getDescriptionColor(theme),
                             ),
                           ),
@@ -232,7 +231,8 @@ class OptimusWideBanner extends StatelessWidget {
   }
 
   TextStyle _contentTextStyle(OptimusThemeData theme) =>
-      preset200s.merge(TextStyle(color: _color(theme), height: 1));
+      theme.tokens.bodyMediumStrong
+          .merge(TextStyle(color: _color(theme), height: 1));
 
   Color _backgroundColor(OptimusThemeData theme) => switch (variant) {
         OptimusWideBannerVariant.informative => theme.colors.primary500,

diff --git a/optimus/lib/src/button/base_button.dart b/optimus/lib/src/button/base_button.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/button/common.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 class BaseButton extends StatefulWidget {
   const BaseButton({
@@ -131,8 +130,9 @@ class _ButtonContent extends StatefulWidget {
 }
 
 class _ButtonContentState extends State<_ButtonContent> with ThemeGetter {
-  TextStyle get _textStyle =>
-      widget.size == OptimusWidgetSize.small ? preset200b : preset300b;
+  TextStyle get _textStyle => widget.size == OptimusWidgetSize.small
+      ? tokens.bodyMediumStrong
+      : tokens.bodyLargeStrong;
 
   double get _iconSize => switch (widget.size) {
         OptimusWidgetSize.small => tokens.sizing200,
@@ -225,25 +225,29 @@ class _Badge extends StatelessWidget {
   final String label;
 
   @override
-  Widget build(BuildContext context) => SizedBox(
-        height: context.tokens.sizing200,
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(context.tokens.borderRadius200),
-          child: ColoredBox(
-            color: color,
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 4.5, vertical: 3),
-              child: Text(
-                label,
-                style: preset50b.copyWith(
-                  color: textColor,
-                  leadingDistribution: TextLeadingDistribution.proportional,
-                ),
+  Widget build(BuildContext context) {
+    final tokens = context.tokens;
+
+    return SizedBox(
+      height: tokens.sizing200,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(tokens.borderRadius200),
+        child: ColoredBox(
+          color: color,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 4.5, vertical: 3),
+            child: Text(
+              label,
+              style: tokens.bodyExtraSmallStrong.copyWith(
+                color: textColor,
+                leadingDistribution: TextLeadingDistribution.proportional,
               ),
             ),
           ),
         ),
-      );
+      ),
+    );
+  }
 }
 
 extension on Set<MaterialState> {

diff --git a/optimus/lib/src/button/base_dropdown_button.dart b/optimus/lib/src/button/base_dropdown_button.dart
@@ -3,7 +3,6 @@ import 'package:optimus/optimus.dart';
 import 'package:optimus/src/button/common.dart';
 import 'package:optimus/src/common/gesture_wrapper.dart';
 import 'package:optimus/src/overlay_controller.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 class BaseDropDownButton<T> extends StatefulWidget {
   const BaseDropDownButton({
@@ -88,8 +87,8 @@ class _BaseDropDownButtonState<T> extends State<BaseDropDownButton<T>>
       );
 
   TextStyle get _labelStyle => widget.size == OptimusWidgetSize.small
-      ? preset200b.copyWith(color: _textColor)
-      : preset300b.copyWith(color: _textColor);
+      ? tokens.bodyMediumStrong.copyWith(color: _textColor)
+      : tokens.bodyLargeStrong.copyWith(color: _textColor);
 
   Color? get _color => widget.variant.toButtonVariant().backgroundColor(
         tokens,

diff --git a/optimus/lib/src/chat/bubble.dart b/optimus/lib/src/chat/bubble.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 /// Chat bubble component offers single configurable bubble. The main use of
 /// this widget is in OptimusChat widget but it can be used also stand-alone.
@@ -43,7 +42,8 @@ class OptimusChatBubble extends StatelessWidget {
         if (isUserNameVisible) ...[
           Padding(
             padding: message.alignment.getHorizontalPadding(tokens),
-            child: Text(message.author.username, style: preset100s),
+            child:
+                Text(message.author.username, style: tokens.bodyMediumStrong),
           ),
           SizedBox(height: tokens.spacing50),
         ],
@@ -67,13 +67,14 @@ class _Date extends StatelessWidget {
       height: 1,
       color: OptimusTheme.of(context).colors.neutral50,
     );
+    final tokens = context.tokens;
 
     return OptimusStack(
       direction: Axis.horizontal,
       spacing: OptimusStackSpacing.spacing100,
       children: [
         Expanded(child: horizontalLine),
-        Text(date, style: preset100s),
+        Text(date, style: tokens.bodyMediumStrong),
         Expanded(child: horizontalLine),
       ],
     );
@@ -117,7 +118,7 @@ class _Bubble extends StatelessWidget {
       ),
       child: Text(
         message.message,
-        style: preset200s.copyWith(color: _getTextColor(theme)),
+        style: tokens.bodyMediumStrong.copyWith(color: _getTextColor(theme)),
       ),
     );
   }

diff --git a/optimus/lib/src/chat/chat.dart b/optimus/lib/src/chat/chat.dart
@@ -2,7 +2,6 @@ import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/chat/optimus_chat_input.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 typedef FormatDate = String Function(DateTime value);
 typedef FormatTime = String Function(DateTime value);
@@ -360,13 +359,13 @@ class _Status extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = OptimusTheme.of(context);
+    final tokens = context.tokens;
 
     return DefaultTextStyle.merge(
-      style: baseTextStyle.copyWith(
+      style: tokens.bodySmall.copyWith(
         color: theme.isDark
             ? theme.colors.neutral0t64
             : theme.colors.neutral1000t64,
-        fontSize: 12,
         fontWeight: FontWeight.w600,
       ),
       child: child,

diff --git a/optimus/lib/src/checkbox/checkbox.dart b/optimus/lib/src/checkbox/checkbox.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/checkbox/checkbox_tick.dart';
 import 'package:optimus/src/common/group_wrapper.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 /// The Checkbox + Label component is available in two size
 /// variants to accommodate different environments with different requirements.
@@ -98,8 +97,10 @@ class OptimusCheckbox extends StatelessWidget {
     final color = _labelColor(tokens);
 
     return switch (size) {
-      OptimusCheckboxSize.large => preset300s.copyWith(color: color),
-      OptimusCheckboxSize.small => preset200s.copyWith(color: color),
+      OptimusCheckboxSize.large =>
+        tokens.bodyLargeStrong.copyWith(color: color),
+      OptimusCheckboxSize.small =>
+        tokens.bodyMediumStrong.copyWith(color: color),
     };
   }
 

diff --git a/optimus/lib/src/chip.dart b/optimus/lib/src/chip.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/common/gesture_wrapper.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 /// Chips are a visual representation of a keyword or phrase that the user has
 /// used for purposes of filtering the scope of content displayed in the
@@ -88,7 +87,8 @@ class _OptimusChipState extends State<OptimusChip> with ThemeGetter {
                         horizontal: context.tokens.spacing50,
                       ),
                       child: DefaultTextStyle.merge(
-                        style: preset200r.copyWith(color: _foregroundColor),
+                        style:
+                            tokens.bodyMedium.copyWith(color: _foregroundColor),
                         child: widget.child,
                       ),
                     ),

diff --git a/optimus/lib/src/common/field_wrapper.dart b/optimus/lib/src/common/field_wrapper.dart
@@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/common/field_error.dart';
 import 'package:optimus/src/common/field_label.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 class FieldWrapper extends StatefulWidget {
   const FieldWrapper({
@@ -267,7 +266,7 @@ class _Styled extends StatelessWidget {
         !isEnabled ? tokens.textDisabled : tokens.textStaticPrimary;
 
     return DefaultTextStyle.merge(
-      style: preset200r.copyWith(color: textColor),
+      style: tokens.bodyMedium.copyWith(color: textColor),
       child: IconTheme(
         data: IconThemeData(color: iconColor, size: tokens.sizing200),
         child: child,

diff --git a/optimus/lib/src/divider.dart b/optimus/lib/src/divider.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/theme/common.dart';
-import 'package:optimus/src/typography/presets.dart';
 
 /// Divider is a visual representation of a separation between two areas.
 class OptimusDivider extends StatelessWidget {
@@ -52,7 +51,7 @@ class OptimusDivider extends StatelessWidget {
             child: AnimatedContainer(
               duration: themeChangeAnimationDuration,
               child: DefaultTextStyle.merge(
-                style: preset100s.copyWith(
+                style: tokens.bodySmallStrong.copyWith(
                   color: theme.tokens.textStaticSecondary,
                 ),
                 child: child,

diff --git a/optimus/lib/src/dropdown/base_dropdown_tile.dart b/optimus/lib/src/dropdown/base_dropdown_tile.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
 import 'package:optimus/src/checkbox/checkbox_tick.dart';
-import 'package:optimus/src/typography/presets.dart';
 import 'package:optimus/src/typography/typography.dart';
 
 class BaseDropdownTile extends StatelessWidget {
@@ -25,12 +24,12 @@ class BaseDropdownTile extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
         OptimusTypography(
-          resolveStyle: (_) => preset300s,
+          resolveStyle: (_) => tokens.bodyLargeStrong,
           child: title,
         ),
         if (subtitle case final subtitle?)
           OptimusTypography(
-            resolveStyle: (_) => preset200s,
+            resolveStyle: (_) => tokens.bodyMediumStrong,
             color: OptimusTypographyColor.secondary,
             child: subtitle,
           ),