Typography update (#261)

Author: bdlukaa

CHANGELOG.md

@@ -16,6 +16,11 @@ Date format: DD/MM/YYYY
 - Long `content` widget no longer overflow in `ContentDialog` ([#242](https://github.com/bdlukaa/fluent_ui/issues/242))
 - Content no longer loses state when the pane display mode is changed ([#250](https://github.com/bdlukaa/fluent_ui/pull/250))
 - `initiallyExpanded` property on `Expander` works properly ([#252](https://github.com/bdlukaa/fluent_ui/pull/252))
+- **BREAKING** Updated typography ([#261](https://github.com/bdlukaa/fluent_ui/pull/261)):
+  - Renamed `Typography.standart` to `Typography.fromBrightness`
+  - Renamed `Typography` constructor to `Typography.raw`
+  - Default color for dark mode is now `const Color(0xE4000000)`
+  - Updated default font sizes for `display`, `titleLarge`, `title` and `subtitle`
 
 ## [3.9.1] - Input Update - [25/02/2022]
 

README.md

@@ -294,17 +294,16 @@ ThemeData(
 
 ### Font
 
-You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, **Segoe UI**. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.
+You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, **Segoe UI Variable**. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#font)
 
-![Font Segoe UI Showcase](https://docs.microsoft.com/en-us/windows/uwp/design/style/images/type/segoe-sample.svg)
+![Font Segoe UI Showcase](https://docs.microsoft.com/en-us/windows/apps/design/style/images/type/segoe-sample.svg)
 
-[Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/typography#font)
 
 ### Type ramp
 
-The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/typography#type-ramp)
+The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. All sizes are in effective pixels. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#type-ramp)
 
-![Windows Type Ramp](https://docs.microsoft.com/en-us/windows/uwp/design/style/images/type/type-ramp.png)
+![Windows Type Ramp](https://docs.microsoft.com/en-us/windows/apps/design/style/images/type/text-block-type-ramp.svg)
 
 ## Reveal Focus
 

example/lib/screens/typography.dart

@@ -54,11 +54,11 @@ class _TypographyPageState extends State<TypographyPage> {
                 ),
                 ComboboxItem(
                   child: Row(children: [
-                    buildColorBox(Colors.black),
+                    buildColorBox(const Color(0xE4000000)),
                     const SizedBox(width: 10.0),
                     const Text('Black'),
                   ]),
-                  value: Colors.black,
+                  value: const Color(0xE4000000),
                 ),
                 ...List.generate(Colors.accentColors.length, (index) {
                   final color = Colors.accentColors[index];

lib/src/styles/theme.dart

@@ -341,7 +341,7 @@ class ThemeData with Diagnosticable {
         : const Color.fromRGBO(255, 255, 255, 0.5442);
     menuColor ??= isLight ? const Color(0xFFf9f9f9) : const Color(0xFF2c2c2c);
     cardColor ??= isLight ? const Color(0xFFf3f3f3) : const Color(0xFF2e2e2e);
-    typography = Typography.standard(brightness: brightness)
+    typography = Typography.fromBrightness(brightness: brightness)
         .merge(typography)
         .apply(fontFamily: fontFamily);
     focusTheme = FocusThemeData.standard(

lib/src/styles/typography.dart

@@ -43,7 +43,7 @@ class Typography with Diagnosticable {
   final TextStyle? caption;
 
   /// Creates a new [Typography]. To create the default typography, use [Typography.defaultTypography]
-  const Typography({
+  const Typography.raw({
     this.display,
     this.titleLarge,
     this.title,
@@ -54,33 +54,39 @@ class Typography with Diagnosticable {
     this.caption,
   });
 
-  /// The default typography.
+  /// The default typography according to a brightness or color.
   ///
-  /// If [color] is null, uses [Colors.black] if [brightness] is [Brightness.dark], otherwise uses [Colors.white]
-  factory Typography.standard({
+  /// If [color] is null, [Colors.black] is used if [brightness] is light,
+  /// otherwise [Colors.white] is used. If it's not null, [color] will be used.
+  factory Typography.fromBrightness({
     Brightness? brightness,
     Color? color,
   }) {
-    assert(brightness != null || color != null);
-    color ??= brightness == Brightness.light ? Colors.black : Colors.white;
-    return Typography(
+    assert(
+      brightness != null || color != null,
+      'Either brightness or color must be provided',
+    );
+    // If color is null, brightness will not be null
+    color ??=
+        brightness == Brightness.light ? const Color(0xE4000000) : Colors.white;
+    return Typography.raw(
       display: TextStyle(
-        fontSize: 42,
+        fontSize: 68,
         color: color,
         fontWeight: FontWeight.w600,
       ),
       titleLarge: TextStyle(
-        fontSize: 34,
+        fontSize: 40,
         color: color,
         fontWeight: FontWeight.w500,
       ),
       title: TextStyle(
-        fontSize: 22,
+        fontSize: 28,
         color: color,
         fontWeight: FontWeight.w600,
       ),
       subtitle: TextStyle(
-        fontSize: 28,
+        fontSize: 20,
         color: color,
         fontWeight: FontWeight.w500,
       ),
@@ -108,7 +114,7 @@ class Typography with Diagnosticable {
   }
 
   static Typography lerp(Typography? a, Typography? b, double t) {
-    return Typography(
+    return Typography.raw(
       display: TextStyle.lerp(a?.display, b?.display, t),
       titleLarge: TextStyle.lerp(a?.titleLarge, b?.titleLarge, t),
       title: TextStyle.lerp(a?.title, b?.title, t),
@@ -123,7 +129,7 @@ class Typography with Diagnosticable {
   /// Copy this with a new [typography]
   Typography merge(Typography? typography) {
     if (typography == null) return this;
-    return Typography(
+    return Typography.raw(
       display: typography.display ?? display,
       titleLarge: typography.titleLarge ?? titleLarge,
       title: typography.title ?? title,
@@ -144,7 +150,7 @@ class Typography with Diagnosticable {
     Color? decorationColor,
     TextDecorationStyle? decorationStyle,
   }) {
-    return Typography(
+    return Typography.raw(
       display: display?.apply(
         color: displayColor,
         decoration: decoration,