Skip to content

Commit da86028

Browse files
nouha06nouha06
authored
feat : Manage the new medium (moderate) font weight in demo app (#403) (#517)
* add: manage the new medium (moderate) font weight in demo app * chore: define new font moderate into theme contract lib * add: manage the new medium (moderate) font weight in demo app * chore: define new font moderate into theme contract lib * chore: update font family
1 parent 1cbb513 commit da86028

File tree

5 files changed

+245
-1
lines changed

5 files changed

+245
-1
lines changed

‎app/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.7.0...develop)
7+
78
### Added
9+
- [DemoApp][Library] Manage the new medium font weight `Typography` ([#403](https://github.com/Orange-OpenSource/ouds-flutter/issues/#403))
810
- [Tool] Add `ITSAppUsesNonExemptEncryption` into info.plist ([#526](https://github.com/Orange-OpenSource/ouds-flutter/issues/#526))
911

1012
### Changed

‎app/lib/ui/tokens/typography/typography_screen.dart‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,33 @@ class TypographyScreen extends StatelessWidget {
163163
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeBodyDefaultSmall(context).height!),
164164
letterSpacing: currentTheme.typographyTokens.typeBodyDefaultSmall(context).letterSpacing!,
165165
),
166+
FontTokenItem(
167+
tokenName: "BodyModerateLarge",
168+
style: currentTheme.typographyTokens.typeBodyModerateLarge(context),
169+
family: currentTheme.fontFamily,
170+
weight: currentTheme.typographyTokens.typeBodyModerateLarge(context).fontWeight!,
171+
size: currentTheme.typographyTokens.typeBodyModerateLarge(context).fontSize!,
172+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeBodyModerateLarge(context).height!),
173+
letterSpacing: currentTheme.typographyTokens.typeBodyModerateLarge(context).letterSpacing!,
174+
),
175+
FontTokenItem(
176+
tokenName: "BodyModerateMedium",
177+
style: currentTheme.typographyTokens.typeBodyModerateMedium(context),
178+
family: currentTheme.fontFamily,
179+
weight: currentTheme.typographyTokens.typeBodyModerateMedium(context).fontWeight!,
180+
size: currentTheme.typographyTokens.typeBodyModerateMedium(context).fontSize!,
181+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeBodyModerateMedium(context).height!),
182+
letterSpacing: currentTheme.typographyTokens.typeBodyModerateMedium(context).letterSpacing!,
183+
),
184+
FontTokenItem(
185+
tokenName: "BodyModerateSmall",
186+
style: currentTheme.typographyTokens.typeBodyModerateSmall(context),
187+
family: currentTheme.fontFamily,
188+
weight: currentTheme.typographyTokens.typeBodyModerateSmall(context).fontWeight!,
189+
size: currentTheme.typographyTokens.typeBodyModerateSmall(context).fontSize!,
190+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeBodyModerateSmall(context).height!),
191+
letterSpacing: currentTheme.typographyTokens.typeBodyModerateSmall(context).letterSpacing!,
192+
),
166193
FontTokenItem(
167194
tokenName: "BodyStrongLarge",
168195
style: currentTheme.typographyTokens.typeBodyStrongLarge(context),
@@ -226,6 +253,42 @@ class TypographyScreen extends StatelessWidget {
226253
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeLabelDefaultSmall(context).height!),
227254
letterSpacing: currentTheme.typographyTokens.typeLabelDefaultSmall(context).letterSpacing!,
228255
),
256+
FontTokenItem(
257+
tokenName: "LabelModerateXLarge",
258+
style: currentTheme.typographyTokens.typeLabelModerateXLarge(context),
259+
family: currentTheme.fontFamily,
260+
weight: currentTheme.typographyTokens.typeLabelModerateXLarge(context).fontWeight!,
261+
size: currentTheme.typographyTokens.typeLabelModerateXLarge(context).fontSize!,
262+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeLabelModerateXLarge(context).height!),
263+
letterSpacing: currentTheme.typographyTokens.typeLabelModerateXLarge(context).letterSpacing!,
264+
),
265+
FontTokenItem(
266+
tokenName: "LabelModerateLarge",
267+
style: currentTheme.typographyTokens.typeLabelModerateLarge(context),
268+
family: currentTheme.fontFamily,
269+
weight: currentTheme.typographyTokens.typeLabelModerateLarge(context).fontWeight!,
270+
size: currentTheme.typographyTokens.typeLabelModerateLarge(context).fontSize!,
271+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeLabelModerateLarge(context).height!),
272+
letterSpacing: currentTheme.typographyTokens.typeLabelModerateLarge(context).letterSpacing!,
273+
),
274+
FontTokenItem(
275+
tokenName: "LabelModerateMedium",
276+
style: currentTheme.typographyTokens.typeLabelModerateMedium(context),
277+
family: currentTheme.fontFamily,
278+
weight: currentTheme.typographyTokens.typeLabelModerateMedium(context).fontWeight!,
279+
size: currentTheme.typographyTokens.typeLabelModerateMedium(context).fontSize!,
280+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeLabelModerateMedium(context).height!),
281+
letterSpacing: currentTheme.typographyTokens.typeLabelModerateMedium(context).letterSpacing!,
282+
),
283+
FontTokenItem(
284+
tokenName: "LabelModerateSmall",
285+
style: currentTheme.typographyTokens.typeLabelModerateSmall(context),
286+
family: currentTheme.fontFamily,
287+
weight: currentTheme.typographyTokens.typeLabelModerateSmall(context).fontWeight!,
288+
size: currentTheme.typographyTokens.typeLabelModerateSmall(context).fontSize!,
289+
lineHeight: roundToOneDecimal(currentTheme.typographyTokens.typeLabelModerateSmall(context).height!),
290+
letterSpacing: currentTheme.typographyTokens.typeLabelModerateSmall(context).letterSpacing!,
291+
),
229292
FontTokenItem(
230293
tokenName: "LabelStrongXLarge",
231294
style: currentTheme.typographyTokens.typeLabelStrongXLarge(context),

‎ouds_theme_contract/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.7.0...develop)
8+
89
### Added
10+
- [Library] Manage the new medium font weight `Typography` ([#403](https://github.com/Orange-OpenSource/ouds-flutter/issues/#403))
911

1012
### Changed
1113
- [Library] update `navigation bar` version ([#531](https://github.com/Orange-OpenSource/ouds-flutter/issues/531))

‎ouds_theme_contract/lib/theme/scheme/typography/ouds_typography.dart‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,82 @@ class OudsTypography {
297297
);
298298
}
299299

300+
/// Body Moderate
301+
TextStyle typeBodyModerateLarge(BuildContext context) {
302+
final sizeClass = OudsWindowSizeClassUtil.of(context);
303+
final theme = OudsTheme.of(context);
304+
305+
return TextStyle(
306+
fontFamily: theme.fontFamily,
307+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
308+
sizeClass: sizeClass,
309+
mobile: theme.fontTokens.sizeBodyLargeMobile,
310+
tablet: theme.fontTokens.sizeBodyLargeTablet,
311+
),
312+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
313+
sizeClass: sizeClass,
314+
mobile: theme.fontTokens.letterSpacingBodyLargeMobile,
315+
tablet: theme.fontTokens.letterSpacingBodyLargeTablet,
316+
),
317+
height: OudsWindowSizeClassUtil.selectMobileTablet(
318+
sizeClass: sizeClass,
319+
mobile: theme.fontTokens.lineHeightBodyLargeMobile / theme.fontTokens.sizeBodyLargeMobile,
320+
tablet: theme.fontTokens.lineHeightBodyLargeTablet / theme.fontTokens.sizeBodyLargeTablet,
321+
),
322+
fontWeight: theme.fontTokens.weightBodyModerate,
323+
);
324+
}
325+
326+
TextStyle typeBodyModerateMedium(BuildContext context) {
327+
final sizeClass = OudsWindowSizeClassUtil.of(context);
328+
final theme = OudsTheme.of(context);
329+
330+
return TextStyle(
331+
fontFamily: theme.fontFamily,
332+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
333+
sizeClass: sizeClass,
334+
mobile: theme.fontTokens.sizeBodyMediumMobile,
335+
tablet: theme.fontTokens.sizeBodyMediumTablet,
336+
),
337+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
338+
sizeClass: sizeClass,
339+
mobile: theme.fontTokens.letterSpacingBodyMediumMobile,
340+
tablet: theme.fontTokens.letterSpacingBodyMediumTablet,
341+
),
342+
height: OudsWindowSizeClassUtil.selectMobileTablet(
343+
sizeClass: sizeClass,
344+
mobile: theme.fontTokens.lineHeightBodyMediumMobile / theme.fontTokens.sizeBodyMediumMobile,
345+
tablet: theme.fontTokens.lineHeightBodyMediumTablet / theme.fontTokens.sizeBodyMediumTablet,
346+
),
347+
fontWeight: theme.fontTokens.weightBodyModerate,
348+
);
349+
}
350+
351+
TextStyle typeBodyModerateSmall(BuildContext context) {
352+
final sizeClass = OudsWindowSizeClassUtil.of(context);
353+
final theme = OudsTheme.of(context);
354+
355+
return TextStyle(
356+
fontFamily: theme.fontFamily,
357+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
358+
sizeClass: sizeClass,
359+
mobile: theme.fontTokens.sizeBodySmallMobile,
360+
tablet: theme.fontTokens.sizeBodySmallTablet,
361+
),
362+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
363+
sizeClass: sizeClass,
364+
mobile: theme.fontTokens.letterSpacingBodySmallMobile,
365+
tablet: theme.fontTokens.letterSpacingBodySmallTablet,
366+
),
367+
height: OudsWindowSizeClassUtil.selectMobileTablet(
368+
sizeClass: sizeClass,
369+
mobile: theme.fontTokens.lineHeightBodySmallMobile / theme.fontTokens.sizeBodySmallMobile,
370+
tablet: theme.fontTokens.lineHeightBodySmallTablet / theme.fontTokens.sizeBodySmallTablet,
371+
),
372+
fontWeight: theme.fontTokens.weightBodyModerate,
373+
);
374+
}
375+
300376
/// Body Strong
301377
TextStyle typeBodyStrongLarge(BuildContext context) {
302378
final sizeClass = OudsWindowSizeClassUtil.of(context);
@@ -474,6 +550,107 @@ class OudsTypography {
474550
);
475551
}
476552

