From 0c1ce6f35774e6e49773d16aef1ddb20d0ba7a5c Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Wed, 3 Apr 2024 15:18:37 +0100 Subject: [PATCH] chore: Update text styles (#13) --- .../lib/pages/theme/typography_example.dart | 2 +- example/lib/widgets.dart | 6 +- .../macos/Runner.xcodeproj/project.pbxproj | 2 +- .../xcshareddata/xcschemes/Runner.xcscheme | 2 +- example/test/typography_test.dart | 6 +- .../pages/theme/typography_widgetbook.dart | 2 +- lib/src/components/accordion/accordion.dart | 12 +- lib/src/components/badges/indicator.dart | 6 +- lib/src/components/badges/priority_pill.dart | 4 +- .../badges/workcloud_indicator.dart | 2 +- .../components/banners/in_page_banner.dart | 6 +- lib/src/components/banners/system_banner.dart | 3 +- .../components/breadcrumbs/breadcrumbs.dart | 2 +- lib/src/components/buttons/button.dart | 4 +- lib/src/components/buttons/button_group.dart | 11 +- lib/src/components/checkbox/checkbox.dart | 2 +- lib/src/components/chips/chip.dart | 2 +- lib/src/components/radio/radio.dart | 2 +- lib/src/theme/typography.dart | 154 +++++++++++++++--- 19 files changed, 174 insertions(+), 56 deletions(-) diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart index 7e9efcee..da763e40 100644 --- 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 index 6523f821..816cd4ea 100644 --- 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 index ee0056c3..253d9342 100644 --- 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 index 5b055a3a..83d88728 100644 --- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme +++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme @@ -1,6 +1,6 @@ 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 index 6b2966f8..5fc24290 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -174,7 +174,17 @@ class _ZetaAccordionState extends State 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 index 7b5a91d6..ff77a5ad 100644 --- 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 index a95002c0..8e027667 100644 --- 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 index 3a79c04a..c1efefde 100644 --- 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 index 15d9e20b..15323eaa 100644 --- 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 index e6b40dff..1c9a29f6 100644 --- 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 index 51536248..f318946d 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -204,7 +204,7 @@ class _ZetaBreadCrumbState extends State { ), 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 index 252cdd1b..c6c61700 100644 --- 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 index 4a71ba17..bf903921 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -242,14 +242,11 @@ class _ZetaGroupButtonState extends State { 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 index 350f49b0..36d40b8c 100644 --- 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 index 78d28324..6432b23d 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -97,7 +97,7 @@ class _ZetaChipState extends State { 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 index 82f2a61f..7971e2ca 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -86,7 +86,7 @@ class _ZetaRadioState extends State> 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, ), diff --git a/lib/src/theme/typography.dart b/lib/src/theme/typography.dart index c5515f42..f9e21f8c 100644 --- a/lib/src/theme/typography.dart +++ b/lib/src/theme/typography.dart @@ -14,17 +14,32 @@ class ZetaTextStyles { /// As the largest text on the screen, display styles are reserved for short, /// important text or numerals. They work best on large screens. /// {@endtemplate} - static const TextStyle displayLarge = TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52); + static const TextStyle displayLarge = TextStyle( + fontSize: 52, + fontWeight: FontWeight.w300, + height: 60 / 52, + fontFamily: kZetaFontFamily, + ); /// Middle size of the display styles. /// /// {@macro zeta-text-display} - static const TextStyle displayMedium = TextStyle(fontSize: 42, fontWeight: FontWeight.w300, height: 56 / 42); + static const TextStyle displayMedium = TextStyle( + fontSize: 44, + fontWeight: FontWeight.w300, + height: 52 / 44, + fontFamily: kZetaFontFamily, + ); /// Smallest of the display styles. /// /// {@macro zeta-text-display} - static const TextStyle displaySmall = TextStyle(fontSize: 36, fontWeight: FontWeight.w300, height: 48 / 36); + static const TextStyle displaySmall = TextStyle( + fontSize: 36, + fontWeight: FontWeight.w300, + height: 40 / 36, + fontFamily: kZetaFontFamily, + ); /// Largest of the headline styles. /// @@ -32,17 +47,32 @@ class ZetaTextStyles { /// Headline styles are smaller than display styles. They're best-suited for /// short, high-emphasis text on smaller screens. /// {@endtemplate} - static const TextStyle heading1 = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 36 / 32); + static const TextStyle heading1 = TextStyle( + fontSize: 32, + fontWeight: FontWeight.w500, + height: 36 / 32, + fontFamily: kZetaFontFamily, + ); /// Middle size of the headline styles. /// /// {@macro zeta-text-headline} - static const TextStyle heading2 = TextStyle(fontSize: 28, fontWeight: FontWeight.w500, height: 32 / 28); + static const TextStyle heading2 = TextStyle( + fontSize: 28, + fontWeight: FontWeight.w500, + height: 32 / 28, + fontFamily: kZetaFontFamily, + ); /// Smallest of the headline styles. /// /// {@macro zeta-text-headline} - static const TextStyle heading3 = TextStyle(fontSize: 24, fontWeight: FontWeight.w500, height: 32 / 24); + static const TextStyle heading3 = TextStyle( + fontSize: 24, + fontWeight: FontWeight.w500, + height: 28 / 24, + fontFamily: kZetaFontFamily, + ); /// Largest of the title styles. /// @@ -50,36 +80,76 @@ class ZetaTextStyles { /// Titles are smaller than headline styles and should be used for shorter, /// medium-emphasis text. /// {@endtemplate} - static const TextStyle titleLarge = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 20 / 28); + static const TextStyle titleLarge = TextStyle( + fontSize: 20, + fontWeight: FontWeight.w500, + height: 24 / 20, + fontFamily: kZetaFontFamily, + ); /// Middle size of the title styles. /// /// {@macro zeta-text-title} - static const TextStyle titleMedium = TextStyle(fontSize: 18, fontWeight: FontWeight.w500, height: 24 / 18); + static const TextStyle titleMedium = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + height: 20 / 16, + fontFamily: kZetaFontFamily, + ); /// Smallest of the title styles. /// /// {@macro zeta-text-title} - static const TextStyle titleSmall = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16); + static const TextStyle titleSmall = TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + height: 16 / 12, + fontFamily: kZetaFontFamily, + ); /// Largest of the body styles. /// /// {@template zeta-text-body} /// Body styles are used for longer passages of text. /// {@endtemplate} - static const TextStyle bodyLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w400, height: 16 / 24); + static const TextStyle bodyLarge = TextStyle( + fontSize: 20, + fontWeight: FontWeight.w400, + height: 24 / 20, + fontFamily: kZetaFontFamily, + ); /// Middle size of the body styles. /// /// {@macro zeta-text-body} /// /// The default Text style for [Zeta]. - static const TextStyle bodyMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w400, height: 20 / 14); + static const TextStyle bodyMedium = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w400, + height: 24 / 16, + fontFamily: kZetaFontFamily, + ); + + /// Small size of the body styles. + /// + /// {@macro zeta-text-body} + static const TextStyle bodySmall = TextStyle( + fontSize: 14, + fontWeight: FontWeight.w400, + height: 18 / 14, + fontFamily: kZetaFontFamily, + ); /// Smallest of the body styles. /// /// {@macro zeta-text-body} - static const TextStyle bodySmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w400, height: 16 / 12); + static const TextStyle bodyXSmall = TextStyle( + fontSize: 12, + fontWeight: FontWeight.w400, + height: 16 / 12, + fontFamily: kZetaFontFamily, + ); /// Largest of the label styles. /// @@ -90,26 +160,72 @@ class ZetaTextStyles { /// {@endtemplate} /// /// Used for text on [ZetaButton]. - static const TextStyle labelLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16); + static const TextStyle labelLarge = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + height: 24 / 16, + fontFamily: kZetaFontFamily, + ); /// Middle size of the label styles. /// /// {@macro zeta-text-label} - static const TextStyle labelMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w500, height: 20 / 14); + static const TextStyle labelMedium = TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + height: 20 / 14, + fontFamily: kZetaFontFamily, + ); /// Small size of the label styles. /// /// {@macro zeta-text-label} - static const TextStyle labelSmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 16 / 12); + static const TextStyle labelSmall = TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + height: 16 / 12, + fontFamily: kZetaFontFamily, + ); /// Label text style used specifically for Indicator. + /// /// {@macro zeta-text-label} - static const TextStyle labelIndicator = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 14 / 12); + static const TextStyle labelIndicator = TextStyle( + fontSize: 12, + fontWeight: FontWeight.w500, + height: 14 / 12, + fontFamily: kZetaFontFamily, + ); - /// Smallest of the label styles. + /// Largest heading style. /// - /// {@macro zeta-text-label} - static const TextStyle labelTiny = TextStyle(fontSize: 11, fontWeight: FontWeight.w500, height: 14 / 11); + /// {@macro zeta-text-headline} + static const TextStyle h1 = heading1; + + /// Second largest heading style. + /// + /// {@macro zeta-text-headline} + static const TextStyle h2 = heading2; + + /// Third largest heading style. + /// + /// {@macro zeta-text-headline} + static const TextStyle h3 = heading3; + + /// Fourth largest heading style. + /// + /// {@macro zeta-text-headline} + static const TextStyle h4 = titleLarge; + + /// Fifth largest heading style. + /// + /// {@macro zeta-text-headline} + static const TextStyle h5 = titleMedium; + + /// Sixth largest heading style. + /// + /// {@macro zeta-text-headline} + static const TextStyle h6 = titleSmall; } /// [ZetaTextStyles] combined into a [TextTheme].