chore(playwright): migrate themes to palettes (#29148)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrates the test infrastructure to use `palettes` instead of `themes`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

This **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
#29149

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

Author: sean-perkins

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -40,7 +40,7 @@ const testAriaButton = async (
   await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
 };
 
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
   test.describe(title('action-sheet: Axe testing'), () => {
     test('should not have accessibility violations when header is defined', async ({ page }) => {
       await page.setContent(

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -28,7 +28,7 @@ const testAria = async (
   expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
 
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
   test.describe(title('alert: Axe testing'), () => {
     test('should not have accessibility violations when header and message are defined', async ({ page }) => {
       await page.setContent(

core/src/components/alert/test/basic/alert.e2e.ts

@@ -100,7 +100,7 @@ configs().forEach(({ config, screenshot, title }) => {
   });
 });
 
-configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+configs({ palettes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('should not have visual regressions'), () => {
     test('more than two buttons', async ({ page }) => {
       await page.setContent(

core/src/components/back-button/test/a11y/back-button.e2e.ts

@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Only ios mode uses ion-color() for the back button
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('back-button: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/badge/test/a11y/badge.e2e.ts

@@ -25,7 +25,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
   test.describe(title('badge: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       /**

core/src/components/button/test/a11y/button.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('button: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(
@@ -52,7 +52,7 @@ configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, co
 /**
  * Only ios mode uses ion-color() for the activated button state
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('button: ios contrast'), () => {
     test('activated state should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/checkbox/test/a11y/checkbox.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('checkbox: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/fab-button/test/a11y/fab-button.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('fab-button: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/input/test/a11y/input.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('input: a11y'), () => {
     test('default layout should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 
 import { testSlidingItem } from '../test.utils';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/label/test/a11y/label.e2e.ts

@@ -84,7 +84,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('label: a11y for ion-color()'), () => {
     test('should not have accessibility violations when focused', async ({ page }) => {
       /**

core/src/components/loading/test/a11y/loading.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('loading: a11y'), () => {
     test('should set aria-labelledby with a message', async ({ page }) => {
       await page.setContent(

core/src/components/menu-button/test/a11y/menu-button.e2e.ts

@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Only ios mode uses ion-color() for the menu button
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('menu-button: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('progress-bar: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       /**

core/src/components/radio/test/a11y/radio.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
     test('default layout should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/range/test/a11y/range.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('range: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/refresher/test/a11y/refresher.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
   test.describe(title('refresher: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/router-link/test/a11y/router-link.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('router-link: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       /**

core/src/components/segment/test/a11y/segment.e2e.ts

@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Only md mode uses ion-color() for the segment button
  */
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('segment: a11y for ion-color()'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/select-popover/test/a11y/select-popover.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
   test.describe(title('select-popover: a11y'), () => {
     test('should not have accessibility violations when header is defined', async ({ page }) => {
       await page.setContent(

core/src/components/select/test/a11y/select.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('textarea: a11y'), () => {
     test('default layout should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/textarea/test/a11y/textarea.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('textarea: a11y'), () => {
     test('default layout should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/components/toast/test/a11y/toast.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
   test.describe(title('toast: Axe testing'), () => {
     test('should not have any axe violations with inline toasts', async ({ page }) => {
       await page.setContent(
@@ -234,7 +234,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * High contrast mode tests
  */
-configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(
+configs({ directions: ['ltr'], palettes: ['high-contrast-dark', 'high-contrast'] }).forEach(
   ({ title, config, screenshot }) => {
     test.describe(title('toast: high contrast: buttons'), () => {
       test.beforeEach(async ({ page }) => {

core/src/components/toggle/test/a11y/toggle.e2e.ts

@@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: a11y'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.setContent(

core/src/css/test/a11y/typography.e2e.ts

@@ -35,7 +35,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
   });
 });
 
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
   test.describe(title('typography: a11y'), () => {
     test('should not have accessibility violations for anchor tags', async ({ page }) => {
       /**

core/src/themes/test/colors/theme.e2e.ts

@@ -49,7 +49,7 @@ const styleTestHelpers = `
  * 6) The base color as the text color against the base color at 0.12 opacity as the background color
  * 7) The base color as the text color against the base color at 0.16 opacity as the background color
  */
-configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
   const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 
   test.describe(title('theme'), () => {
@@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa
   });
 });
 
-configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-contrast-dark'] }).forEach(
   ({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 

core/src/utils/test/playwright/generator.ts

@@ -8,15 +8,15 @@ export type Direction = 'ltr' | 'rtl';
  * - `high-contrast`: The high contrast light theme values.
  * - `high-contrast-dark`: The high contrast dark theme values.
  */
-export type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
+export type Palette = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
 
 export type TitleFn = (title: string) => string;
 export type ScreenshotFn = (fileName: string) => string;
 
 export interface TestConfig {
   mode: Mode;
   direction: Direction;
-  theme: Theme;
+  palette: Palette;
 }
 
 interface TestUtilities {
@@ -28,7 +28,7 @@ interface TestUtilities {
 interface TestConfigOption {
   modes?: Mode[];
   directions?: Direction[];
-  themes?: Theme[];
+  palettes?: Palette[];
 }
 
 /**
@@ -38,39 +38,39 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  const { mode, direction, theme } = config;
+  const { mode, direction, palette } = config;
 
-  if (theme === 'light') {
+  if (palette === 'light') {
     /**
      * Ionic has many existing tests that existed prior to
-     * the introduction of theme testing. To maintain backwards
-     * compatibility, we will not include the theme in the test
-     * title if the theme is set to light.
+     * the introduction of palette testing. To maintain backwards
+     * compatibility, we will not include the palette in the test
+     * title if the palette is set to light.
      */
     return `${title} - ${mode}/${direction}`;
   }
 
-  return `${title} - ${mode}/${direction}/${theme}`;
+  return `${title} - ${mode}/${direction}/${palette}`;
 };
 
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { mode, direction, theme } = config;
+  const { mode, direction, palette } = config;
 
-  if (theme === 'light') {
+  if (palette === 'light') {
     /**
      * Ionic has many existing tests that existed prior to
-     * the introduction of theme testing. To maintain backwards
-     * compatibility, we will not include the theme in the screenshot
-     * name if the theme is set to light.
+     * the introduction of palette testing. To maintain backwards
+     * compatibility, we will not include the palette in the screenshot
+     * name if the palette is set to light.
      */
     return `${fileName}-${mode}-${direction}.png`;
   }
 
-  return `${fileName}-${mode}-${direction}-${theme}.png`;
+  return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 
 /**
@@ -87,12 +87,12 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
    */
   const processedMode = modes ?? DEFAULT_MODES;
   const processedDirection = directions ?? DEFAULT_DIRECTIONS;
-  const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
+  const processedPalette = testConfig.palettes ?? DEFAULT_PALETTES;
 
   processedMode.forEach((mode) => {
     processedDirection.forEach((direction) => {
-      processedTheme.forEach((theme) => {
-        configs.push({ mode, direction, theme });
+      processedPalette.forEach((palette) => {
+        configs.push({ mode, direction, palette });
       });
     });
   });
@@ -108,10 +108,10 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
 
 const DEFAULT_MODES: Mode[] = ['ios', 'md'];
 const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
-const DEFAULT_THEMES: Theme[] = ['light'];
+const DEFAULT_PALETTES: Palette[] = ['light'];
 
 const DEFAULT_TEST_CONFIG_OPTION = {
   modes: DEFAULT_MODES,
   directions: DEFAULT_DIRECTIONS,
-  themes: DEFAULT_THEMES,
+  palettes: DEFAULT_PALETTES,
 };