From 778af4b5ac6623ce768944e2fc8fb7c2a777da68 Mon Sep 17 00:00:00 2001 From: zahlekhan Date: Tue, 28 Jul 2026 13:15:34 +0530 Subject: [PATCH 1/3] Fix demos dark mode and add visual tests --- .github/workflows/docs-visual-regression.yml | 59 +++++++ docs/.gitignore | 2 + docs/app/demos/layout.css | 27 +++- docs/app/demos/page.tsx | 1 + docs/e2e/demos-theme.spec.ts | 29 ++++ .../demos-dark.png | Bin 0 -> 35902 bytes .../demos-light.png | Bin 0 -> 35742 bytes docs/e2e/screenshot.css | 12 ++ docs/package.json | 4 + docs/playwright.config.ts | 33 ++++ pnpm-lock.yaml | 151 +++++++++++++----- 11 files changed, 270 insertions(+), 48 deletions(-) create mode 100644 .github/workflows/docs-visual-regression.yml create mode 100644 docs/e2e/demos-theme.spec.ts create mode 100644 docs/e2e/demos-theme.spec.ts-snapshots/demos-dark.png create mode 100644 docs/e2e/demos-theme.spec.ts-snapshots/demos-light.png create mode 100644 docs/e2e/screenshot.css create mode 100644 docs/playwright.config.ts diff --git a/.github/workflows/docs-visual-regression.yml b/.github/workflows/docs-visual-regression.yml new file mode 100644 index 000000000..392669108 --- /dev/null +++ b/.github/workflows/docs-visual-regression.yml @@ -0,0 +1,59 @@ +name: Docs visual regression + +on: + pull_request: + branches: [main] + paths: + - "docs/**" + - "packages/react-ui/**" + - "pnpm-lock.yaml" + - "pnpm-workspace.yaml" + - ".github/workflows/docs-visual-regression.yml" + push: + branches: [main] + paths: + - "docs/**" + - "packages/react-ui/**" + - "pnpm-lock.yaml" + - "pnpm-workspace.yaml" + - ".github/workflows/docs-visual-regression.yml" + +permissions: + contents: read + +jobs: + visual-regression: + runs-on: ubuntu-latest + timeout-minutes: 15 + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v2 + with: + version: 9.0.6 + + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: pnpm + cache-dependency-path: pnpm-lock.yaml + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Install Chromium + run: pnpm --filter @openuidev/docs exec playwright install --with-deps chromium + + - name: Test light and dark themes + run: pnpm --filter @openuidev/docs test:visual + + - name: Upload visual test artifacts + if: failure() + uses: actions/upload-artifact@v4 + with: + name: docs-visual-regression-results + path: | + docs/playwright-report + docs/test-results + if-no-files-found: ignore + retention-days: 7 diff --git a/docs/.gitignore b/docs/.gitignore index 8a11fd9b8..58a136ed2 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -9,6 +9,8 @@ /.next/ /out/ /build +/playwright-report/ +/test-results/ *.tsbuildinfo # misc diff --git a/docs/app/demos/layout.css b/docs/app/demos/layout.css index 21927ee20..b098717ff 100644 --- a/docs/app/demos/layout.css +++ b/docs/app/demos/layout.css @@ -30,8 +30,8 @@ --border: var(--openui-border-default); --border-strong: var(--openui-border-interactive); --text-primary: var(--openui-text-neutral-primary); - --text-secondary: var(--openui-text-neutral-secondary); - --text-tertiary: var(--openui-text-neutral-tertiary); + --text-secondary: color-mix(in srgb, var(--openui-text-neutral-primary) 68%, transparent); + --text-tertiary: color-mix(in srgb, var(--openui-text-neutral-primary) 60%, transparent); --btn-primary-bg: var(--openui-interactive-accent-default); --btn-primary-text: var(--openui-text-accent-primary); --btn-primary-hover: var(--openui-interactive-accent-hover); @@ -44,8 +44,8 @@ --chip-border: var(--openui-border-default); --code-bg: var(--openui-inverted-background); --code-text: var(--openui-text-accent-primary); - --code-text-secondary: var(--openui-text-accent-secondary); - --code-text-tertiary: var(--openui-text-accent-tertiary); + --code-text-secondary: color-mix(in srgb, var(--openui-text-accent-primary) 72%, transparent); + --code-text-tertiary: color-mix(in srgb, var(--openui-text-accent-primary) 60%, transparent); --code-hover: color-mix(in srgb, var(--openui-text-accent-primary) 8%, transparent); --code-hover-strong: color-mix(in srgb, var(--openui-text-accent-primary) 14%, transparent); --code-border: color-mix(in srgb, var(--openui-text-accent-primary) 12%, transparent); @@ -90,6 +90,25 @@ color 0.2s ease; } +/* The inverted tokens intentionally swap light and dark surfaces. They make a + useful dark code canvas in light mode, but become a white canvas in dark + mode. Keep the editor dark and strengthen muted content/control boundaries + when the site theme is dark. */ +:where([data-theme="dark"]) .app { + --border: color-mix(in srgb, var(--openui-text-neutral-primary) 16%, transparent); + --border-strong: color-mix(in srgb, var(--openui-text-neutral-primary) 36%, transparent); + --input-border: var(--border-strong); + --chip-border: var(--border); + --code-bg: var(--openui-background); + --code-text: var(--openui-text-neutral-primary); + --code-text-secondary: color-mix(in srgb, var(--openui-text-neutral-primary) 72%, transparent); + --code-text-tertiary: color-mix(in srgb, var(--openui-text-neutral-primary) 60%, transparent); + --code-hover: color-mix(in srgb, var(--openui-text-neutral-primary) 8%, transparent); + --code-hover-strong: color-mix(in srgb, var(--openui-text-neutral-primary) 14%, transparent); + --code-border: var(--border); + --panel-header-border: var(--border); +} + .app-body { display: flex; flex: 1; diff --git a/docs/app/demos/page.tsx b/docs/app/demos/page.tsx index d1c3cb970..da43d4605 100644 --- a/docs/app/demos/page.tsx +++ b/docs/app/demos/page.tsx @@ -159,6 +159,7 @@ export default function DemosPage() {