chore: Update text styles (#13)

ZebraDevs · Apr 12, 2024 · 0c1ce6f · 0c1ce6f
1 parent 31bc20a
commit 0c1ce6f
Show file tree

Hide file tree

Showing 19 changed files with 174 additions and 56 deletions.
diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart
@@ -24,11 +24,11 @@ class TypographyExample extends StatelessWidget {
       'Body Large': ZetaTextStyles.bodyLarge,
       'Body Medium': ZetaTextStyles.bodyMedium,
       'Body Small': ZetaTextStyles.bodySmall,
+      'Body X-Small': ZetaTextStyles.bodyXSmall,
       'Label Large': ZetaTextStyles.labelLarge,
       'Label Medium': ZetaTextStyles.labelMedium,
       'Label Small': ZetaTextStyles.labelSmall,
       'Label Indicator': ZetaTextStyles.labelIndicator,
-      'Label Tiny': ZetaTextStyles.labelTiny,
     };
 
     return ExampleScaffold(

diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:zeta_example/utils/theme_color_switch.dart';
 import 'package:zeta_example/utils/theme_constrast_switch.dart';
 import 'package:zeta_example/utils/theme_mode_switch.dart';
-import 'package:zeta_flutter/zeta_flutter.dart';
 
 class ExampleScaffold extends StatelessWidget {
   final String name;
@@ -29,10 +28,7 @@ class ExampleScaffold extends StatelessWidget {
       floatingActionButton: floatingActionButton,
       appBar: AppBar(
         centerTitle: false,
-        title: Text(
-          name,
-          style: ZetaTextStyles.titleMedium,
-        ),
+        title: Text(name),
         backgroundColor: colors.primary,
         foregroundColor: colors.onPrimary,
         actions: [

diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj
@@ -202,7 +202,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1510;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {

diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1510"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

diff --git a/example/test/typography_test.dart b/example/test/typography_test.dart
@@ -24,7 +24,7 @@ void main() {
                 Text(exampleText, style: ZetaTextStyles.displayLarge, key: key3),
                 Text(
                   exampleText,
-                  style: TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52),
+                  style: TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 60 / 52),
                   key: key4,
                 ),
               ],
@@ -55,10 +55,10 @@ void main() {
     expect(text3.style, text4.style);
 
     /// Test font size of [ZetaTextStyles.bodyMedium] is correct
-    expect(text1.style!.fontSize, 14);
+    expect(text1.style!.fontSize, 16);
 
     /// Test line height of [ZetaTextStyles.bodyMedium] is correct
-    expect(text1.style!.height, 20 / 14);
+    expect(text1.style!.height, 24 / 16);
 
     /// Test font weight of [ZetaTextStyles.bodyMedium] is correct
     expect(text1.style!.fontWeight, FontWeight.w400);

diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart
@@ -16,11 +16,11 @@ const Map<String, TextStyle> allTypes = {
   'Body large': ZetaTextStyles.bodyLarge,
   'Body medium': ZetaTextStyles.bodyMedium,
   'Body small': ZetaTextStyles.bodySmall,
+  'Body X-small': ZetaTextStyles.bodyXSmall,
   'Label large': ZetaTextStyles.labelLarge,
   'Label medium': ZetaTextStyles.labelMedium,
   'Label small': ZetaTextStyles.labelSmall,
   'Label indicator': ZetaTextStyles.labelIndicator,
-  'Label tiny': ZetaTextStyles.labelTiny,
 };
 
 Widget typographyUseCase(BuildContext context) => Padding(

diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart
@@ -174,7 +174,17 @@ class _ZetaAccordionState extends State<ZetaAccordion> with TickerProviderStateM
               axisAlignment: -1,
               child: Padding(
                 padding: const EdgeInsets.fromLTRB(ZetaSpacing.x4, 0, ZetaSpacing.x4, ZetaSpacing.x4),
-                child: DefaultTextStyle(style: ZetaTextStyles.titleSmall, child: widget.child ?? const SizedBox()),
+                child: Theme(
+                  data: Theme.of(context).copyWith(
+                    listTileTheme: ListTileThemeData(
+                      titleTextStyle: ZetaTextStyles.titleSmall.apply(color: zetaColors.textDefault),
+                    ),
+                  ),
+                  child: DefaultTextStyle(
+                    style: ZetaTextStyles.titleSmall,
+                    child: widget.child ?? const SizedBox(),
+                  ),
+                ),
               ),
             ),
           ],

diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
@@ -123,8 +123,10 @@ class ZetaIndicator extends StatelessWidget {
         return Center(
           child: Text(
             value.formatMaxChars(),
-            style: (size == ZetaWidgetSize.large ? ZetaTextStyles.labelIndicator : ZetaTextStyles.labelTiny)
-                .apply(color: foregroundColor),
+            style: ZetaTextStyles.labelIndicator.copyWith(
+              color: foregroundColor,
+              fontSize: size == ZetaWidgetSize.large ? null : 11,
+            ), // TODO(thelukwalton): Awaiting updated design.
           ),
         );
     }

diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart
@@ -46,13 +46,13 @@ class ZetaPriorityPill extends StatelessWidget {
               shape: rounded ? BoxShape.circle : BoxShape.rectangle,
               color: backgroundColor,
             ),
-            child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodyMedium.apply(color: foregroundColor)),
+            child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodySmall.apply(color: foregroundColor)),
           ),
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x1),
             child: Text(
               priority,
-              style: ZetaTextStyles.bodyMedium,
+              style: ZetaTextStyles.bodySmall,
               overflow: TextOverflow.ellipsis,
             ),
           ),

