MOBILE-4458 design: Apply font styles

src/core/components/error-info/error-info.scss

@@ -1,7 +1,7 @@
 .core-error-info {
     background: var(--gray-200);
     border-radius: var(--radius-xs);
-    font-size: var(--font-size-sm);
+    font-size: var(--body-font-size-sm);
     color: var(--gray-900);
 
     p:first-child {
@@ -14,7 +14,7 @@
 
     .core-error-info--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
-        font-size: var(--font-size-normal);
+        font-size: var(--body-font-size-md);
     }
 
     .core-error-info--details p {

src/theme/helpers/custom.mixins.scss

@@ -198,22 +198,22 @@
 
 @mixin core-headings() {
     h1 {
-        font-size: 26px;
+        font: var(--heading-1-font);
     }
     h2, .item-heading {
-        font-size: 24px;
+        font: var(--heading-2-font);
     }
     h3 {
-        font-size: 22px;
+        font: var(--heading-3-font);
     }
     h4 {
-        font-size: 20px;
+        font: var(--heading-4-font);
     }
     h5 {
-        font-size: 18px;
+        font: var(--heading-5-font);
     }
     h6 {
-        font-size: 16px;
+        font: var(--heading-6-font);
     }
 }
 

src/theme/theme.design-system.scss

@@ -1,13 +1,73 @@
 html {
 
     // Spacing
-    @for $i from 0 to 13 {
+    @for $i from 0 to 6 {
         --spacing-#{$i}: #{$i*4}px;
     }
 
     // Font sizes
+
+    // Body font size
     --font-size-sm: 12px;
-    --font-size-normal: 14px;
+    --font-size-md: 14px;
+    --font-size-lg: 16px;
+
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+
+    --body-font-size-sm: var(--font-size-sm);
+    --body-font-size-md: var(--font-size-md);
+    --body-font-size-lg: var(--font-size-lg);
+    --body-font-weight: var(--font-weight-normal);
+    --body-line-height: 150%;
+
+    --link-sm-font-size: var(--font-size-sm);
+    --link-md-font-size: var(--font-size-md);
+    --link-lg-font-size: var(--font-size-lg);
+    --link-font-weight: var(--font-weight-normal);
+    --link-line-height: 150%;
+
+    // Labels
+    --label-sm-font-size: 10px;
+    --label-md-font-size: 12px;
+    --label-lg-font-size: 14px;
+    --label-font-weight: var(--font-weight-medium);
+
+    --label-sm-line-height: 16px;
+    --label-md-line-height: 16px;
+    --label-lg-line-height: 20px;
+
+    // Subtitles
+    --subtitle-sm-font-size: 14px;
+    --subtitle-md-font-size: 16px;
+    --subtitle-lg-font-size: 20px;
+
+    --subtitle-font-weight: var(--font-weight-medium);
+    --subtitle-line-height: 150%;
+
+    // Headings
+    --heading-1-font-size: 28px;
+    --heading-2-font-size: 24px;
+    --heading-3-font-size: 22px;
+    --heading-4-font-size: 20px;
+    --heading-5-font-size: 18px;
+    --heading-6-font-size: 16px;
+
+    --heading-1-font-weight: var(--font-weight-normal);
+    --heading-2-font-weight: var(--font-weight-normal);
+    --heading-3-font-weight: var(--font-weight-normal);
+    --heading-4-font-weight: var(--font-weight-medium);
+    --heading-5-font-weight: var(--font-weight-medium);
+    --heading-6-font-weight: var(--font-weight-medium);
+
+    --heading-line-height: 130%;
+
+    --heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family);
+    --heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family);
 
     // Radiuses
     --radius-none: 0px;
@@ -18,12 +78,6 @@ html {
     --radius-xl: 24px;
     --radius-round: 50%;
 
-    /** @deprecated since 4.3 **/
-    --small-radius: var(--radius-xs);
-    --medium-radius: var(--radius-sm);
-    --big-radius: var(--radius-lg);
-    --huge-radius: var(--radius-xl);
-
     // Shadows / Elevation
     --drop-shadow-color: 40 40 40; //#282828;
     --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20);
@@ -41,3 +95,16 @@ html {
     // A11y
     --a11y-min-target-size: 44px;
 }
+
+/** @deprecated since 4.3 **/
+html {
+    --small-radius: var(--radius-xs);
+    --medium-radius: var(--radius-sm);
+    --big-radius: var(--radius-lg);
+    --huge-radius: var(--radius-xl);
+}
+
+/** @deprecated since 4.4 **/
+html {
+    --font-size-normal: var(--font-size-md);
+}

src/theme/theme.light.scss

@@ -53,7 +53,7 @@ html {
     --zoom-level: 100%;
 
     --text-color:       #{$text-color};
-    --text-size: var(--font-size-normal);
+    --text-size: var(--body-font-size-md);
     --background-color: #{$background-color};
     --stroke:            var(--gray-300);
 

upgrade.txt

@@ -14,6 +14,7 @@ For more information about upgrading, read the official documentation: https://m
  - CoreAppProvider.isAutomated() has been deprecated, use CorePlatformService.isAutomated() instead.
  - Due to a breaking change in cordova-plugin-file, avoid using FileEntry.toURL(). Use CoreFileProvider.getFileEntryURL instead.
  - FileTransfer service is no longer available, now we recommend use window.FileTransfer instead.
+ - CSS variable --font-size-normal has been deprecated in favor of --font-size-md.
 
 === 4.3.0 ===