diff --git a/BREAKING.md b/BREAKING.md index 85463ce043..d225f544f5 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -104,6 +104,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 @@ -114,6 +116,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

@@ -154,3 +167,9 @@ This allows components to inherit the color properly when used outside of Ionic

Progress bar

- The `--buffer-background` CSS variable has been removed. Use `--background` instead. + +

Toast

+ +- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons. + +For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming). \ No newline at end of file diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx index 2686b46fd5..df94479c9d 100644 --- a/core/src/components/refresher-content/refresher-content.tsx +++ b/core/src/components/refresher-content/refresher-content.tsx @@ -114,7 +114,7 @@ export class RefresherContent implements ComponentInterface { {this.pullingIcon && hasSpinner && (
- + {mode === 'md' && this.pullingIcon === 'circular' && (
@@ -133,7 +133,7 @@ export class RefresherContent implements ComponentInterface {
{this.refreshingSpinner && (
- +
)} {this.refreshingText !== undefined && this.renderRefreshingText()} diff --git a/core/src/components/refresher/test/a11y/refresher.e2e.ts b/core/src/components/refresher/test/a11y/refresher.e2e.ts index e82792700f..2d7d79e623 100644 --- a/core/src/components/refresher/test/a11y/refresher.e2e.ts +++ b/core/src/components/refresher/test/a11y/refresher.e2e.ts @@ -23,7 +23,8 @@ configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEa await expect(refresher).toHaveClass(/refresher-pulling/); - const results = await new AxeBuilder({ page }).analyze(); + // TODO(FW-5937): Remove the disableRules once the ticket is resolved. + const results = await new AxeBuilder({ page }).disableRules('aria-progressbar-name').analyze(); expect(results.violations).toEqual([]); }); diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index d5ddff69e4..8039740438 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -27,18 +27,12 @@ export interface ToastOptions { export type ToastLayout = 'baseline' | 'stacked'; -// TODO FW-4923 remove cssClass property - export interface ToastButton { text?: string; icon?: string; side?: 'start' | 'end'; role?: 'cancel' | string; - /** - * @deprecated Use the toast button's CSS Shadow Parts instead. - */ - cssClass?: string | string[]; htmlAttributes?: { [key: string]: any }; handler?: () => boolean | void | Promise; } diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index fe960d3e32..a71d2f5b23 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -778,7 +778,6 @@ const buttonClass = (button: ToastButton): CssClassMap => { [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true, - ...getClassMap(button.cssClass), }; }; diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 6c0d374b3e..34b2379282 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -1,79 +1,22 @@ +@use "sass:map"; @import "../themes/ionic.globals"; @import "../components/menu/menu.ios.vars"; @import "../components/menu/menu.md.vars"; :root { - /** primary **/ - --ion-color-primary: #0054e9; - --ion-color-primary-rgb: 0, 84, 233; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #004acd; - --ion-color-primary-tint: #1a65eb; - - /** secondary **/ - --ion-color-secondary: #0163aa; - --ion-color-secondary-rgb: 1, 99, 170; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #015796; - --ion-color-secondary-tint: #1a73b3; - - /** tertiary **/ - --ion-color-tertiary: #6030ff; - --ion-color-tertiary-rgb: 96, 48, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #542ae0; - --ion-color-tertiary-tint: #7045ff; - - /** success **/ - --ion-color-success: #2dd55b; - --ion-color-success-rgb: 45, 213, 91; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #28bb50; - --ion-color-success-tint: #42d96b; - - /** warning **/ - --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; - - /** danger **/ - --ion-color-danger: #c5000f; - --ion-color-danger-rgb: 197, 0, 15; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #ad000d; - --ion-color-danger-tint: #cb1a27; - - /** dark **/ - --ion-color-dark: #2f2f2f; - --ion-color-dark-rgb: 47, 47, 47; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #292929; - --ion-color-dark-tint: #444444; - - /** medium **/ - --ion-color-medium: #5f5f5f; - --ion-color-medium-rgb: 95, 95, 95; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #545454; - --ion-color-medium-tint: #6f6f6f; - - /** light **/ - --ion-color-light: #f6f8fc; - --ion-color-light-rgb: 246, 248, 252; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d8dade; - --ion-color-light-tint: #f7f9fc; + /** + * Loop through each color object from the + * `ionic.theme.default.scss` file + * and generate CSS Variables for each color. + */ + @each $color-name, $value in $colors { + --ion-color-#{$color-name}: #{map.get($value, base)}; + --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))}; + --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)}; + --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))}; + --ion-color-#{$color-name}-shade: #{map.get($value, shade)}; + --ion-color-#{$color-name}-tint: #{map.get($value, tint)}; + } } // Ionic Font Family @@ -87,7 +30,7 @@ html.md { } html { - --ion-default-dynamic-font: -apple-system-body; + --ion-dynamic-font: -apple-system-body; --ion-font-family: var(--ion-default-font); } diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index 76fe102293..6be878891e 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -400,30 +400,9 @@ } } @else { @at-root { - @supports (inset-inline-start: 0) { - & { - inset-inline-start: $start; - inset-inline-end: $end; - } - } - } - - // TODO FW-3766 - @at-root { - @supports not (inset-inline-start: 0) { - & { - @include ltr() { - left: $start; - right: $end; - } - @include rtl() { - left: unset; - right: unset; - - left: $end; - right: $start; - } - } + & { + inset-inline-start: $start; + inset-inline-end: $end; } } }