Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: rename dark/high-contrast themes to palettes #29149

Merged
merged 8 commits into from
Mar 18, 2024
Merged

feat: rename dark/high-contrast themes to palettes #29149

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6b7dcdf
chore(playwright): migrate themes to palettes
sean-perkins Mar 13, 2024
7b54b09
feat: rename dark/high-contrast themes to palettes
sean-perkins Mar 13, 2024
5dcb743
chore: formatting
sean-perkins Mar 13, 2024
699b48a
fix: stylelint issues
sean-perkins Mar 13, 2024
ff52cc2
fix: import path location
sean-perkins Mar 14, 2024
aeced39
Merge remote-tracking branch 'origin/feature-8.0' into sp/theme-palettes
sean-perkins Mar 14, 2024
84590cd
chore: update path from merge
sean-perkins Mar 14, 2024
d11e394
Merge branch 'feature-8.0' into sp/theme-palettes
liamdebeasi Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions BREAKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
## Version 8.x

- [Browser and Platform Support](#version-8x-browser-platform-support)
- [Dark Theme](#version-8x-dark-theme)
- [Dark Mode](#version-8x-dark-mode)
- [Global Styles](#version-8x-global-styles)
- [Components](#version-8x-components)
- [Button](#version-8x-button)
Expand Down Expand Up @@ -60,9 +60,9 @@ This section details the desktop browser, JavaScript framework, and mobile platf
| iOS | 15+ |
| Android | 5.1+ with Chromium 89+ |

<h2 id="version-8x-dark-theme">Dark Theme</h2>
<h2 id="version-8x-dark-mode">Dark Mode</h2>

In previous versions, it was recommended to define the dark theme in the following way:
In previous versions, it was recommended to define the dark palette in the following way:

```css
@media (prefers-color-scheme: dark) {
Expand All @@ -80,15 +80,15 @@ In previous versions, it was recommended to define the dark theme in the followi
}
```

In Ionic Framework version 8, the dark theme is being distributed via css files that can be imported. Below is an example of importing a dark theme file in Angular:
In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:

```css
/* @import '@ionic/angular/css/themes/dark.always.css'; */
/* @import "@ionic/angular/css/themes/dark.class.css"; */
@import "@ionic/angular/css/themes/dark.system.css";
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";
```

By importing the `dark.system.css` file, the dark theme variables will be defined like the following:
By importing the `dark.system.css` file, the dark palette variables will be defined like the following:

```css
@media (prefers-color-scheme: dark) {
Expand All @@ -106,11 +106,11 @@ By importing the `dark.system.css` file, the dark theme variables will be define
}
```

Notice that the dark theme is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.

While migrating to include the new dark theme files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.

For more information on the new dark theme files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).

<h2 id="version-8x-global-styles">Global Styles</h2>

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/test/a11y/alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/test/basic/alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/back-button/test/a11y/back-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/badge/test/a11y/badge.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/button/test/a11y/button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/checkbox/test/a11y/checkbox.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/fab-button/test/a11y/fab-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/input/test/a11y/input.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/label/test/a11y/label.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/loading/test/a11y/loading.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/menu-button/test/a11y/menu-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/radio/test/a11y/radio.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
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(
Expand Down Expand Up @@ -131,7 +131,7 @@
const firstGroupRadios = page.locator('#first-group ion-radio');

await pageUtils.pressKeys('Tab');
await expect(firstGroupRadios.nth(0)).toBeFocused();

Check failure on line 134 in core/src/components/radio/test/a11y/radio.e2e.ts

View workflow job for this annotation

GitHub Actions / test-core-screenshot (18, 20)

[Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr › radio: keyboard navigation - ios/ltr › using arrow keys should move between enabled radios within group 

  1) [Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr › radio: keyboard navigation - ios/ltr › using arrow keys should move between enabled radios within group 
    Error: Timed out 5000ms waiting for expect(locator).toBeFocused()

    Locator: locator('#first-group ion-radio').first()
    Expected: focused
    Received: inactive
    Call log:
      - expect.toBeFocused with timeout 5000ms
      - waiting for locator('#first-group ion-radio').first()
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"


      132 |
      133 |         await pageUtils.pressKeys('Tab');
    > 134 |         await expect(firstGroupRadios.nth(0)).toBeFocused();
          |                                               ^
      135 |
      136 |         await page.keyboard.press('ArrowDown');
      137 |         await expect(firstGroupRadios.nth(1)).toBeFocused();

        at /home/runner/work/ionic-framework/ionic-framework/core/src/components/radio/test/a11y/radio.e2e.ts:134:47

Check failure on line 134 in core/src/components/radio/test/a11y/radio.e2e.ts

View workflow job for this annotation

GitHub Actions / test-core-screenshot (18, 20)

[Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr/dark › radio: keyboard navigation - ios/ltr/dark › using arrow keys should move between enabled radios within group 

  2) [Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr/dark › radio: keyboard navigation - ios/ltr/dark › using arrow keys should move between enabled radios within group 
    Error: Timed out 5000ms waiting for expect(locator).toBeFocused()

    Locator: locator('#first-group ion-radio').first()
    Expected: focused
    Received: inactive
    Call log:
      - expect.toBeFocused with timeout 5000ms
      - waiting for locator('#first-group ion-radio').first()
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="-1" aria-che…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="-1" aria-che…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"


      132 |
      133 |         await pageUtils.pressKeys('Tab');
    > 134 |         await expect(firstGroupRadios.nth(0)).toBeFocused();
          |                                               ^
      135 |
      136 |         await page.keyboard.press('ArrowDown');
      137 |         await expect(firstGroupRadios.nth(1)).toBeFocused();

        at /home/runner/work/ionic-framework/ionic-framework/core/src/components/radio/test/a11y/radio.e2e.ts:134:47

await page.keyboard.press('ArrowDown');
await expect(firstGroupRadios.nth(1)).toBeFocused();
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/range/test/a11y/range.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/refresher/test/a11y/refresher.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/router-link/test/a11y/router-link.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/segment/test/a11y/segment.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/select-popover/test/a11y/select-popover.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/select/test/a11y/select.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/textarea/test/a11y/textarea.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/toast/test/a11y/toast.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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 }) => {
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/toggle/test/a11y/toggle.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
13 changes: 13 additions & 0 deletions core/src/css/palettes/dark.always.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "./dark";

:root {
@include dark-base-palette();
}

:root.ios {
@include dark-ios-palette();
}

:root.md {
@include dark-md-palette();
}
13 changes: 13 additions & 0 deletions core/src/css/palettes/dark.class.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "./dark";

.ion-palette-dark {
@include dark-base-palette();
}

.ion-palette-dark.ios {
@include dark-ios-palette();
}

.ion-palette-dark.md {
@include dark-md-palette();
}
Loading
Loading