From f4d341cec2705f21dca3f384e4b0eb71210149b1 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:55:39 -0800
Subject: [PATCH 1/5] refactor(position): remove host-context usage from mixin
 (#28972)

---
 core/src/themes/ionic.mixins.scss | 27 +++------------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

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

From b43b9ecfe0a56b010285e0df936d41a7c77f9748 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 5 Feb 2024 08:19:49 -0800
Subject: [PATCH 2/5] refactor(refresher-content): remove the aria-label
 (#28968)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 core/src/components/refresher-content/refresher-content.tsx | 4 ++--
 core/src/components/refresher/test/a11y/refresher.e2e.ts    | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

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

From 9b25c4f456cc0d6f209819ecc319d3b859065f51 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:28:58 -0800
Subject: [PATCH 3/5] refactor(dynamic-font): remove --ion-default-dynamic-font
 (#28966)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 BREAKING.md            | 13 +++++++++++++
 core/src/css/core.scss |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

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
 
 <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
@@ -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.
 
+<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>
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);
 }
 

From 7fd7e1d9b84bcb1d38e0764afb9f9adc30399316 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 6 Feb 2024 08:43:22 -0800
Subject: [PATCH 4/5] refactor(core-styles): use sass variables in global
 styles (#28979)

---
 core/src/css/core.scss | 85 +++++++-----------------------------------
 1 file changed, 14 insertions(+), 71 deletions(-)

diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 40055d1093..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

From 9856295915f1460ba1cd4b6f8c8d420627a533e6 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 6 Feb 2024 09:09:03 -0800
Subject: [PATCH 5/5] refactor(toast): remove cssClass from ToastButton
 (#28977)

BREAKING CHANGE:
The `cssClass` property has been removed from `ToastButton`
---
 BREAKING.md                                  | 6 ++++++
 core/src/components/toast/toast-interface.ts | 6 ------
 core/src/components/toast/toast.tsx          | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index aa901ce8ed..7ff0d04e4e 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -162,3 +162,9 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
   - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
   - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
+
+<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).
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<boolean | void>;
 }
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),
   };
 };