553+
/// Label Moderate
554+
TextStyle typeLabelModerateXLarge(BuildContext context) {
555+
final sizeClass = OudsWindowSizeClassUtil.of(context);
556+
final theme = OudsTheme.of(context);
557+
558+
return TextStyle(
559+
fontFamily: theme.fontFamily,
560+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
561+
sizeClass: sizeClass,
562+
mobile: theme.fontTokens.sizeLabelXlarge,
563+
tablet: theme.fontTokens.sizeLabelXlarge,
564+
),
565+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
566+
sizeClass: sizeClass,
567+
mobile: theme.fontTokens.letterSpacingLabelXlarge,
568+
tablet: theme.fontTokens.letterSpacingLabelXlarge,
569+
),
570+
height: OudsWindowSizeClassUtil.selectMobileTablet(
571+
sizeClass: sizeClass,
572+
mobile: theme.fontTokens.lineHeightLabelXlarge / theme.fontTokens.sizeLabelXlarge,
573+
tablet: theme.fontTokens.lineHeightLabelXlarge / theme.fontTokens.sizeLabelXlarge,
574+
),
575+
fontWeight: theme.fontTokens.weightLabelModerate,
576+
);
577+
}
578+
579+
TextStyle typeLabelModerateLarge(BuildContext context) {
580+
final sizeClass = OudsWindowSizeClassUtil.of(context);
581+
final theme = OudsTheme.of(context);
582+
583+
return TextStyle(
584+
fontFamily: theme.fontFamily,
585+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
586+
sizeClass: sizeClass,
587+
mobile: theme.fontTokens.sizeLabelLarge,
588+
tablet: theme.fontTokens.sizeLabelLarge,
589+
),
590+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
591+
sizeClass: sizeClass,
592+
mobile: theme.fontTokens.letterSpacingLabelLarge,
593+
tablet: theme.fontTokens.letterSpacingLabelLarge,
594+
),
595+
height: OudsWindowSizeClassUtil.selectMobileTablet(
596+
sizeClass: sizeClass,
597+
mobile: theme.fontTokens.lineHeightLabelLarge / theme.fontTokens.sizeLabelLarge,
598+
tablet: theme.fontTokens.lineHeightLabelLarge / theme.fontTokens.sizeLabelLarge,
599+
),
600+
fontWeight: theme.fontTokens.weightLabelModerate,
601+
);
602+
}
603+
604+
TextStyle typeLabelModerateMedium(BuildContext context) {
605+
final sizeClass = OudsWindowSizeClassUtil.of(context);
606+
final theme = OudsTheme.of(context);
607+
608+
return TextStyle(
609+
fontFamily: theme.fontFamily,
610+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
611+
sizeClass: sizeClass,
612+
mobile: theme.fontTokens.sizeLabelMedium,
613+
tablet: theme.fontTokens.sizeLabelMedium,
614+
),
615+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
616+
sizeClass: sizeClass,
617+
mobile: theme.fontTokens.letterSpacingLabelMedium,
618+
tablet: theme.fontTokens.letterSpacingLabelMedium,
619+
),
620+
height: OudsWindowSizeClassUtil.selectMobileTablet(
621+
sizeClass: sizeClass,
622+
mobile: theme.fontTokens.lineHeightLabelMedium / theme.fontTokens.sizeLabelMedium,
623+
tablet: theme.fontTokens.lineHeightLabelMedium / theme.fontTokens.sizeLabelMedium,
624+
),
625+
fontWeight: theme.fontTokens.weightLabelModerate,
626+
);
627+
}
628+
629+
TextStyle typeLabelModerateSmall(BuildContext context) {
630+
final sizeClass = OudsWindowSizeClassUtil.of(context);
631+
final theme = OudsTheme.of(context);
632+
633+
return TextStyle(
634+
fontFamily: theme.fontFamily,
635+
fontSize: OudsWindowSizeClassUtil.selectMobileTablet(
636+
sizeClass: sizeClass,
637+
mobile: theme.fontTokens.sizeLabelSmall,
638+
tablet: theme.fontTokens.sizeLabelSmall,
639+
),
640+
letterSpacing: OudsWindowSizeClassUtil.selectMobileTablet(
641+
sizeClass: sizeClass,
642+
mobile: theme.fontTokens.letterSpacingLabelSmall,
643+
tablet: theme.fontTokens.letterSpacingLabelSmall,
644+
),
645+
height: OudsWindowSizeClassUtil.selectMobileTablet(
646+
sizeClass: sizeClass,
647+
mobile: theme.fontTokens.lineHeightLabelSmall / theme.fontTokens.sizeLabelSmall,
648+
tablet: theme.fontTokens.lineHeightLabelSmall / theme.fontTokens.sizeLabelSmall,
649+
),
650+
fontWeight: theme.fontTokens.weightLabelModerate,
651+
);
652+
}
653+
477654
/// Label Strong
478655
TextStyle typeLabelStrongXLarge(BuildContext context) {
479656
final sizeClass = OudsWindowSizeClassUtil.of(context);

‎ouds_theme_orange/lib/orange_theme.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ class OrangeTheme implements OudsThemeContract {
162162
OudsFontSemanticTokens get fontTokens => OrangeFontSemanticTokens();
163163

164164
@override
165-
String get fontFamily => defaultTargetPlatform == TargetPlatform.android ? 'Roboto' : 'HelveticaNeue';
165+
String get fontFamily => defaultTargetPlatform == TargetPlatform.android ? 'Roboto' : 'SFProDisplay';
166166

167167
@override
168168
String get packageName => 'ouds_theme_orange';

0 commit comments

Comments
 (0)