upd typography

MewsSystems · Jan 29, 2024 · 8b62346 · 8b62346
1 parent c9e2ef5
commit 8b62346
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 49 deletions.
diff --git a/optimus/lib/src/dialogs/dialog_content.dart b/optimus/lib/src/dialogs/dialog_content.dart
@@ -136,7 +136,7 @@ class _Title extends StatelessWidget {
         Expanded(
           child: Padding(
             padding: EdgeInsets.all(tokens.spacing200),
-            child: OptimusSubsectionTitle(child: title),
+            child: OptimusTitleSmall(child: title),
           ),
         ),
         if (isDismissible)

diff --git a/optimus/lib/src/typography/highlight.dart b/optimus/lib/src/typography/highlight.dart
@@ -9,10 +9,10 @@ import 'package:optimus/src/typography/typography.dart';
 /// such as price or dates.
 /// {@endtemplate}
 ///
-/// [OptimusHighlightMajor] - The highest form of emphasis. Use sporadically
+/// [OptimusHighlightLarge] - The highest form of emphasis. Use sporadically
 /// for maximum impact.
-class OptimusHighlightMajor extends StatelessWidget {
-  const OptimusHighlightMajor({
+class OptimusHighlightLarge extends StatelessWidget {
+  const OptimusHighlightLarge({
     super.key,
     this.align,
     required this.child,
@@ -35,10 +35,10 @@ class OptimusHighlightMajor extends StatelessWidget {
 
 /// {@macro optimus.typography.highlight}
 ///
-/// [OptimusHighlightModerate] - Medium level of emphasis. Used without
+/// [OptimusHighlightMedium] - Medium level of emphasis. Used without
 /// limitations across the page.
-class OptimusHighlightModerate extends StatelessWidget {
-  const OptimusHighlightModerate({
+class OptimusHighlightMedium extends StatelessWidget {
+  const OptimusHighlightMedium({
     super.key,
     this.align,
     required this.child,
@@ -61,10 +61,10 @@ class OptimusHighlightModerate extends StatelessWidget {
 
 /// {@macro optimus.typography.highlight}
 ///
-/// [OptimusHighlightMinor] - Low level of emphasis. Used without limitations
+/// [OptimusHighlightSmall] - Low level of emphasis. Used without limitations
 /// across the page.
-class OptimusHighlightMinor extends StatelessWidget {
-  const OptimusHighlightMinor({
+class OptimusHighlightSmall extends StatelessWidget {
+  const OptimusHighlightSmall({
     super.key,
     this.align,
     required this.child,

diff --git a/optimus/lib/src/typography/presets.dart b/optimus/lib/src/typography/presets.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:optimus/optimus.dart';
 
 /// To make the overall experience convenient and useful.
@@ -17,12 +18,10 @@ enum _Scale {
   light,
 }
 
-extension on Breakpoint {
-  _Scale get scale => switch (this) {
-        Breakpoint.extraSmall ||
-        Breakpoint.small ||
-        Breakpoint.medium =>
-          _Scale.dense,
-        Breakpoint.large || Breakpoint.extraLarge => _Scale.light,
+extension Scaled on Breakpoint {
+  TextStyle getScaled({required TextStyle dense, required TextStyle light}) =>
+      switch (this) {
+        Breakpoint.extraSmall || Breakpoint.small || Breakpoint.medium => dense,
+        Breakpoint.large || Breakpoint.extraLarge => light,
       };
 }
diff --git a/optimus/lib/src/typography/title.dart b/optimus/lib/src/typography/title.dart
@@ -8,9 +8,9 @@ import 'package:optimus/src/typography/typography.dart';
 /// essential information quickly.
 /// {@endtemplate}
 ///
-/// [OptimusPageTitle] - is used only once per page (with exceptions).
-class OptimusPageTitle extends StatelessWidget {
-  const OptimusPageTitle({
+/// [OptimusTitleLarge] - is used only once per page (with exceptions).
+class OptimusTitleLarge extends StatelessWidget {
+  const OptimusTitleLarge({
     super.key,
     this.align,
     required this.child,
@@ -32,9 +32,9 @@ class OptimusPageTitle extends StatelessWidget {
 
 /// {@macro optimus.typography.title}
 ///
-/// [OptimusSectionTitle] - is used to divide individual sections of the page.
-class OptimusSectionTitle extends StatelessWidget {
-  const OptimusSectionTitle({
+/// [OptimusTitleMedium] - is used to divide individual sections of the page.
+class OptimusTitleMedium extends StatelessWidget {
+  const OptimusTitleMedium({
     super.key,
     this.align,
     required this.child,
@@ -56,10 +56,10 @@ class OptimusSectionTitle extends StatelessWidget {
 
 /// {@macro optimus.typography.title}
 ///
-/// [OptimusSubsectionTitle] is used to further divide a specific section
+/// [OptimusTitleSmall] is used to further divide a specific section
 /// into subsections.
-class OptimusSubsectionTitle extends StatelessWidget {
-  const OptimusSubsectionTitle({
+class OptimusTitleSmall extends StatelessWidget {
+  const OptimusTitleSmall({
     super.key,
     this.align,
     required this.child,
@@ -73,7 +73,7 @@ class OptimusSubsectionTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => OptimusTypography(
-        resolveStyle: (_) => context.tokens.titleSmallStrong,
+        resolveStyle: (_) => context.tokens.titleSmall,
         align: align,
         child: child,
       );

diff --git a/storybook/lib/stories/dialog.dart b/storybook/lib/stories/dialog.dart
@@ -24,7 +24,7 @@ final Story dialogStory = Story(
           children: [
             const Padding(
               padding: EdgeInsets.only(top: 24, bottom: 16),
-              child: OptimusSectionTitle(child: Text('Small dialog')),
+              child: OptimusTitleMedium(child: Text('Small dialog')),
             ),
             Wrap(
               spacing: 8,
@@ -69,7 +69,7 @@ final Story dialogStory = Story(
             ),
             const Padding(
               padding: EdgeInsets.only(top: 24, bottom: 16),
-              child: OptimusSectionTitle(child: Text('Regular dialog')),
+              child: OptimusTitleMedium(child: Text('Regular dialog')),
             ),
             Wrap(
               spacing: 8,
@@ -114,7 +114,7 @@ final Story dialogStory = Story(
             ),
             const Padding(
               padding: EdgeInsets.only(top: 24, bottom: 16),
-              child: OptimusSectionTitle(child: Text('Large dialog')),
+              child: OptimusTitleMedium(child: Text('Large dialog')),
             ),
             Wrap(
               spacing: 8,
@@ -159,7 +159,7 @@ final Story dialogStory = Story(
             ),
             const Padding(
               padding: EdgeInsets.only(top: 24, bottom: 16),
-              child: OptimusSectionTitle(child: Text('Custom content')),
+              child: OptimusTitleMedium(child: Text('Custom content')),
             ),
             Wrap(
               spacing: 8,

diff --git a/storybook/lib/stories/icon/icon.dart b/storybook/lib/stories/icon/icon.dart
@@ -22,7 +22,7 @@ final Story iconStory = Story(
       children: OptimusIconColorOption.values
           .map(
             (c) => OptimusListTile(
-              title: OptimusSubsectionTitle(
+              title: OptimusTitleSmall(
                 child: Text(c.name.toUpperCase()),
               ),
               prefix: OptimusIcon(
@@ -51,7 +51,7 @@ final Story supplementaryIconStory = Story(
       children: OptimusIconColorOption.values
           .map(
             (c) => OptimusListTile(
-              title: OptimusSubsectionTitle(
+              title: OptimusTitleSmall(
                 child: Text(c.name.toUpperCase()),
               ),
               prefix: OptimusSupplementaryIcon(

diff --git a/storybook/lib/stories/loader.dart b/storybook/lib/stories/loader.dart
@@ -26,14 +26,14 @@ final Story loaderStory = Story(
       spacing: OptimusStackSpacing.spacing100,
       mainAxisSize: MainAxisSize.min,
       children: [
-        const OptimusSectionTitle(child: Text('Determinate')),
+        const OptimusTitleMedium(child: Text('Determinate')),
         OptimusCircleLoader(
           variant: OptimusCircleLoaderVariant.determinate(progress),
           size: size,
           appearance: appearance,
         ),
         const SizedBox(height: 24),
-        const OptimusSectionTitle(child: Text('Indeterminate')),
+        const OptimusTitleMedium(child: Text('Indeterminate')),
         OptimusCircleLoader(
           variant: const OptimusCircleLoaderVariant.indeterminate(),
           size: size,

diff --git a/storybook/lib/stories/tags.dart b/storybook/lib/stories/tags.dart
@@ -24,7 +24,7 @@ final Story tagStory = Story(
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        const OptimusSectionTitle(child: Text('Semantic')),
+        const OptimusTitleMedium(child: Text('Semantic')),
         Wrap(
           children: OptimusColorOption.values
               .map(
@@ -42,7 +42,7 @@ final Story tagStory = Story(
               .toList(),
         ),
         const SizedBox(height: 20),
-        const OptimusSectionTitle(child: Text('Categorical')),
+        const OptimusTitleMedium(child: Text('Categorical')),
         Wrap(
           children: OptimusCategoricalColorOption.values
               .map(

diff --git a/storybook/lib/stories/typography/highlight.dart b/storybook/lib/stories/typography/highlight.dart
@@ -19,13 +19,13 @@ final Story highlightStory = Story(
         spacing: OptimusStackSpacing.spacing200,
         mainAxisSize: MainAxisSize.min,
         children: [
-          OptimusHighlightMajor(
+          OptimusHighlightLarge(
             align: align,
             child: Text(
-              k.text(label: 'Major Highlight', initial: 'Major Highlight'),
+              k.text(label: 'Large Highlight', initial: 'Large Highlight'),
             ),
           ),
-          OptimusHighlightModerate(
+          OptimusHighlightMedium(
             align: align,
             child: Text(
               k.text(
@@ -34,10 +34,10 @@ final Story highlightStory = Story(
               ),
             ),
           ),
-          OptimusHighlightMinor(
+          OptimusHighlightSmall(
             align: align,
             child: Text(
-              k.text(label: 'Minor Highlight', initial: 'Minor Highlight'),
+              k.text(label: 'Small Highlight', initial: 'Small Highlight'),
             ),
           ),
         ],

diff --git a/storybook/lib/stories/typography/title.dart b/storybook/lib/stories/typography/title.dart
@@ -19,22 +19,22 @@ final Story titleStory = Story(
         spacing: OptimusStackSpacing.spacing200,
         mainAxisSize: MainAxisSize.min,
         children: [
-          OptimusPageTitle(
+          OptimusTitleLarge(
             align: align,
             child: Text(
-              k.text(label: 'Page Title', initial: 'Page Title'),
+              k.text(label: 'Large Title', initial: 'Large Title'),
             ),
           ),
-          OptimusSectionTitle(
+          OptimusTitleMedium(
             align: align,
             child: Text(
-              k.text(label: 'Section Title', initial: 'Section Title'),
+              k.text(label: 'Medium Title', initial: 'Medium Title'),
             ),
           ),
-          OptimusSubsectionTitle(
+          OptimusTitleSmall(
             align: align,
             child: Text(
-              k.text(label: 'Subsection Title', initial: 'Subsection Title'),
+              k.text(label: 'Small Title', initial: 'Small Title'),
             ),
           ),
           OptimusSubtitle(

diff --git a/storybook/lib/stories/welcome.dart b/storybook/lib/stories/welcome.dart
@@ -9,7 +9,7 @@ final welcomeStory = Story(
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        OptimusPageTitle(
+        OptimusTitleLarge(
           align: TextAlign.center,
           child: Text('Welcome to the MEWS Mobile Design System Storybook'),
         ),