From edae1b50154f5105fd0fc1a6db7b6bb22d647e2d Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Mon, 30 Mar 2026 19:37:00 +0530 Subject: [PATCH 1/3] feat(ui): update text theme values and typography styles --- .../lib/config/theme_configuration.dart | 22 ++--- .../lib/semantics/typography.dart | 58 ++++++------ .../theme/primitives/stream_typography.dart | 16 ++-- .../theme/semantics/stream_text_theme.dart | 91 ++++++++++--------- 4 files changed, 98 insertions(+), 89 deletions(-) diff --git a/apps/design_system_gallery/lib/config/theme_configuration.dart b/apps/design_system_gallery/lib/config/theme_configuration.dart index df725c1d..1e8e02b4 100644 --- a/apps/design_system_gallery/lib/config/theme_configuration.dart +++ b/apps/design_system_gallery/lib/config/theme_configuration.dart @@ -552,7 +552,7 @@ class ThemeConfiguration extends ChangeNotifier { borderRadius: dialogRadius, side: BorderSide(color: borderSubtle), ), - titleTextStyle: ts.bodyEmphasis.copyWith(color: textPrimary), + titleTextStyle: ts.headingSm.copyWith(color: textPrimary), contentTextStyle: ts.bodyDefault.copyWith(color: textSecondary), ), // AppBar @@ -652,7 +652,7 @@ class ThemeConfiguration extends ChangeNotifier { color: backgroundSurfaceStrong, borderRadius: smallRadius, ), - textStyle: ts.captionDefault.copyWith(color: textPrimary), + textStyle: ts.metadataDefault.copyWith(color: textPrimary), ), // Divider dividerTheme: DividerThemeData( @@ -661,18 +661,18 @@ class ThemeConfiguration extends ChangeNotifier { ), // Icon iconTheme: IconThemeData(color: textSecondary), - // Text - mapped to closest Stream styles by size/weight + // Text - mapped to Material 3 roles per Figma design system spec textTheme: TextTheme( - // Titles - for app bar, dialogs, navigation + // Titles - heading hierarchy titleLarge: ts.headingLg.copyWith(color: textPrimary), - titleMedium: ts.bodyEmphasis.copyWith(color: textPrimary), - titleSmall: ts.captionEmphasis.copyWith(color: textPrimary), - // Body - main content text - bodyLarge: ts.bodyEmphasis.copyWith(color: textPrimary), - bodyMedium: ts.bodyDefault.copyWith(color: textPrimary), - bodySmall: ts.captionDefault.copyWith(color: textSecondary), + titleMedium: ts.headingMd.copyWith(color: textPrimary), + titleSmall: ts.headingSm.copyWith(color: textPrimary), + // Body - content text + bodyLarge: ts.bodyDefault.copyWith(color: textPrimary), + bodyMedium: ts.captionDefault.copyWith(color: textPrimary), + bodySmall: ts.metadataDefault.copyWith(color: textSecondary), // Labels - buttons, chips, navigation items - labelLarge: ts.captionEmphasis.copyWith(color: textPrimary), + labelLarge: ts.headingXs.copyWith(color: textPrimary), labelMedium: ts.metadataEmphasis.copyWith(color: textSecondary), labelSmall: ts.metadataDefault.copyWith(color: textTertiary), ), diff --git a/apps/design_system_gallery/lib/semantics/typography.dart b/apps/design_system_gallery/lib/semantics/typography.dart index e98f788c..e86f69ee 100644 --- a/apps/design_system_gallery/lib/semantics/typography.dart +++ b/apps/design_system_gallery/lib/semantics/typography.dart @@ -49,50 +49,50 @@ class _TypeScale extends StatelessWidget { 'HEADINGS', 'Page and section titles', [ - ('headingLg', textTheme.headingLg, 'Page titles, hero text'), - ('headingMd', textTheme.headingMd, 'Section headers'), - ('headingSm', textTheme.headingSm, 'Card titles, dialogs'), - ('headingXs', textTheme.headingXs, 'Small labels, overlines'), + ('headingLg', textTheme.headingLg, 'Screen titles, channel titles'), + ('headingMd', textTheme.headingMd, 'Section headers inside screens'), + ('headingSm', textTheme.headingSm, 'Sub-section headers'), + ('headingXs', textTheme.headingXs, 'Minor labels, grouped sections'), ], ), ( 'BODY', 'Main content text', [ - ('bodyDefault', textTheme.bodyDefault, 'Paragraphs, descriptions'), - ('bodyEmphasis', textTheme.bodyEmphasis, 'Important inline text'), - ('bodyLink', textTheme.bodyLink, 'Clickable links'), - ('bodyLinkEmphasis', textTheme.bodyLinkEmphasis, 'Bold links'), + ('bodyDefault', textTheme.bodyDefault, 'Message text, primary content'), + ('bodyEmphasis', textTheme.bodyEmphasis, 'Strong inline emphasis'), + ('bodyLink', textTheme.bodyLink, 'Inline links'), + ('bodyLinkEmphasis', textTheme.bodyLinkEmphasis, 'Prominent inline links'), ], ), ( 'CAPTION', - 'Secondary and supporting text', + 'Secondary supporting text', [ - ('captionDefault', textTheme.captionDefault, 'Labels, hints'), - ('captionEmphasis', textTheme.captionEmphasis, 'Bold labels'), - ('captionLink', textTheme.captionLink, 'Small links'), - ('captionLinkEmphasis', textTheme.captionLinkEmphasis, 'Bold small links'), + ('captionDefault', textTheme.captionDefault, 'Secondary supporting text'), + ('captionEmphasis', textTheme.captionEmphasis, 'Strong supporting text'), + ('captionLink', textTheme.captionLink, 'Links in caption'), + ('captionLinkEmphasis', textTheme.captionLinkEmphasis, 'Prominent links in caption'), ], ), ( 'METADATA', 'Smallest text for auxiliary info', [ - ('metadataDefault', textTheme.metadataDefault, 'Timestamps, counts'), - ('metadataEmphasis', textTheme.metadataEmphasis, 'Bold metadata'), - ('metadataLink', textTheme.metadataLink, 'Tiny links'), - ('metadataLinkEmphasis', textTheme.metadataLinkEmphasis, 'Bold tiny links'), + ('metadataDefault', textTheme.metadataDefault, 'Timestamps, delivery status'), + ('metadataEmphasis', textTheme.metadataEmphasis, 'Highlighted metadata'), + ('metadataLink', textTheme.metadataLink, 'Metadata links'), + ('metadataLinkEmphasis', textTheme.metadataLinkEmphasis, 'Prominent metadata links'), ], ), ( 'NUMERIC', 'Numbers and counters', [ - ('numericXl', textTheme.numericXl, 'Extra large counters'), - ('numericLg', textTheme.numericLg, 'Large counters, stats'), - ('numericMd', textTheme.numericMd, 'Badges, indicators'), - ('numericSm', textTheme.numericSm, 'Small counts'), + ('numericXl', textTheme.numericXl, 'Timestamps, delivery status'), + ('numericLg', textTheme.numericLg, 'Badges, avatar initials'), + ('numericMd', textTheme.numericMd, 'Small badge counts'), + ('numericSm', textTheme.numericSm, 'Micro indicators only'), ], ), ]; @@ -414,26 +414,26 @@ class _CompleteReference extends StatelessWidget { Wrap( spacing: spacing.sm, runSpacing: spacing.sm, - children: const [ + children: [ _SizeTag( label: 'heading', - sizes: '20 / 18 / 16 / 12', + sizes: _sizesOf([textTheme.headingLg, textTheme.headingMd, textTheme.headingSm, textTheme.headingXs]), ), _SizeTag( label: 'body', - sizes: '16', + sizes: _sizesOf([textTheme.bodyDefault]), ), _SizeTag( label: 'caption', - sizes: '14', + sizes: _sizesOf([textTheme.captionDefault]), ), _SizeTag( label: 'metadata', - sizes: '12', + sizes: _sizesOf([textTheme.metadataDefault]), ), _SizeTag( label: 'numeric', - sizes: '14 / 12 / 10 / 8', + sizes: _sizesOf([textTheme.numericXl, textTheme.numericLg, textTheme.numericMd, textTheme.numericSm]), ), ], ), @@ -550,6 +550,10 @@ class _SizeTag extends StatelessWidget { } } +String _sizesOf(List styles) { + return styles.map((s) => s.fontSize?.toInt().toString() ?? '?').join(' / '); +} + class _SectionLabel extends StatelessWidget { const _SectionLabel({required this.label}); diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/stream_typography.dart b/packages/stream_core_flutter/lib/src/theme/primitives/stream_typography.dart index 4b44eeca..098424c2 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/stream_typography.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/stream_typography.dart @@ -16,7 +16,7 @@ part 'stream_typography.g.theme.dart'; /// /// ```dart /// final typography = StreamTypography(); -/// final fontSize = typography.fontSize.md; // 15.0 on iOS, 16.0 on Android +/// final fontSize = typography.fontSize.md; // 17.0 on iOS, 16.0 on Android /// ``` /// {@end-tool} /// @@ -118,7 +118,7 @@ class StreamLineHeight with _$StreamLineHeight { /// /// ```dart /// final fontSize = StreamFontSize(); -/// Text('Hello', style: TextStyle(fontSize: fontSize.md)); // 15.0 on iOS, 16.0 on Android +/// Text('Hello', style: TextStyle(fontSize: fontSize.md)); // 17.0 on iOS, 16.0 on Android /// ``` /// {@end-tool} @immutable @@ -173,12 +173,12 @@ class StreamFontSize with _$StreamFontSize { /// Uses San Francisco font sizing conventions. static const StreamFontSize ios = .raw( micro: 8, - xxs: 10, - xs: 12, - sm: 13, - md: 15, - lg: 17, - xl: 20, + xxs: 12, + xs: 13, + sm: 15, + md: 17, + lg: 20, + xl: 22, xxl: 24, ); diff --git a/packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.dart b/packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.dart index 088afbf5..4a27553f 100644 --- a/packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.dart +++ b/packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.dart @@ -74,21 +74,21 @@ class StreamTextTheme with _$StreamTextTheme { headingMd ??= TextStyle( fontSize: fontSize.lg, fontWeight: fontWeight.semibold, - height: lineHeight.normal / fontSize.lg, + height: lineHeight.relaxed / fontSize.lg, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); headingSm ??= TextStyle( fontSize: fontSize.md, fontWeight: fontWeight.semibold, - height: lineHeight.tight / fontSize.md, + height: lineHeight.normal / fontSize.md, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); headingXs ??= TextStyle( - fontSize: fontSize.xs, + fontSize: fontSize.sm, fontWeight: fontWeight.semibold, - height: lineHeight.tight / fontSize.xs, + height: lineHeight.normal / fontSize.sm, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); @@ -127,28 +127,28 @@ class StreamTextTheme with _$StreamTextTheme { captionDefault ??= TextStyle( fontSize: fontSize.sm, fontWeight: fontWeight.regular, - height: lineHeight.tight / fontSize.sm, + height: lineHeight.normal / fontSize.sm, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); captionEmphasis ??= TextStyle( fontSize: fontSize.sm, fontWeight: fontWeight.semibold, - height: lineHeight.tight / fontSize.sm, + height: lineHeight.normal / fontSize.sm, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); captionLink ??= TextStyle( fontSize: fontSize.sm, fontWeight: fontWeight.regular, - height: lineHeight.tight / fontSize.sm, + height: lineHeight.normal / fontSize.sm, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); captionLinkEmphasis ??= TextStyle( fontSize: fontSize.sm, fontWeight: fontWeight.semibold, - height: lineHeight.tight / fontSize.sm, + height: lineHeight.normal / fontSize.sm, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); @@ -187,28 +187,28 @@ class StreamTextTheme with _$StreamTextTheme { numericXl ??= TextStyle( fontSize: fontSize.sm, fontWeight: fontWeight.bold, - height: 14 / fontSize.sm, + height: 1, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); numericLg ??= TextStyle( fontSize: fontSize.xs, fontWeight: fontWeight.bold, - height: 12 / fontSize.xs, + height: 1, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); numericMd ??= TextStyle( fontSize: fontSize.xxs, fontWeight: fontWeight.bold, - height: 10 / fontSize.xxs, + height: 1, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); numericSm ??= TextStyle( fontSize: fontSize.micro, fontWeight: fontWeight.bold, - height: 8 / fontSize.micro, + height: 1, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ); @@ -260,104 +260,109 @@ class StreamTextTheme with _$StreamTextTheme { required this.numericSm, }); - /// Large heading text style. + /// Large heading text style for screen titles and channel titles. /// /// Uses semibold weight, xl font size, and relaxed line height. final TextStyle headingLg; - /// Medium heading text style. + /// Medium heading text style for section headers inside screens. /// - /// Uses semibold weight, lg font size, and normal line height. + /// Uses semibold weight, lg font size, and relaxed line height. final TextStyle headingMd; - /// Small heading text style. + /// Small heading text style for sub-section headers. /// - /// Uses semibold weight, md font size, and tight line height. + /// Uses semibold weight, md font size, and normal line height. final TextStyle headingSm; - /// Extra small heading text style. + /// Extra small heading text style for minor labels and grouped sections. /// - /// Uses semibold weight, xs font size, and tight line height. + /// Uses medium weight (iOS) or semibold weight (Android), sm font size, + /// and normal line height. final TextStyle headingXs; - /// Default body text style. + /// Default body text style for message text and primary content. /// /// Uses regular weight, md font size, and normal line height. final TextStyle bodyDefault; - /// Emphasized body text style. + /// Emphasized body text style for strong inline emphasis. /// /// Uses semibold weight, md font size, and normal line height. final TextStyle bodyEmphasis; - /// Body link text style. + /// Body link text style for inline links. /// /// Uses regular weight, md font size, and normal line height. final TextStyle bodyLink; - /// Emphasized body link text style. + /// Emphasized body link text style for prominent inline links. /// /// Uses semibold weight, md font size, and normal line height. final TextStyle bodyLinkEmphasis; - /// Default caption text style. + /// Default caption text style for secondary supporting text. /// - /// Uses regular weight, sm font size, and tight line height. + /// Uses regular weight, sm font size, and normal (iOS) or tight (Android) + /// line height. final TextStyle captionDefault; - /// Emphasized caption text style. + /// Emphasized caption text style for strong supporting text. /// - /// Uses semibold weight, sm font size, and tight line height. + /// Uses semibold weight, sm font size, and normal (iOS) or tight (Android) + /// line height. final TextStyle captionEmphasis; - /// Caption link text style. + /// Caption link text style for links in caption. /// - /// Uses regular weight, sm font size, and tight line height. + /// Uses regular weight, sm font size, and normal (iOS) or tight (Android) + /// line height. final TextStyle captionLink; - /// Emphasized caption link text style. + /// Emphasized caption link text style for prominent links in caption. /// - /// Uses semibold weight, sm font size, and tight line height. + /// Uses semibold weight, sm font size, and normal (iOS) or tight (Android) + /// line height. final TextStyle captionLinkEmphasis; - /// Default metadata text style. + /// Default metadata text style for timestamps and delivery status. /// /// Uses regular weight, xs font size, and tight line height. final TextStyle metadataDefault; - /// Emphasized metadata text style. + /// Emphasized metadata text style for highlighted metadata. /// /// Uses semibold weight, xs font size, and tight line height. final TextStyle metadataEmphasis; - /// Metadata link text style. + /// Metadata link text style for metadata links. /// /// Uses regular weight, xs font size, and tight line height. final TextStyle metadataLink; - /// Emphasized metadata link text style. + /// Emphasized metadata link text style for prominent metadata links. /// /// Uses semibold weight, xs font size, and tight line height. final TextStyle metadataLinkEmphasis; - /// Extra large numeric text style. + /// Extra large numeric text style for timestamps and delivery status. /// - /// Uses bold weight and sm font size. Optimized for displaying numbers. + /// Uses bold weight, sm font size, and 100% line height. final TextStyle numericXl; - /// Large numeric text style. + /// Large numeric text style for badges and avatar initials. /// - /// Uses bold weight and xs font size. Optimized for displaying numbers. + /// Uses bold weight, xs font size, and 100% line height. final TextStyle numericLg; - /// Medium numeric text style. + /// Medium numeric text style for small badge counts. /// - /// Uses bold weight and xxs font size. Optimized for displaying numbers. + /// Uses bold weight, xxs font size, and 100% line height. final TextStyle numericMd; - /// Small numeric text style. + /// Small numeric text style for micro indicators only. /// - /// Uses bold weight and micro font size. Optimized for displaying numbers. + /// Uses bold weight, micro font size, and 100% line height. final TextStyle numericSm; /// Linearly interpolates between this and another [StreamTextTheme]. From 766620d978b194bee517e4960510ddca968ca53f Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Mon, 30 Mar 2026 19:46:17 +0530 Subject: [PATCH 2/3] chore: melos format --- .../lib/semantics/typography.dart | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/design_system_gallery/lib/semantics/typography.dart b/apps/design_system_gallery/lib/semantics/typography.dart index e86f69ee..f54b17d8 100644 --- a/apps/design_system_gallery/lib/semantics/typography.dart +++ b/apps/design_system_gallery/lib/semantics/typography.dart @@ -417,7 +417,12 @@ class _CompleteReference extends StatelessWidget { children: [ _SizeTag( label: 'heading', - sizes: _sizesOf([textTheme.headingLg, textTheme.headingMd, textTheme.headingSm, textTheme.headingXs]), + sizes: _sizesOf([ + textTheme.headingLg, + textTheme.headingMd, + textTheme.headingSm, + textTheme.headingXs, + ]), ), _SizeTag( label: 'body', @@ -433,7 +438,12 @@ class _CompleteReference extends StatelessWidget { ), _SizeTag( label: 'numeric', - sizes: _sizesOf([textTheme.numericXl, textTheme.numericLg, textTheme.numericMd, textTheme.numericSm]), + sizes: _sizesOf([ + textTheme.numericXl, + textTheme.numericLg, + textTheme.numericMd, + textTheme.numericSm, + ]), ), ], ), From 43f8c89d879c77ef4a48ab1d5e87bb833bcfa284 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Mon, 30 Mar 2026 22:59:28 +0530 Subject: [PATCH 3/3] feat(ui): update text theme usage across message components --- .../message/stream_message_annotation.dart | 17 +++++------ .../message/stream_message_attachment.dart | 14 ++++----- .../message/stream_message_bubble.dart | 14 ++++----- .../message/stream_message_content.dart | 14 ++++----- .../message/stream_message_metadata.dart | 17 +++++------ .../message/stream_message_replies.dart | 17 +++++------ .../message/stream_message_text.dart | 29 ++++++++----------- ...sage_composer_attachment_link_preview.dart | 8 ++--- ...essage_composer_attachment_media_file.dart | 8 ++--- .../message_composer_attachment_reply.dart | 8 ++--- .../message_composer_file_attachment.dart | 12 ++++---- .../lib/semantics/typography.dart | 6 ++-- .../theme_studio/avatar_palette_section.dart | 6 ++-- .../theme_studio/color_picker_tile.dart | 8 ++--- .../lib/widgets/theme_studio/mode_button.dart | 3 +- .../theme_customization_panel.dart | 12 ++++---- .../lib/widgets/toolbar/device_selector.dart | 4 +-- .../widgets/toolbar/platform_selector.dart | 4 +-- .../toolbar/text_direction_selector.dart | 4 +-- .../widgets/toolbar/text_scale_selector.dart | 4 +-- .../lib/widgets/toolbar/toolbar.dart | 4 +-- 21 files changed, 92 insertions(+), 121 deletions(-) diff --git a/apps/design_system_gallery/lib/components/message/stream_message_annotation.dart b/apps/design_system_gallery/lib/components/message/stream_message_annotation.dart index 57783bbd..0bd0cd1d 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_annotation.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_annotation.dart @@ -385,6 +385,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -398,8 +399,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -419,11 +419,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -446,6 +445,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -468,17 +468,14 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), if (subtitle case final sub?) Text( sub, - style: TextStyle( - fontSize: 12, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_attachment.dart b/apps/design_system_gallery/lib/components/message/stream_message_attachment.dart index 35dfd177..7f36013a 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_attachment.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_attachment.dart @@ -366,6 +366,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -379,8 +380,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -400,11 +400,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -425,6 +424,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -443,9 +443,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_bubble.dart b/apps/design_system_gallery/lib/components/message/stream_message_bubble.dart index e820b28f..1f5c1f37 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_bubble.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_bubble.dart @@ -322,6 +322,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -335,8 +336,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -356,11 +356,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -381,6 +380,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -399,9 +399,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_content.dart b/apps/design_system_gallery/lib/components/message/stream_message_content.dart index 4f32b442..03ea0ddc 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_content.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_content.dart @@ -684,6 +684,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -697,8 +698,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -718,11 +718,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -743,6 +742,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -761,9 +761,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_metadata.dart b/apps/design_system_gallery/lib/components/message/stream_message_metadata.dart index dbe51e64..ef759dfa 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_metadata.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_metadata.dart @@ -429,6 +429,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -442,8 +443,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -463,11 +463,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -490,6 +489,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -512,17 +512,14 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), if (subtitle case final sub?) Text( sub, - style: TextStyle( - fontSize: 12, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_replies.dart b/apps/design_system_gallery/lib/components/message/stream_message_replies.dart index 1199b568..b97b1c67 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_replies.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_replies.dart @@ -551,6 +551,7 @@ class _Section extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -564,8 +565,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle( - fontSize: 13, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), @@ -585,11 +585,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -614,6 +613,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -636,17 +636,14 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), if (subtitle case final sub?) Text( sub, - style: TextStyle( - fontSize: 12, + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ), diff --git a/apps/design_system_gallery/lib/components/message/stream_message_text.dart b/apps/design_system_gallery/lib/components/message/stream_message_text.dart index 64b9fc96..b1102b0b 100644 --- a/apps/design_system_gallery/lib/components/message/stream_message_text.dart +++ b/apps/design_system_gallery/lib/components/message/stream_message_text.dart @@ -908,6 +908,7 @@ class _CopyableCodeBlockState extends State<_CopyableCodeBlock> { @override Widget build(BuildContext context) { final cs = widget.colorScheme; + final ts = context.streamTextTheme; return DecoratedBox( decoration: BoxDecoration( @@ -929,9 +930,7 @@ class _CopyableCodeBlockState extends State<_CopyableCodeBlock> { if (widget.language.isNotEmpty) Text( widget.language, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.w500, + style: ts.metadataEmphasis.copyWith( color: cs.textSecondary, ), ), @@ -944,13 +943,12 @@ class _CopyableCodeBlockState extends State<_CopyableCodeBlock> { Icon( _copied ? Icons.check : Icons.copy, size: 14, - color: _copied ? Colors.green : cs.textTertiary, + color: _copied ? cs.accentSuccess : cs.textTertiary, ), Text( _copied ? 'Copied!' : 'Copy', - style: TextStyle( - fontSize: 12, - color: _copied ? Colors.green : cs.textTertiary, + style: ts.metadataDefault.copyWith( + color: _copied ? cs.accentSuccess : cs.textTertiary, ), ), ], @@ -963,9 +961,8 @@ class _CopyableCodeBlockState extends State<_CopyableCodeBlock> { padding: const EdgeInsets.all(12), child: SelectableText( widget.code, - style: TextStyle( + style: ts.metadataDefault.copyWith( fontFamily: 'monospace', - fontSize: 13, color: cs.textPrimary, ), ), @@ -1019,7 +1016,7 @@ class _Section extends StatelessWidget { if (description case final desc?) Text( desc, - style: TextStyle(fontSize: 13, color: colorScheme.textTertiary), + style: context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary), ), ], ), @@ -1037,11 +1034,10 @@ class _SectionLabel extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; + final textTheme = context.streamTextTheme; return Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: textTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), @@ -1064,6 +1060,7 @@ class _ExampleCard extends StatelessWidget { Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; final radius = context.streamRadius; + final textTheme = context.streamTextTheme; return Container( width: double.infinity, @@ -1086,16 +1083,14 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w500, + style: textTheme.metadataEmphasis.copyWith( color: colorScheme.textSecondary, ), ), if (subtitle case final sub?) Text( sub, - style: TextStyle(fontSize: 12, color: colorScheme.textTertiary), + style: textTheme.metadataDefault.copyWith(color: colorScheme.textTertiary), ), ], ), diff --git a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_link_preview.dart b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_link_preview.dart index d10e2790..67e83d09 100644 --- a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_link_preview.dart +++ b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_link_preview.dart @@ -163,15 +163,13 @@ class _Section extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: context.streamTextTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), ), if (description case final desc?) - Text(desc, style: TextStyle(fontSize: 13, color: colorScheme.textTertiary)), + Text(desc, style: context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary)), ], ), ...children, @@ -208,7 +206,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colorScheme.textSecondary), + style: context.streamTextTheme.metadataEmphasis.copyWith(color: colorScheme.textSecondary), ), child, ], diff --git a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_media_file.dart b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_media_file.dart index a9e36380..d88b64f6 100644 --- a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_media_file.dart +++ b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_media_file.dart @@ -204,15 +204,13 @@ class _Section extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: context.streamTextTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), ), if (description case final desc?) - Text(desc, style: TextStyle(fontSize: 13, color: colorScheme.textTertiary)), + Text(desc, style: context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary)), ], ), ...children, @@ -249,7 +247,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colorScheme.textSecondary), + style: context.streamTextTheme.metadataEmphasis.copyWith(color: colorScheme.textSecondary), ), child, ], diff --git a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_reply.dart b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_reply.dart index 6c6318fe..08449bd3 100644 --- a/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_reply.dart +++ b/apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_reply.dart @@ -191,15 +191,13 @@ class _Section extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: context.streamTextTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), ), if (description case final desc?) - Text(desc, style: TextStyle(fontSize: 13, color: colorScheme.textTertiary)), + Text(desc, style: context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary)), ], ), ...children, @@ -236,7 +234,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colorScheme.textSecondary), + style: context.streamTextTheme.metadataEmphasis.copyWith(color: colorScheme.textSecondary), ), child, ], diff --git a/apps/design_system_gallery/lib/components/message_composer/message_composer_file_attachment.dart b/apps/design_system_gallery/lib/components/message_composer/message_composer_file_attachment.dart index cbb82f3e..53bb9cb4 100644 --- a/apps/design_system_gallery/lib/components/message_composer/message_composer_file_attachment.dart +++ b/apps/design_system_gallery/lib/components/message_composer/message_composer_file_attachment.dart @@ -48,7 +48,7 @@ Widget buildMessageComposerFileAttachmentPlayground(BuildContext context) { subtitle: showSubtitle ? Text( '2.4 MB', - style: TextStyle(fontSize: 12, color: context.streamColorScheme.textTertiary), + style: context.streamTextTheme.metadataDefault.copyWith(color: context.streamColorScheme.textTertiary), ) : null, onRemovePressed: showRemoveButton ? () {} : null, @@ -132,7 +132,7 @@ class _WithSubtitleSection extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = context.streamColorScheme; - final subtitleStyle = TextStyle(fontSize: 12, color: colorScheme.textTertiary); + final subtitleStyle = context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary); return _Section( label: 'WITH SUBTITLE', @@ -189,15 +189,13 @@ class _Section extends StatelessWidget { children: [ Text( label, - style: TextStyle( - fontSize: 11, - fontWeight: FontWeight.w600, + style: context.streamTextTheme.metadataEmphasis.copyWith( letterSpacing: 1.2, color: colorScheme.accentPrimary, ), ), if (description case final desc?) - Text(desc, style: TextStyle(fontSize: 13, color: colorScheme.textTertiary)), + Text(desc, style: context.streamTextTheme.metadataDefault.copyWith(color: colorScheme.textTertiary)), ], ), ...children, @@ -234,7 +232,7 @@ class _ExampleCard extends StatelessWidget { children: [ Text( label, - style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colorScheme.textSecondary), + style: context.streamTextTheme.metadataEmphasis.copyWith(color: colorScheme.textSecondary), ), child, ], diff --git a/apps/design_system_gallery/lib/semantics/typography.dart b/apps/design_system_gallery/lib/semantics/typography.dart index f54b17d8..cb9364a5 100644 --- a/apps/design_system_gallery/lib/semantics/typography.dart +++ b/apps/design_system_gallery/lib/semantics/typography.dart @@ -266,12 +266,12 @@ class _TypeStyleCard extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Row( + Wrap( + spacing: spacing.xs + spacing.xxs, + runSpacing: spacing.xs, children: [ _SpecChip(label: '${size}px'), - SizedBox(width: spacing.xs + spacing.xxs), _SpecChip(label: weight), - SizedBox(width: spacing.xs + spacing.xxs), _SpecChip(label: '${lineHeight.toStringAsFixed(1)}×'), ], ), diff --git a/apps/design_system_gallery/lib/widgets/theme_studio/avatar_palette_section.dart b/apps/design_system_gallery/lib/widgets/theme_studio/avatar_palette_section.dart index b0e0645b..4c0ea7a1 100644 --- a/apps/design_system_gallery/lib/widgets/theme_studio/avatar_palette_section.dart +++ b/apps/design_system_gallery/lib/widgets/theme_studio/avatar_palette_section.dart @@ -32,7 +32,7 @@ class AvatarColorPairTile extends StatelessWidget { padding: EdgeInsets.all(spacing.sm + spacing.xxs), clipBehavior: Clip.antiAlias, decoration: BoxDecoration( - color: colorScheme.backgroundApp, + color: colorScheme.backgroundSurfaceSubtle, borderRadius: BorderRadius.all(radius.md), ), foregroundDecoration: BoxDecoration( @@ -55,7 +55,7 @@ class AvatarColorPairTile extends StatelessWidget { child: Center( child: Text( 'AB', - style: textTheme.captionEmphasis.copyWith( + style: textTheme.metadataEmphasis.copyWith( color: pair.foregroundColor, ), ), @@ -134,7 +134,7 @@ class AvatarColorPairTile extends StatelessWidget { builder: (context) => AlertDialog( title: Text( label, - style: textTheme.bodyEmphasis.copyWith( + style: textTheme.headingSm.copyWith( fontFamily: 'monospace', ), ), diff --git a/apps/design_system_gallery/lib/widgets/theme_studio/color_picker_tile.dart b/apps/design_system_gallery/lib/widgets/theme_studio/color_picker_tile.dart index a39d75a7..0968e0d7 100644 --- a/apps/design_system_gallery/lib/widgets/theme_studio/color_picker_tile.dart +++ b/apps/design_system_gallery/lib/widgets/theme_studio/color_picker_tile.dart @@ -32,7 +32,7 @@ class ColorPickerTile extends StatelessWidget { padding: EdgeInsets.symmetric(horizontal: spacing.sm + spacing.xxs, vertical: spacing.sm), clipBehavior: Clip.antiAlias, decoration: BoxDecoration( - color: colorScheme.backgroundApp, + color: colorScheme.backgroundSurfaceSubtle, borderRadius: BorderRadius.all(radius.sm), ), foregroundDecoration: BoxDecoration( @@ -61,7 +61,7 @@ class ColorPickerTile extends StatelessWidget { Expanded( child: Text( label, - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textPrimary, fontFamily: 'monospace', ), @@ -75,7 +75,7 @@ class ColorPickerTile extends StatelessWidget { ), ), SizedBox(width: spacing.xs + spacing.xxs), - Icon(Icons.edit, color: colorScheme.textTertiary, size: 12), + Icon(Icons.edit, color: colorScheme.textSecondary, size: 12), ], ), ), @@ -97,7 +97,7 @@ class ColorPickerTile extends StatelessWidget { builder: (context) => AlertDialog( title: Text( label, - style: textTheme.bodyEmphasis.copyWith( + style: textTheme.headingSm.copyWith( fontFamily: 'monospace', ), ), diff --git a/apps/design_system_gallery/lib/widgets/theme_studio/mode_button.dart b/apps/design_system_gallery/lib/widgets/theme_studio/mode_button.dart index f3a2fd5c..6fc61bc2 100644 --- a/apps/design_system_gallery/lib/widgets/theme_studio/mode_button.dart +++ b/apps/design_system_gallery/lib/widgets/theme_studio/mode_button.dart @@ -52,9 +52,8 @@ class ThemeStudioModeButton extends StatelessWidget { SizedBox(height: spacing.xs), Text( label, - style: textTheme.captionEmphasis.copyWith( + style: textTheme.metadataDefault.copyWith( color: isSelected ? colorScheme.accentPrimary : colorScheme.textTertiary, - fontSize: 11, ), ), ], diff --git a/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart b/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart index 0c37c151..253fc62b 100644 --- a/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart +++ b/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart @@ -59,7 +59,7 @@ class _ThemeCustomizationPanelState extends State { return Container( decoration: BoxDecoration( - color: colorScheme.backgroundApp, + color: colorScheme.backgroundSurfaceSubtle, ), foregroundDecoration: BoxDecoration( border: .symmetric( @@ -139,7 +139,7 @@ class _ThemeCustomizationPanelState extends State { children: [ Text( 'Theme Studio', - style: textTheme.bodyEmphasis.copyWith( + style: textTheme.headingXs.copyWith( color: colorScheme.textPrimary, ), ), @@ -387,8 +387,8 @@ class _ThemeCustomizationPanelState extends State { SizedBox(height: spacing.xs), Text( 'Surface', - style: context.streamTextTheme.captionEmphasis.copyWith( - color: context.streamColorScheme.textTertiary, + style: context.streamTextTheme.metadataEmphasis.copyWith( + color: context.streamColorScheme.textSecondary, ), ), SizedBox(height: spacing.xs), @@ -415,8 +415,8 @@ class _ThemeCustomizationPanelState extends State { SizedBox(height: spacing.xs), Text( 'Elevation', - style: context.streamTextTheme.captionEmphasis.copyWith( - color: context.streamColorScheme.textTertiary, + style: context.streamTextTheme.metadataEmphasis.copyWith( + color: context.streamColorScheme.textSecondary, ), ), SizedBox(height: spacing.xs), diff --git a/apps/design_system_gallery/lib/widgets/toolbar/device_selector.dart b/apps/design_system_gallery/lib/widgets/toolbar/device_selector.dart index 75df3efc..069bf94e 100644 --- a/apps/design_system_gallery/lib/widgets/toolbar/device_selector.dart +++ b/apps/design_system_gallery/lib/widgets/toolbar/device_selector.dart @@ -41,7 +41,7 @@ class DeviceSelector extends StatelessWidget { color: colorScheme.textTertiary, size: 16, ), - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textPrimary, ), dropdownColor: colorScheme.backgroundSurface, @@ -61,7 +61,7 @@ class DeviceSelector extends StatelessWidget { color: colorScheme.textTertiary, ), SizedBox(width: spacing.sm), - Text(device.name, style: textTheme.captionDefault), + Text(device.name, style: textTheme.metadataDefault), ], ), ); diff --git a/apps/design_system_gallery/lib/widgets/toolbar/platform_selector.dart b/apps/design_system_gallery/lib/widgets/toolbar/platform_selector.dart index c7f8bc9d..76919d3a 100644 --- a/apps/design_system_gallery/lib/widgets/toolbar/platform_selector.dart +++ b/apps/design_system_gallery/lib/widgets/toolbar/platform_selector.dart @@ -43,7 +43,7 @@ class PlatformSelector extends StatelessWidget { color: colorScheme.textTertiary, size: 16, ), - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textPrimary, ), dropdownColor: colorScheme.backgroundSurface, @@ -61,7 +61,7 @@ class PlatformSelector extends StatelessWidget { SizedBox(width: spacing.sm), Text( _labelFor(platform), - style: textTheme.captionDefault, + style: textTheme.metadataDefault, ), ], ), diff --git a/apps/design_system_gallery/lib/widgets/toolbar/text_direction_selector.dart b/apps/design_system_gallery/lib/widgets/toolbar/text_direction_selector.dart index 5dc8b41b..d2c6748d 100644 --- a/apps/design_system_gallery/lib/widgets/toolbar/text_direction_selector.dart +++ b/apps/design_system_gallery/lib/widgets/toolbar/text_direction_selector.dart @@ -40,7 +40,7 @@ class TextDirectionSelector extends StatelessWidget { color: colorScheme.textTertiary, size: 16, ), - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textPrimary, ), dropdownColor: colorScheme.backgroundSurface, @@ -59,7 +59,7 @@ class TextDirectionSelector extends StatelessWidget { SizedBox(width: spacing.sm), Text( isLtr ? 'LTR' : 'RTL', - style: textTheme.captionDefault, + style: textTheme.metadataDefault, ), ], ), diff --git a/apps/design_system_gallery/lib/widgets/toolbar/text_scale_selector.dart b/apps/design_system_gallery/lib/widgets/toolbar/text_scale_selector.dart index 0aece508..17190a1b 100644 --- a/apps/design_system_gallery/lib/widgets/toolbar/text_scale_selector.dart +++ b/apps/design_system_gallery/lib/widgets/toolbar/text_scale_selector.dart @@ -40,7 +40,7 @@ class TextScaleSelector extends StatelessWidget { color: colorScheme.textTertiary, size: 16, ), - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textPrimary, ), dropdownColor: colorScheme.backgroundSurface, @@ -58,7 +58,7 @@ class TextScaleSelector extends StatelessWidget { SizedBox(width: spacing.sm), Text( '${(scale * 100).toInt()}%', - style: textTheme.captionDefault, + style: textTheme.metadataDefault, ), ], ), diff --git a/apps/design_system_gallery/lib/widgets/toolbar/toolbar.dart b/apps/design_system_gallery/lib/widgets/toolbar/toolbar.dart index 25e1b429..21b17502 100644 --- a/apps/design_system_gallery/lib/widgets/toolbar/toolbar.dart +++ b/apps/design_system_gallery/lib/widgets/toolbar/toolbar.dart @@ -154,14 +154,14 @@ class _StreamBranding extends StatelessWidget { children: [ Text( 'Stream', - style: textTheme.headingSm.copyWith( + style: textTheme.headingXs.copyWith( color: colorScheme.textPrimary, letterSpacing: -0.5, ), ), Text( 'Design System', - style: textTheme.captionDefault.copyWith( + style: textTheme.metadataDefault.copyWith( color: colorScheme.textTertiary, ), ),