diff --git a/core/scripts/testing/themes/dark.css b/core/scripts/testing/themes/dark.css index e263803d56..2cbb666c3a 100644 --- a/core/scripts/testing/themes/dark.css +++ b/core/scripts/testing/themes/dark.css @@ -4,68 +4,68 @@ */ :root { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66, 140, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; + --ion-color-primary: #4d8dff; + --ion-color-primary-rgb: 77, 141, 255; + --ion-color-primary-contrast: #000000; + --ion-color-primary-contrast-rgb: 0, 0, 0; + --ion-color-primary-shade: #447ce0; + --ion-color-primary-tint: #5f98ff; - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80, 200, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; + --ion-color-secondary: #62bdff; + --ion-color-secondary-rgb: 98, 189, 255; + --ion-color-secondary-contrast: #000000; + --ion-color-secondary-contrast-rgb: 0, 0, 0; + --ion-color-secondary-shade: #56a6e0; + --ion-color-secondary-tint: #72c4ff; - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106, 100, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; + --ion-color-tertiary: #8482fb; + --ion-color-tertiary-rgb: 132, 130, 251; + --ion-color-tertiary-contrast: #000000; + --ion-color-tertiary-contrast-rgb: 0, 0, 0; + --ion-color-tertiary-shade: #7472dd; + --ion-color-tertiary-tint: #908ffb; - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47, 223, 117; + --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: #29c467; - --ion-color-success-tint: #44e283; + --ion-color-success-shade: #28bb50; + --ion-color-success-tint: #42d96b; - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255, 213, 52; + --ion-color-warning: #ffce31; + --ion-color-warning-rgb: 255, 206, 49; --ion-color-warning-contrast: #000000; --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; + --ion-color-warning-shade: #e0b52b; + --ion-color-warning-tint: #ffd346; - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255, 73, 97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; + --ion-color-danger: #f56570; + --ion-color-danger-rgb: 245, 101, 112; + --ion-color-danger-contrast: #000000; + --ion-color-danger-contrast-rgb: 0, 0, 0; + --ion-color-danger-shade: #d85963; + --ion-color-danger-tint: #f6747e; - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244, 245, 248; + --ion-color-dark: #f3f3f3; + --ion-color-dark-rgb: 243, 243, 243; --ion-color-dark-contrast: #000000; --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; + --ion-color-dark-shade: #d6d6d6; + --ion-color-dark-tint: #f4f4f4; - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium: #959595; + --ion-color-medium-rgb: 149, 149, 149; --ion-color-medium-contrast: #000000; --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; + --ion-color-medium-shade: #838383; + --ion-color-medium-tint: #a0a0a0; - --ion-color-light: #222428; - --ion-color-light-rgb: 34, 36, 40; + --ion-color-light: #2f2f2f; + --ion-color-light-rgb: 47, 47, 47; --ion-color-light-contrast: #ffffff; --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; + --ion-color-light-shade: #292929; + --ion-color-light-tint: #444444; } /* diff --git a/core/src/test/theme/dark/index.html b/core/src/test/theme/dark/index.html new file mode 100644 index 0000000000..7ec864ad15 --- /dev/null +++ b/core/src/test/theme/dark/index.html @@ -0,0 +1,89 @@ + + + + + Theme - Dark + + + + + + + + + + + + + + Theme - Dark + + + + +

+ Default + Default.focused + Default.activated +

+ +

+ Primary + Primary.focused + Primary.activated +

+ +

+ Secondary + Secondary.focused + Secondary.activated +

+ +

+ Tertiary + Tertiary.focused + Tertiary.activated +

+ +

+ Success + Success.focused + Success.activated +

+ +

+ Warning + Warning.focused + Warning.activated +

+ +

+ Danger + Danger.focused + Danger.activated +

+ +

+ Light + Light.focused + Light.activated +

+ +

+ Medium + Medium.focused + Medium.activated +

+ +

+ Dark + Dark.focused + Dark.activated +

+ + + + diff --git a/core/src/test/theme/theme.e2e.ts b/core/src/test/theme/theme.e2e.ts new file mode 100644 index 0000000000..8561971bd0 --- /dev/null +++ b/core/src/test/theme/theme.e2e.ts @@ -0,0 +1,214 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +const styleTestHelpers = ` + +`; + +/** + * All colors besides `light` should be tested against a dark background on dark theme. + */ +configs({ modes: ['md', 'ios'], directions: ['ltr'], themes: ['dark'] }).forEach(({ config, title }) => { + const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'medium', 'dark']; + + test.describe(title('theme'), () => { + test.beforeEach(({ skip }) => { + skip.browser('firefox', 'Color contrast ratio is consistent across browsers'); + skip.browser('webkit', 'Color contrast ratio is consistent across browsers'); + }); + + for (const color of colors) { + test(`color "${color}" should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`contrast color on "${color}" background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "${color}" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "${color}" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "${color}" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + } + }); +}); + +/** + * `light` color should be tested against a white background on dark theme. The mode doesn't matter here + * since we are testing against a consistent background color. + */ +configs({ modes: ['md'], directions: ['ltr'], themes: ['dark'] }).forEach(({ config, title }) => { + test.describe(title('theme'), () => { + test(`color light should pass AA guidelines on a white background`, async ({ page, skip }) => { + skip.browser('firefox', 'Color contrast ratio is consistent across browsers'); + skip.browser('webkit', 'Color contrast ratio is consistent across browsers'); + + await page.setContent( + `${styleTestHelpers} + +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`contrast color on "light" background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} + +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "light" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} + +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "light" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} + +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "light" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} + +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + }); +}); diff --git a/core/src/utils/test/playwright/generator.ts b/core/src/utils/test/playwright/generator.ts index 41b2abc183..5058be803e 100644 --- a/core/src/utils/test/playwright/generator.ts +++ b/core/src/utils/test/playwright/generator.ts @@ -111,4 +111,5 @@ const DEFAULT_THEMES: Theme[] = ['light']; const DEFAULT_TEST_CONFIG_OPTION = { modes: DEFAULT_MODES, directions: DEFAULT_DIRECTIONS, + themes: DEFAULT_THEMES, };