Skip to content

feat(tokens): add gray and text colors #17613

feat(tokens): add gray and text colors

feat(tokens): add gray and text colors #17613

Triggered via pull request December 3, 2025 23:22
@thetaPCthetaPC
synchronize #30799
FW-6751
Status Cancelled
Total duration 14m 44s
Artifacts 8

build.yml

on: pull_request
build-react
50s
build-react
build-vue
38s
build-vue
Matrix: test-core-screenshot
build-angular
1m 11s
build-angular
build-angular-server
47s
build-angular-server
test-core-clean-build
15s
test-core-clean-build
test-core-lint
55s
test-core-lint
test-core-spec
46s
test-core-spec
build-react-router
22s
build-react-router
build-vue-router
41s
build-vue-router
verify-screenshots
2s
verify-screenshots
Matrix: test-angular-e2e
Matrix: test-react-e2e
Matrix: test-react-router-e2e
Matrix: test-vue-e2e
verify-test-angular-e2e
2s
verify-test-angular-e2e
verify-test-react-e2e
4s
verify-test-react-e2e
verify-test-react-router-e2e
3s
verify-test-react-router-e2e
verify-test-vue-e2e
3s
verify-test-vue-e2e
Fit to window
Zoom out
Zoom in

Annotations

69 errors and 1 notice
test-core-spec
Process completed with exit code 1.
test-core-screenshot (7, 20)
Process completed with exit code 1.
[Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - md/ltr/dark › should not have accessibility violations for anchor tags: src/css/test/typography/a11y/typography.e2e.ts#L56
3) [Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - md/ltr/dark › should not have accessibility violations for anchor tags Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 66 - Array [] + Array [ + Object { + "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", + "help": "Elements must meet minimum color contrast ratio thresholds", + "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#121212", + "contrastRatio": 3.07, + "expectedContrastRatio": "4.5:1", + "fgColor": "#0054e9", + "fontSize": "12.0pt (16px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.07 (foreground color: #0054e9, background color: #121212, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<body> + + <main> + <a href=\"#\">Link</a> + </main> + + + + </body>", + "target": Array [ + "body", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.07 (foreground color: #0054e9, background color: #121212, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<a href=\"#\">Link</a>", + "impact": "serious", + "none": Array [], + "target": Array [ + "a", + ], + }, + ], + "tags": Array [ + "cat.color", + "wcag2aa", + "wcag143", + "TTv5", + "TT13.c", + "EN-301-549", + "EN-9.1.4.3", + "ACT", + "RGAAv4", + "RGAA-3.2.1", + ], + }, + ] 54 | const results = await new AxeBuilder({ page }).analyze(); 55 | > 56 | expect(results.violations).toEqual([]); | ^ 57 | }); 58 | }); 59 | }); at /ionic/src/css/test/typography/a11y/typography.e2e.ts:56:34
[Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - ios/ltr/dark › should not have accessibility violations for anchor tags: src/css/test/typography/a11y/typography.e2e.ts#L56
2) [Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - ios/ltr/dark › should not have accessibility violations for anchor tags Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 66 - Array [] + Array [ + Object { + "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", + "help": "Elements must meet minimum color contrast ratio thresholds", + "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#000000", + "contrastRatio": 3.44, + "expectedContrastRatio": "4.5:1", + "fgColor": "#0054e9", + "fontSize": "12.0pt (16px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.44 (foreground color: #0054e9, background color: #000000, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<body> + + <main> + <a href=\"#\">Link</a> + </main> + + + + </body>", + "target": Array [ + "body", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.44 (foreground color: #0054e9, background color: #000000, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<a href=\"#\">Link</a>", + "impact": "serious", + "none": Array [], + "target": Array [ + "a", + ], + }, + ], + "tags": Array [ + "cat.color", + "wcag2aa", + "wcag143", + "TTv5", + "TT13.c", + "EN-301-549", + "EN-9.1.4.3", + "ACT", + "RGAAv4", + "RGAA-3.2.1", + ], + }, + ] 54 | const results = await new AxeBuilder({ page }).analyze(); 55 | > 56 | expect(results.violations).toEqual([]); | ^ 57 | }); 58 | }); 59 | }); at /ionic/src/css/test/typography/a11y/typography.e2e.ts:56:34
[Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions: src/components/action-sheet/test/translucent/action-sheet.e2e.ts#L17
1) [Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-action-sheet') 19409 pixels (ratio 0.07 of all image pixels) are different. Snapshot: action-sheet-translucent-ios-ltr.png Call log: - Expect "toHaveScreenshot(action-sheet-translucent-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 19409 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 19409 pixels (ratio 0.07 of all image pixels) are different. 15 | 16 | const actionSheet = page.locator('ion-action-sheet'); > 17 | await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-translucent')); | ^ 18 | }); 19 | }); 20 | }); at /ionic/src/components/action-sheet/test/translucent/action-sheet.e2e.ts:17:33
[Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions: src/components/action-sheet/test/translucent/action-sheet.e2e.ts#L17
1) [Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-action-sheet') 19409 pixels (ratio 0.07 of all image pixels) are different. Snapshot: action-sheet-translucent-ios-ltr.png Call log: - Expect "toHaveScreenshot(action-sheet-translucent-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 19409 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 19409 pixels (ratio 0.07 of all image pixels) are different. 15 | 16 | const actionSheet = page.locator('ion-action-sheet'); > 17 | await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-translucent')); | ^ 18 | }); 19 | }); 20 | }); at /ionic/src/components/action-sheet/test/translucent/action-sheet.e2e.ts:17:33
[Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions: src/components/action-sheet/test/translucent/action-sheet.e2e.ts#L17
1) [Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-action-sheet') 19409 pixels (ratio 0.07 of all image pixels) are different. Snapshot: action-sheet-translucent-ios-ltr.png Call log: - Expect "toHaveScreenshot(action-sheet-translucent-ios-ltr.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 19409 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-action-sheet') - locator resolved to <ion-action-sheet role="dialog" tabindex="-1" aria-modal="true" id="ion-overlay-1" aria-labelledby="action-sheet-1-header" class="sc-ion-action-sheet-ios-h ios action-sheet-translucent sc-ion-action-sheet-ios hydrated">…</ion-action-sheet> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 19409 pixels (ratio 0.07 of all image pixels) are different. 15 | 16 | const actionSheet = page.locator('ion-action-sheet'); > 17 | await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-translucent')); | ^ 18 | }); 19 | }); 20 | }); at /ionic/src/components/action-sheet/test/translucent/action-sheet.e2e.ts:17:33
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (4, 20)
Process completed with exit code 12.
test-core-screenshot (4, 20)
The operation was canceled.
test-core-screenshot (1, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (1, 20)
Process completed with exit code 12.
test-core-screenshot (1, 20)
The operation was canceled.
test-core-screenshot (10, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (10, 20)
Process completed with exit code 12.
test-core-screenshot (10, 20)
The operation was canceled.
test-core-screenshot (15, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (15, 20)
Process completed with exit code 12.
test-core-screenshot (15, 20)
The operation was canceled.
test-core-screenshot (5, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (5, 20)
Process completed with exit code 12.
test-core-screenshot (14, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (5, 20)
The operation was canceled.
test-core-screenshot (14, 20)
Process completed with exit code 12.
test-core-screenshot (14, 20)
The operation was canceled.
test-core-screenshot (6, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (6, 20)
Process completed with exit code 12.
test-core-screenshot (6, 20)
The operation was canceled.
test-core-screenshot (13, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (13, 20)
Process completed with exit code 12.
test-core-screenshot (13, 20)
The operation was canceled.
test-core-screenshot (12, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (12, 20)
Process completed with exit code 12.
test-core-screenshot (12, 20)
The operation was canceled.
test-core-screenshot (3, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (3, 20)
Process completed with exit code 12.
test-core-screenshot (16, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (3, 20)
The operation was canceled.
test-core-screenshot (16, 20)
Process completed with exit code 12.
test-core-screenshot (16, 20)
The operation was canceled.
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (17, 20)
Process completed with exit code 12.
test-core-screenshot (18, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (17, 20)
The operation was canceled.
test-core-screenshot (18, 20)
Process completed with exit code 12.
test-core-screenshot (18, 20)
The operation was canceled.
test-core-screenshot (11, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (11, 20)
Process completed with exit code 12.
test-core-screenshot (11, 20)
The operation was canceled.
test-core-screenshot (9, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (9, 20)
Process completed with exit code 12.
test-core-screenshot (9, 20)
The operation was canceled.
test-core-screenshot (8, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (8, 20)
Process completed with exit code 12.
test-core-screenshot (8, 20)
The operation was canceled.
test-core-screenshot (19, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (19, 20)
Process completed with exit code 12.
test-core-screenshot (19, 20)
The operation was canceled.
test-core-screenshot (20, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (20, 20)
Process completed with exit code 12.
test-core-screenshot (20, 20)
The operation was canceled.
test-core-screenshot (2, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (2, 20)
Process completed with exit code 12.
test-core-screenshot (2, 20)
The operation was canceled.
verify-screenshots
Process completed with exit code 1.
test-angular-e2e (ng17)
Canceling since a higher priority waiting request for refs/pull/30799/merge exists
test-angular-e2e (ng17)
The operation was canceled.
verify-test-angular-e2e
Process completed with exit code 1.
Ionic Framework Build
Canceling since a higher priority waiting request for refs/pull/30799/merge exists
🎭 Playwright Run Summary
1 failed [Mobile Chrome] › src/components/action-sheet/test/translucent/action-sheet.e2e.ts:6:9 › action sheet: translucent - ios/ltr › should not have visual regressions 2 flaky [Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - ios/ltr/dark › should not have accessibility violations for anchor tags [Mobile Firefox] › src/css/test/typography/a11y/typography.e2e.ts:40:9 › typography: a11y - md/ltr/dark › should not have accessibility violations for anchor tags 360 skipped 272 passed (2.5m)

Artifacts

Produced during runtime
Name Size Digest
ionic-angular
776 KB
sha256:d941bdcc62225c51566d568db0e38a9f779f025eefea860c5d4802231ca26796
ionic-angular-server
8.55 KB
sha256:d89e6659236d83e3710a6318d9c69a0345436ec582fe972ad3544f7ad6e97730
ionic-core
5.17 MB
sha256:466ce0dc735d2be3d78d239521e13e1e98396ba90e476d4b6059114dd709e813
ionic-react
314 KB
sha256:87850f1f255febec04d1feb738143acbceec400debc26010f15857c3d676a1a2
ionic-react-router
27.9 KB
sha256:0473bf94f559904a5465b712db72262788ad72c4eb7ba27fec9a727728cb6d01
ionic-vue
345 KB
sha256:3b0a730070761f98963ac7047f86593dd43964a474dd7a1331a352fa99a35201
ionic-vue-router
17.1 KB
sha256:459cb61c4b96266cb17a8c33c24bc9d0027d39143b9e9313b5da0a570e2e85e1
test-results-7-20
5.88 MB
sha256:f99594deda35b9bb5da5e8dc641a37fc48db671923ab9a25b6eef5aad33f5f79