diff --git a/example/lib/src/storybook/stories/primitives/bottom_sheet.dart b/example/lib/src/storybook/stories/primitives/bottom_sheet.dart index 0d7e23f1..eabc16f1 100644 --- a/example/lib/src/storybook/stories/primitives/bottom_sheet.dart +++ b/example/lib/src/storybook/stories/primitives/bottom_sheet.dart @@ -65,7 +65,9 @@ class BottomSheetStory extends StatelessWidget { ? MediaQuery.of(context).size.height * heightKnob : MediaQuery.of(context).size.height * 0.7, closeProgressThreshold: closeProgressThresholdKnob, - borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadiusKnob != null + ? BorderRadius.circular(borderRadiusKnob.toDouble()) + : null, builder: (BuildContext context) => Column( children: [ Container( @@ -84,7 +86,7 @@ class BottomSheetStory extends StatelessWidget { child: Center( child: Text( 'Pick your choice!', - style: MoonTypography.typography.heading.text16, + style: MoonTypography.typography.body.text16, ), ), ), diff --git a/example/lib/src/storybook/stories/primitives/drawer.dart b/example/lib/src/storybook/stories/primitives/drawer.dart index 9a0d8966..01dae701 100644 --- a/example/lib/src/storybook/stories/primitives/drawer.dart +++ b/example/lib/src/storybook/stories/primitives/drawer.dart @@ -58,8 +58,8 @@ class DrawerStory extends StatelessWidget { borderRadius: BorderRadiusDirectional.horizontal( end: Radius.circular(borderRadiusKnob?.toDouble() ?? 0), ), - width: - drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width, + width: drawerWidthKnob?.toDouble() ?? + MediaQuery.of(context).size.width * 0.8, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ diff --git a/example/lib/src/storybook/stories/primitives/linear_progress.dart b/example/lib/src/storybook/stories/primitives/linear_progress.dart index 115e17be..9880a5a1 100644 --- a/example/lib/src/storybook/stories/primitives/linear_progress.dart +++ b/example/lib/src/storybook/stories/primitives/linear_progress.dart @@ -44,7 +44,8 @@ class LinearProgressStory extends StatelessWidget { options: colorOptions, ); - final backgroundColor = colorTable(context)[progressBackgroundColorKnob ?? 40]; + final backgroundColor = + colorTable(context)[progressBackgroundColorKnob ?? 40]; final pinColorKnob = context.knobs.nullable.options( label: "pinColor", @@ -116,13 +117,15 @@ class LinearProgressStory extends StatelessWidget { return Center( child: Padding( - padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 16), + padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 20), child: MoonLinearProgress( linearProgressSize: progressSizeKnob, value: linearProgressValueKnob, color: color, backgroundColor: backgroundColor, - borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadiusKnob != null + ? BorderRadius.circular(borderRadiusKnob.toDouble()) + : null, showMinLabel: showMinLabelKnob, showMaxLabel: showMaxLabelKnob, showPin: showPinKnob, diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart index bd2daf1b..0880280f 100644 --- a/example/lib/src/storybook/storybook.dart +++ b/example/lib/src/storybook/storybook.dart @@ -37,12 +37,14 @@ class StorybookPage extends StatelessWidget { tokens: MoonTokens.light.copyWith( colors: mdsLightColors, typography: MoonTypography.typography.copyWith( - heading: MoonTypography.typography.heading - .apply(fontFamily: "DMSans"), - body: MoonTypography.typography.body - .apply(fontFamily: "DMSans"), - caption: MoonTypography.typography.caption - .apply(fontFamily: "DMSans"), + heading: MoonTypography.typography.heading.apply( + fontFamily: "DMSans", + fontWeightDelta: -1, + fontVariations: [const FontVariation('wght', 500)], + ), + body: MoonTypography.typography.body.apply( + fontFamily: "DMSans", + ), ), ), ), @@ -55,12 +57,14 @@ class StorybookPage extends StatelessWidget { tokens: MoonTokens.dark.copyWith( colors: mdsDarkColors, typography: MoonTypography.typography.copyWith( - heading: MoonTypography.typography.heading - .apply(fontFamily: "DMSans"), - body: MoonTypography.typography.body - .apply(fontFamily: "DMSans"), - caption: MoonTypography.typography.caption - .apply(fontFamily: "DMSans"), + heading: MoonTypography.typography.heading.apply( + fontFamily: "DMSans", + fontWeightDelta: -1, + fontVariations: [const FontVariation('wght', 500)], + ), + body: MoonTypography.typography.body.apply( + fontFamily: "DMSans", + ), ), ), ), diff --git a/lib/src/theme/breadcrumb/breadcrumb_theme.dart b/lib/src/theme/breadcrumb/breadcrumb_theme.dart index 25eea95f..1cbb71e6 100644 --- a/lib/src/theme/breadcrumb/breadcrumb_theme.dart +++ b/lib/src/theme/breadcrumb/breadcrumb_theme.dart @@ -5,7 +5,8 @@ import 'package:moon_design/src/theme/breadcrumb/breadcrumb_colors.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_properties.dart'; @immutable -class MoonBreadcrumbTheme extends ThemeExtension with DiagnosticableTreeMixin { +class MoonBreadcrumbTheme extends ThemeExtension + with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; @@ -33,7 +34,7 @@ class MoonBreadcrumbTheme extends ThemeExtension with Diagn transitionCurve: tokens.transitions.defaultTransitionCurve, itemTextStyle: tokens.typography.body.textDefault, currentItemTextStyle: tokens.typography.body.textDefault, - showMoreItemTextStyle: tokens.typography.caption.textDefault, + showMoreItemTextStyle: tokens.typography.body.textDefault, ); @override @@ -50,7 +51,10 @@ class MoonBreadcrumbTheme extends ThemeExtension with Diagn } @override - MoonBreadcrumbTheme lerp(ThemeExtension? other, double t) { + MoonBreadcrumbTheme lerp( + ThemeExtension? other, + double t, + ) { if (other is! MoonBreadcrumbTheme) return this; return MoonBreadcrumbTheme( diff --git a/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart index d41d3f4b..c387a884 100644 --- a/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart +++ b/lib/src/theme/progress/linear_progress/linear_progress_sizes.dart @@ -5,7 +5,8 @@ import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_s import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable -class MoonLinearProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { +class MoonLinearProgressSizes extends ThemeExtension + with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; @@ -37,7 +38,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi progressHeight: tokens.sizes.x6s, thumbSizeValue: tokens.sizes.x3s, verticalGap: tokens.sizes.x4s, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ), x5s = x5s ?? MoonLinearProgressSizeProperties( @@ -45,7 +46,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi progressHeight: tokens.sizes.x5s, thumbSizeValue: tokens.sizes.x3s, verticalGap: tokens.sizes.x4s, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ), x4s = x4s ?? MoonLinearProgressSizeProperties( @@ -53,7 +54,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi progressHeight: tokens.sizes.x4s, thumbSizeValue: tokens.sizes.x3s, verticalGap: 6, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ), x3s = x3s ?? MoonLinearProgressSizeProperties( @@ -61,7 +62,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi progressHeight: tokens.sizes.x3s, thumbSizeValue: tokens.sizes.x2s, verticalGap: 6, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ), x2s = x2s ?? MoonLinearProgressSizeProperties( @@ -69,7 +70,7 @@ class MoonLinearProgressSizes extends ThemeExtension wi progressHeight: tokens.sizes.x2s, thumbSizeValue: tokens.sizes.x2s, verticalGap: tokens.sizes.x5s, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ); @override @@ -92,7 +93,10 @@ class MoonLinearProgressSizes extends ThemeExtension wi } @override - MoonLinearProgressSizes lerp(ThemeExtension? other, double t) { + MoonLinearProgressSizes lerp( + ThemeExtension? other, + double t, + ) { if (other is! MoonLinearProgressSizes) return this; return MoonLinearProgressSizes( diff --git a/lib/src/theme/progress_pin/progress_pin_theme.dart b/lib/src/theme/progress_pin/progress_pin_theme.dart index c428efdf..fff56798 100644 --- a/lib/src/theme/progress_pin/progress_pin_theme.dart +++ b/lib/src/theme/progress_pin/progress_pin_theme.dart @@ -6,7 +6,8 @@ import 'package:moon_design/src/theme/progress_pin/progress_pin_properties.dart' import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable -class MoonProgressPinTheme extends ThemeExtension with DiagnosticableTreeMixin { +class MoonProgressPinTheme extends ThemeExtension + with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; @@ -36,7 +37,7 @@ class MoonProgressPinTheme extends ThemeExtension with Dia pinWidth: 36, pinBorderWidth: tokens.sizes.x6s, shadowElevation: 6, - textStyle: tokens.typography.caption.text10, + textStyle: tokens.typography.body.text10, ); @override @@ -53,7 +54,10 @@ class MoonProgressPinTheme extends ThemeExtension with Dia } @override - MoonProgressPinTheme lerp(ThemeExtension? other, double t) { + MoonProgressPinTheme lerp( + ThemeExtension? other, + double t, + ) { if (other is! MoonProgressPinTheme) return this; return MoonProgressPinTheme( @@ -70,6 +74,11 @@ class MoonProgressPinTheme extends ThemeExtension with Dia ..add(DiagnosticsProperty("type", "MoonProgressPinTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) - ..add(DiagnosticsProperty("properties", properties)); + ..add( + DiagnosticsProperty( + "properties", + properties, + ), + ); } } diff --git a/lib/src/theme/switch/switch_sizes.dart b/lib/src/theme/switch/switch_sizes.dart index ccd788ba..75948779 100644 --- a/lib/src/theme/switch/switch_sizes.dart +++ b/lib/src/theme/switch/switch_sizes.dart @@ -5,7 +5,8 @@ import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable -class MoonSwitchSizes extends ThemeExtension with DiagnosticableTreeMixin { +class MoonSwitchSizes extends ThemeExtension + with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; @@ -30,7 +31,8 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl thumbSizeValue: tokens.sizes.x3s, iconSizeValue: tokens.sizes.x3s, padding: EdgeInsets.all(tokens.sizes.x6s), - textStyle: tokens.typography.caption.text6.copyWith(letterSpacing: 0), + textStyle: + tokens.typography.body.text6.copyWith(letterSpacing: 0), ), xs = xs ?? MoonSwitchSizeProperties( @@ -39,7 +41,8 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl thumbSizeValue: tokens.sizes.x2s, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.all(tokens.sizes.x5s), - textStyle: tokens.typography.caption.text8.copyWith(letterSpacing: 0.1), + textStyle: + tokens.typography.body.text8.copyWith(letterSpacing: 0.1), ), sm = sm ?? MoonSwitchSizeProperties( @@ -48,7 +51,8 @@ class MoonSwitchSizes extends ThemeExtension with Diagnosticabl thumbSizeValue: tokens.sizes.xs, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.all(tokens.sizes.x5s), - textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: 0.1), + textStyle: + tokens.typography.body.text10.copyWith(letterSpacing: 0.1), ); @override diff --git a/lib/src/theme/tokens/typography/text_styles.dart b/lib/src/theme/tokens/typography/text_styles.dart index 8c64d77b..0e2857e6 100644 --- a/lib/src/theme/tokens/typography/text_styles.dart +++ b/lib/src/theme/tokens/typography/text_styles.dart @@ -2,9 +2,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable -class MoonTextStyles extends ThemeExtension with DiagnosticableTreeMixin { - static const _semiBold = FontWeight.w500; - static const _semiBoldVariation = [FontVariation('wght', 500)]; +class MoonTextStyles extends ThemeExtension + with DiagnosticableTreeMixin { + static const _semiBold = FontWeight.w600; + static const _semiBoldVariation = [FontVariation('wght', 600)]; static const body = MoonTextStyles( textDefault: TextStyle( @@ -148,128 +149,6 @@ class MoonTextStyles extends ThemeExtension with DiagnosticableT ), ); - static const caption = MoonTextStyles( - textDefault: TextStyle( - fontSize: 14, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text6: TextStyle( - fontSize: 6, - height: 1.1, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text8: TextStyle( - fontSize: 8, - height: 1.1, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text9: TextStyle( - fontSize: 9, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text10: TextStyle( - fontSize: 10, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text12: TextStyle( - fontSize: 12, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text14: TextStyle( - fontSize: 14, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text16: TextStyle( - fontSize: 16, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text18: TextStyle( - fontSize: 18, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text20: TextStyle( - fontSize: 20, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text24: TextStyle( - fontSize: 24, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text32: TextStyle( - fontSize: 32, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text40: TextStyle( - fontSize: 40, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text48: TextStyle( - fontSize: 48, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text56: TextStyle( - fontSize: 56, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text64: TextStyle( - fontSize: 64, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - text72: TextStyle( - fontSize: 72, - height: 1.2, - letterSpacing: 1, - fontVariations: _semiBoldVariation, - fontWeight: _semiBold, - ), - ); - /// The default text size. final TextStyle textDefault; diff --git a/lib/src/theme/tokens/typography/typography.dart b/lib/src/theme/tokens/typography/typography.dart index 64df6980..b6c3b53b 100644 --- a/lib/src/theme/tokens/typography/typography.dart +++ b/lib/src/theme/tokens/typography/typography.dart @@ -4,37 +4,25 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tokens/typography/text_styles.dart'; @immutable -class MoonTypography extends ThemeExtension with DiagnosticableTreeMixin { +class MoonTypography extends ThemeExtension + with DiagnosticableTreeMixin { static const typography = MoonTypography( body: MoonTextStyles.body, - caption: MoonTextStyles.caption, heading: MoonTextStyles.heading, ); /// The text styles for the body. final MoonTextStyles body; - /// The text styles for the caption. - final MoonTextStyles caption; - /// The text styles for the heading. final MoonTextStyles heading; - const MoonTypography({ - required this.body, - required this.caption, - required this.heading, - }); + const MoonTypography({required this.body, required this.heading}); @override - MoonTypography copyWith({ - MoonTextStyles? body, - MoonTextStyles? caption, - MoonTextStyles? heading, - }) { + MoonTypography copyWith({MoonTextStyles? body, MoonTextStyles? heading}) { return MoonTypography( body: body ?? this.body, - caption: caption ?? this.caption, heading: heading ?? this.heading, ); } @@ -45,7 +33,6 @@ class MoonTypography extends ThemeExtension with DiagnosticableT return MoonTypography( body: body.lerp(other.body, t), - caption: caption.lerp(other.caption, t), heading: heading.lerp(other.heading, t), ); } @@ -56,7 +43,6 @@ class MoonTypography extends ThemeExtension with DiagnosticableT properties ..add(DiagnosticsProperty("type", "MoonTypography")) ..add(DiagnosticsProperty("body", body)) - ..add(DiagnosticsProperty("caption", caption)) ..add(DiagnosticsProperty("heading", heading)); } } diff --git a/lib/src/widgets/breadcrumb/breadcrumb.dart b/lib/src/widgets/breadcrumb/breadcrumb.dart index 6c3065c5..4ae649b9 100644 --- a/lib/src/widgets/breadcrumb/breadcrumb.dart +++ b/lib/src/widgets/breadcrumb/breadcrumb.dart @@ -101,7 +101,7 @@ class _MoonBreadcrumbState extends State { final TextStyle effectiveShowMoreItemTextStyle = theme?.properties.showMoreItemTextStyle ?? - MoonTextStyles.caption.textDefault; + MoonTextStyles.body.textDefault; final Duration effectiveTransitionDuration = theme?.properties.transitionDuration ?? diff --git a/lib/src/widgets/progress_pin/progress_pin.dart b/lib/src/widgets/progress_pin/progress_pin.dart index 71e2f1e6..8a3537ed 100644 --- a/lib/src/widgets/progress_pin/progress_pin.dart +++ b/lib/src/widgets/progress_pin/progress_pin.dart @@ -46,7 +46,7 @@ class MoonProgressPin extends StatelessWidget { final TextStyle effectiveTextStyle = pinStyle?.textStyle ?? context.moonTheme?.progressPinTheme.properties.textStyle ?? - MoonTypography.typography.caption.text10; + MoonTypography.typography.body.text10; final double effectivePinWidth = pinStyle?.pinWidth ?? context.moonTheme?.progressPinTheme.properties.pinWidth ??