chore: sync with feature-8.0

BREAKING.md

@@ -104,6 +104,8 @@ For more information on the new dark theme files, refer to the [Dark Mode docume
 
 <h2 id="version-8x-global-styles">Global Styles</h2>
 
+<h4 id="version-8x-text-color">Text Color</h4>
+
 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.
 
+<h4 id="version-8x-dynamic-font">Dynamic Font</h4>
+
+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).
 <h2 id="version-8x-components">Components</h2>
 
 <h4 id="version-8x-button">Button</h4>
@@ -154,3 +167,9 @@ This allows components to inherit the color properly when used outside of Ionic
 <h4 id="version-8x-progress-bar">Progress bar</h4>
 
 - The `--buffer-background` CSS variable has been removed. Use `--background` instead.
+
+<h4 id="version-8x-toast">Toast</h4>
+
+- `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).

core/src/components/refresher-content/refresher-content.tsx

@@ -114,7 +114,7 @@ export class RefresherContent implements ComponentInterface {
           {this.pullingIcon && hasSpinner && (
             <div class="refresher-pulling-icon">
               <div class="spinner-arrow-container">
-                <ion-spinner name={this.pullingIcon as SpinnerTypes} aria-label="pulling icon" paused></ion-spinner>
+                <ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
                 {mode === 'md' && this.pullingIcon === 'circular' && (
                   <div class="arrow-container">
                     <ion-icon icon={caretBackSharp} aria-hidden="true"></ion-icon>
@@ -133,7 +133,7 @@ export class RefresherContent implements ComponentInterface {
         <div class="refresher-refreshing">
           {this.refreshingSpinner && (
             <div class="refresher-refreshing-icon">
-              <ion-spinner name={this.refreshingSpinner} aria-label="refreshing icon"></ion-spinner>
+              <ion-spinner name={this.refreshingSpinner}></ion-spinner>
             </div>
           )}
           {this.refreshingText !== undefined && this.renderRefreshingText()}

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([]);
     });

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<boolean | void>;
 }

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),
   };
 };
 

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;
+   * Loop through each color object from the
-  --ion-color-primary-rgb: 0, 84, 233;
+   * `ionic.theme.default.scss` file
-  --ion-color-primary-contrast: #ffffff;
+   * and generate CSS Variables for each color.
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
+   */
-  --ion-color-primary-shade: #004acd;
+  @each $color-name, $value in $colors {
-  --ion-color-primary-tint: #1a65eb;
+    --ion-color-#{$color-name}: #{map.get($value, base)};
-
+    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
-  /** secondary **/
+    --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
-  --ion-color-secondary: #0163aa;
+    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
-  --ion-color-secondary-rgb: 1, 99, 170;
+    --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
-  --ion-color-secondary-contrast: #ffffff;
+    --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
-  --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;
 }
 
 // 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);
 }
 

core/src/themes/ionic.mixins.scss

@@ -400,33 +400,12 @@
     }
   } @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;
-          }
-        }
-      }
-    }
-  }
 }
 
 // Add position for all directions