chore(docs): run visual regression in CI; align DatePicker text color

.github/workflows/ci.yml

@@ -47,6 +47,9 @@ jobs:
       - name: Accessibility tests
         run: pnpm test:accessibility
 
+      - name: Visual regression tests
+        run: pnpm test:visual
+
       - name: Upload Playwright report
         if: failure()
         uses: actions/upload-artifact@v4

apps/docs/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   reporter: process.env.CI ? [['html'], ['list']] : 'list',
   expect: {
     toHaveScreenshot: {
-      maxDiffPixels: 100,
+      maxDiffPixelRatio: 0.03,
     },
   },
   webServer: {

apps/docs/tests/visual/feedback.visual.spec.ts

@@ -4,8 +4,8 @@ import { gotoComponent, openFromDemo, previewByTitle, scrollDemoIntoView } from
 test.describe('feedback and data visuals', () => {
   test('button types', async ({ page }) => {
     await gotoComponent(page, 'button');
-    await scrollDemoIntoView(page, 'Type');
-    await expect(previewByTitle(page, 'Type')).toHaveScreenshot('button-types.png');
+    await scrollDemoIntoView(page, 'Variant');
+    await expect(previewByTitle(page, 'Variant')).toHaveScreenshot('button-types.png');
   });
 
   test('modal open state', async ({ page }) => {

apps/docs/tests/visual/interaction.visual.spec.ts

@@ -4,8 +4,8 @@ import { gotoComponent, openFromDemo, previewByTitle, scrollDemoIntoView } from
 test.describe('popup and interaction visuals', () => {
   test('button more types', async ({ page }) => {
     await gotoComponent(page, 'button');
-    await scrollDemoIntoView(page, 'More Types');
-    await expect(previewByTitle(page, 'More Types')).toHaveScreenshot('button-more-types.png');
+    await scrollDemoIntoView(page, 'Semantic Colors');
+    await expect(previewByTitle(page, 'Semantic Colors')).toHaveScreenshot('button-more-types.png');
   });
 
   test('button disabled states', async ({ page }) => {
@@ -81,19 +81,25 @@ test.describe('popup and interaction visuals', () => {
   test('form size alignment', async ({ page }) => {
     await gotoComponent(page, 'form');
     await scrollDemoIntoView(page, 'Size Alignment');
-    await expect(previewByTitle(page, 'Size Alignment')).toHaveScreenshot('form-size-alignment.png');
+    await expect(previewByTitle(page, 'Size Alignment')).toHaveScreenshot(
+      'form-size-alignment.png'
+    );
   });
 
   test('cascader default value', async ({ page }) => {
     await gotoComponent(page, 'cascader');
     await scrollDemoIntoView(page, 'Default Value');
-    await expect(previewByTitle(page, 'Default Value')).toHaveScreenshot('cascader-default-value.png');
+    await expect(previewByTitle(page, 'Default Value')).toHaveScreenshot(
+      'cascader-default-value.png'
+    );
   });
 
   test('cascader disabled options', async ({ page }) => {
     await gotoComponent(page, 'cascader');
     await scrollDemoIntoView(page, 'Disabled Options');
-    await expect(previewByTitle(page, 'Disabled Options')).toHaveScreenshot('cascader-disabled-options.png');
+    await expect(previewByTitle(page, 'Disabled Options')).toHaveScreenshot(
+      'cascader-disabled-options.png'
+    );
   });
 
   test('time picker controlled', async ({ page }) => {