diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-info/error-info.scss index 05c0a69dc..a0723f21f 100644 --- a/src/core/components/error-info/error-info.scss +++ b/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 { diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index 87e419ad9..f62bd6116 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/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); } } diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index c305a0240..a260930dd 100644 --- a/src/theme/theme.design-system.scss +++ b/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); +} diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 03fd9e53f..4b8940fcc 100644 --- a/src/theme/theme.light.scss +++ b/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); diff --git a/upgrade.txt b/upgrade.txt index 155c45e9a..1d41a4d00 100644 --- a/upgrade.txt +++ b/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 ===