diff --git a/BREAKING.md b/BREAKING.md index 7669b8840e..aa901ce8ed 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -103,6 +103,8 @@ For more information on the new dark theme files, refer to the [Dark Mode docume

Global Styles

+

Text Color

+ The `core.css` file has been updated to set the text color on the `body` element: ```diff @@ -113,6 +115,17 @@ body { This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit. +

Dynamic Font

+ +The `core.css` file has been updated to enable dynamic font scaling by default. + +The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`. + +Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling. + +Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes. + +For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling).

Components

Button

diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 6c0d374b3e..40055d1093 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -87,7 +87,7 @@ html.md { } html { - --ion-default-dynamic-font: -apple-system-body; + --ion-dynamic-font: -apple-system-body; --ion-font-family: var(--ion-default-font); }