@@ -9,58 +9,72 @@ import { configs, test } from '@utils/test/playwright';
99const styleTestHelpers = `
1010 <style>
1111 main {
12- background: var(--ion-color-contrast);
1312 font-size: 14pt;
1413 }
15- .ion-background {
14+
15+ .ion-color {
16+ color: var(--ion-color-foreground);
17+ }
18+
19+ .ion-color-background {
1620 background: var(--ion-color-base);
21+ color: var(--ion-color-contrast);
1722 }
18- .ion-background-shade {
23+
24+ .ion-color-background-shade {
1925 background: var(--ion-color-shade);
26+ color: var(--ion-color-contrast);
2027 }
21- .ion-background-tint {
28+
29+ .ion-color-background-tint {
2230 background: var(--ion-color-tint);
31+ color: var(--ion-color-contrast);
2332 }
24- .ion-background-opacity-08 {
25- background: rgba(var(--ion-color-base-rgb), 0.08);
26- }
27- .ion-background-opacity-12 {
28- background: rgba(var(--ion-color-base-rgb), 0.12);
33+
34+ .ion-color-subtle {
35+ color: var(--ion-color-subtle-foreground);
2936 }
30- .ion-background-opacity-16 {
31- background: rgba(var(--ion-color-base-rgb), 0.16);
37+
38+ .ion-color-subtle-background {
39+ background: var(--ion-color-subtle-base);
40+ color: var(--ion-color-subtle-contrast);
3241 }
33- .ion-color {
34- color: var(--ion-color-base);
42+
43+ .ion-color-subtle-background-shade {
44+ background: var(--ion-color-subtle-shade);
45+ color: var(--ion-color-subtle-contrast);
3546 }
36- .ion-color-contrast {
37- color: var(--ion-color-contrast);
47+
48+ .ion-color-subtle-background-tint {
49+ background: var(--ion-color-subtle-tint);
50+ color: var(--ion-color-subtle-contrast);
3851 }
3952 </style>
4053` ;
4154
4255/**
4356 * All colors should be tested in the following scenarios:
44- * 1) The base color as the text color against the contrast color as the background color
57+ * 1) The foreground color as the text color against the default background color
4558 * 2) The contrast color as the text color against the base color as the background color
4659 * 3) The contrast color as the text color against the shade color as the background color
4760 * 4) The contrast color as the text color against the tint color as the background color
48- * 5) The base color as the text color against the base color at 0.08 opacity as the background color
49- * 6) The base color as the text color against the base color at 0.12 opacity as the background color
50- * 7) The base color as the text color against the base color at 0.16 opacity as the background color
61+ * 5) The subtle foreground color as the text color against the default background color
62+ * 6) The subtle contrast color as the text color against the subtle base color as the background color
63+ * 7) The subtle contrast color as the text color against the subtle shade color as the background color
64+ * 8) The subtle contrast color as the text color against the subtle tint color as the background color
5165 */
5266configs ( { modes : [ 'ionic-md' ] , directions : [ 'ltr' ] , palettes : [ 'light' , 'dark' ] } ) . forEach ( ( { config, title } ) => {
53- const colors = [ 'primary' , 'neutral ' , 'success' , 'warning' , 'danger' , 'light' ] ;
67+ const colors = [ 'primary' , 'secondary ' , 'success' , 'warning' , 'danger' , 'light' , 'medium' , 'dark '] ;
5468
55- // TODO(ROU-10778): Re-enable this test once the colors have been finalized
56- test . describe . skip ( title ( 'theme' ) , ( ) => {
69+ test . describe ( title ( 'palette colors: bold' ) , ( ) => {
5770 test . beforeEach ( ( { skip } ) => {
5871 skip . browser ( 'firefox' , 'Color contrast ratio is consistent across browsers' ) ;
5972 skip . browser ( 'webkit' , 'Color contrast ratio is consistent across browsers' ) ;
6073 } ) ;
6174
6275 for ( const color of colors ) {
63- test ( `color "${ color } , async ( { page } ) => {
76+ // 1) The foreground color as the text color against the default background color
77+ test ( `foreground color "${ color } , async ( { page } ) => {
6478 await page . setContent (
6579 `${ styleTestHelpers }
6680 <main class="ion-color-${ color }
@@ -73,11 +87,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
7387 expect ( results . violations ) . toEqual ( [ ] ) ;
7488 } ) ;
7589
90+ // 2) The contrast color as the text color against the base color as the background color
7691 test ( `contrast color on "${ color } , async ( { page } ) => {
7792 await page . setContent (
7893 `${ styleTestHelpers }
7994 <main class="ion-color-${ color }
80- <p class="ion-color-contrast ion- background">Hello World</p>
95+ <p class="ion-color-background">Hello World</p>
8196 </main>` ,
8297 config
8398 ) ;
@@ -86,11 +101,27 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
86101 expect ( results . violations ) . toEqual ( [ ] ) ;
87102 } ) ;
88103
104+ // 3) The contrast color as the text color against the shade color as the background color
89105 test ( `contrast color on "${ color } , async ( { page } ) => {
90106 await page . setContent (
91107 `${ styleTestHelpers }
92108 <main class="ion-color-${ color }
93- <p class="ion-color-contrast ion-background-shade">Hello World</p>
109+ <p class="ion-color-background-shade">Hello World</p>
110+ </main>` ,
111+ config
112+ ) ;
113+
114+ const results = await new AxeBuilder ( { page } ) . analyze ( ) ;
115+ expect ( results . violations ) . toEqual ( [ ] ) ;
116+ } ) ;
117+
118+ // 4) The contrast color as the text color against the tint color as the background color
119+ // TODO(ROU-10778): Re-enable this test once the colors have been finalized
120+ test . skip ( `contrast color on "${ color } , async ( { page } ) => {
121+ await page . setContent (
122+ `${ styleTestHelpers }
123+ <main class="ion-color-${ color }
124+ <p class="ion-color-background-tint">Hello World</p>
94125 </main>` ,
95126 config
96127 ) ;
@@ -99,11 +130,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
99130 expect ( results . violations ) . toEqual ( [ ] ) ;
100131 } ) ;
101132
102- test ( `contrast color on "${ color } , async ( { page } ) => {
133+ // 5) The subtle foreground color as the text color against the default background color
134+ test ( `subtle foreground color "${ color } , async ( { page } ) => {
103135 await page . setContent (
104136 `${ styleTestHelpers }
105137 <main class="ion-color-${ color }
106- <p class="ion-color-contrast ion-background-tint ">Hello World</p>
138+ <p class="ion-color-subtle ">Hello World</p>
107139 </main>` ,
108140 config
109141 ) ;
@@ -112,11 +144,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
112144 expect ( results . violations ) . toEqual ( [ ] ) ;
113145 } ) ;
114146
115- test ( `color "${ color } , async ( { page } ) => {
147+ // 6) The subtle contrast color as the text color against the subtle base color as the background color
148+ test ( `subtle contrast color on "${ color } , async ( { page } ) => {
116149 await page . setContent (
117150 `${ styleTestHelpers }
118151 <main class="ion-color-${ color }
119- <p class="ion-color ion-background-opacity-08 ">Hello World</p>
152+ <p class="ion-color-subtle-background ">Hello World</p>
120153 </main>` ,
121154 config
122155 ) ;
@@ -125,11 +158,13 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
125158 expect ( results . violations ) . toEqual ( [ ] ) ;
126159 } ) ;
127160
128- test ( `color "${ color } , async ( { page } ) => {
161+ // 7) The subtle contrast color as the text color against the subtle shade color as the background color
162+ // TODO(ROU-10778): Re-enable this test once the colors have been finalized
163+ test . skip ( `subtle contrast color on "${ color } , async ( { page } ) => {
129164 await page . setContent (
130165 `${ styleTestHelpers }
131166 <main class="ion-color-${ color }
132- <p class="ion-color ion- background-opacity-12 ">Hello World</p>
167+ <p class="ion-color-subtle- background-shade ">Hello World</p>
133168 </main>` ,
134169 config
135170 ) ;
@@ -138,11 +173,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
138173 expect ( results . violations ) . toEqual ( [ ] ) ;
139174 } ) ;
140175
141- test ( `color "${ color } , async ( { page } ) => {
176+ // 8) The subtle contrast color as the text color against the subtle tint color as the background color
177+ test ( `subtle contrast color on "${ color } , async ( { page } ) => {
142178 await page . setContent (
143179 `${ styleTestHelpers }
144180 <main class="ion-color-${ color }
145- <p class="ion-color ion- background-opacity-16 ">Hello World</p>
181+ <p class="ion-color-subtle- background-tint ">Hello World</p>
146182 </main>` ,
147183 config
148184 ) ;
0 commit comments