diff --git a/lib/src/components/badges/workcloud_indicator.dart b/lib/src/components/badges/workcloud_indicator.dart
@@ -103,7 +103,7 @@ class ZetaWorkcloudIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final ZetaColorSwatch color = priorityType.color(context);
-    final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelTiny;
+    final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.bodySmall : ZetaTextStyles.bodyXSmall;
 
     return DecoratedBox(
       decoration: BoxDecoration(

diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart
@@ -71,14 +71,14 @@ class ZetaInPageBanner extends StatelessWidget {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  const SizedBox(height: ZetaSpacing.x2_5),
+                  const SizedBox(height: ZetaSpacing.x2),
                   if (hasTitle)
                     Text(
                       title!,
-                      style: ZetaTextStyles.titleSmall,
+                      style: ZetaTextStyles.labelLarge,
                     ).paddingBottom(ZetaSpacing.xxs),
                   DefaultTextStyle(
-                    style: ZetaTextStyles.bodyMedium.apply(color: theme.colors.textDefault),
+                    style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault),
                     child: content,
                   ),
                   if (actions.isNotEmpty)

diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banners/system_banner.dart
@@ -54,10 +54,9 @@ class ZetaSystemBanner extends MaterialBanner {
               }
 
               return DefaultTextStyle(
-                style: ZetaTextStyles.titleSmall.copyWith(
+                style: ZetaTextStyles.labelLarge.copyWith(
                   color: foregroundColor,
                   overflow: TextOverflow.ellipsis,
-                  height: 1,
                 ),
                 child: Row(
                   mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start,

diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -204,7 +204,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
           ),
           Text(
             widget.label,
-            style: TextStyle(color: getColor(controller.value, colors)),
+            style: ZetaTextStyles.bodySmall.apply(color: getColor(controller.value, colors)),
           ),
         ],
       ),

diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart
@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 
 import '../../../zeta_flutter.dart';
 
-///Button types
-
 ///Zeta Button
 class ZetaButton extends StatelessWidget {
   ///Constructs [ZetaButton]
@@ -135,7 +133,7 @@ class ZetaButton extends StatelessWidget {
     );
   }
 
-  TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelLarge;
+  TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelSmall : ZetaTextStyles.labelLarge;
 
   double get _minConstraints {
     switch (size) {

diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
@@ -242,14 +242,11 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              if (widget.icon != null) Icon(widget.icon),
-              Text(widget.label!),
+              if (widget.icon != null) Icon(widget.icon, size: ZetaSpacing.x5),
+              Text(widget.label ?? '', style: ZetaTextStyles.labelMedium),
               if (widget.dropdown != null) // TODO(UX-1006): Dropdown
-                Icon(
-                  widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp,
-                  size: 20,
-                ),
-            ],
+                Icon(widget.rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: ZetaSpacing.x5),
+            ].divide(const SizedBox(width: ZetaSpacing.x1)).toList(),
           ).paddingAll(_padding),
         ),
       ),

diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart
@@ -207,7 +207,7 @@ class _CheckboxState extends State<_Checkbox> {
           Flexible(
             child: Padding(
               padding: const EdgeInsets.only(left: ZetaSpacing.s),
-              child: Text(widget.label!, style: ZetaTextStyles.bodyLarge),
+              child: Text(widget.label!, style: ZetaTextStyles.bodyMedium),
             ),
           ),
         ],

diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
@@ -97,7 +97,7 @@ class _ZetaChipState extends State<ZetaChip> {
         shape: MaterialStateProperty.all(
           RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.full : ZetaRadius.none),
         ),
-        textStyle: MaterialStateProperty.all(ZetaTextStyles.bodyMedium),
+        textStyle: MaterialStateProperty.all(ZetaTextStyles.bodySmall),
         backgroundColor: MaterialStateProperty.resolveWith((states) {
           if (states.contains(MaterialState.disabled)) {
             return colors.surfaceDisabled;

diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart
@@ -86,7 +86,7 @@ class _ZetaRadioState<T> extends State<ZetaRadio<T>> with TickerProviderStateMix
           GestureDetector(
             onTap: () => onChanged?.call(true),
             child: DefaultTextStyle(
-              style: ZetaTextStyles.bodyLarge.copyWith(
+              style: ZetaTextStyles.bodyMedium.copyWith(
                 color: states.contains(MaterialState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault,
                 height: 1.33,
               ),