Merge branch 'ROU-12225' of https://github.com/ionic-team/ionic-framework into ROU-12225

Author: JoaoFerreira-FrontEnd

core/src/components/buttons/buttons.ionic.scss

@@ -13,7 +13,7 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-clear {
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --background: transparent;
   --background-activated: transparent;
   --background-focused: transparent;

core/src/components/card-title/card-title.ionic.scss

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
 
   @include globals.typography(globals.$ion-heading-h5-medium);
 }

core/src/components/card/card.ionic.scss

@@ -5,12 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --border-width: #{globals.$ion-border-size-025};
   --border-color: #{globals.$ion-border-default};
   --border-style: #{globals.$ion-border-style-solid};
   --border-radius: #{globals.$ion-round-xl};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   min-width: globals.$ion-scale-2400;
 
   border: var(--border-width) var(--border-style) var(--border-color);

core/src/components/checkbox/checkbox.ionic.scss

@@ -30,7 +30,7 @@
   --checkbox-background: #{globals.$ion-bg-input-default};
   --checkbox-background-checked: #{globals.$ion-bg-primary-base-default};
   --border-color-checked: #{globals.$ion-semantics-primary-base};
-  --checkmark-color: #{globals.$ion-primitives-base-white};
+  --checkmark-color: #{globals.$ion-bg-surface-default};
   --transition: none;
 
   z-index: 2;
@@ -60,7 +60,7 @@
 }
 
 .label-text-wrapper {
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 :host(.in-item) .label-text-wrapper {

core/src/components/chip/chip.ionic.scss

@@ -117,13 +117,13 @@
 
 :host(.chip-bold) {
   --background: #{globals.$ion-bg-neutral-bold-default};
-  --color: #{globals.$ion-primitives-base-white};
+  --color: #{globals.$ion-bg-surface-default};
 }
 
 :host(.chip-outline.chip-bold) {
   // TODO(FW-6450): this is a made up design choice based on a
   // darker shade of the background color
-  border-color: globals.$ion-primitives-neutral-1200;
+  border-color: globals.$ion-text-default;
 }
 
 // Chip Colors

core/src/components/datetime/datetime.ionic.scss

@@ -9,7 +9,7 @@
    * @prop --focus-ring-color: The color of the ring around the focused element.
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
 }
@@ -140,7 +140,7 @@
 
   height: globals.$ion-scale-1200;
 
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Disabled Day
@@ -211,7 +211,7 @@
   height: globals.$ion-scale-800;
 
   background-color: globals.$ion-primitives-neutral-100;
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Calendar / Footer / Action Buttons

core/src/components/datetime/test/custom/datetime.e2e.ts

@@ -28,8 +28,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
     });
-
-    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
+    // TODO (FW-6769): Enable test when its fixed
+    test.skip('should allow styling calendar days in grid style datetimes', async ({ page }) => {
       const datetime = page.locator('#custom-calendar-days');
 
       // Wait for calendar days to be rendered

core/src/components/datetime/test/display/datetime.e2e.ts

@@ -30,7 +30,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
       });
-      test('time should not have any visual regressions', async ({ page }) => {
+      // TODO (FW-6769): Enable test when its fixed
+      test.skip('time should not have any visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-datetime value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
@@ -84,7 +85,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
       });
-      test('time should not have any visual regressions', async ({ page }) => {
+      // TODO (FW-6769): Enable test when its fixed
+      test.skip('time should not have any visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time"></ion-datetime>

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -13,7 +13,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days`));
     });
 
-    test('should not have visual regressions with a custom styled calendar', async ({ page }) => {
+    // TODO (FW-6769): Enable test when its fixed
+    test.skip('should not have visual regressions with a custom styled calendar', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);
       await page.locator('.datetime-ready').first().waitFor();
       const datetime = page.locator('#custom-calendar-days');