From e60987010aa03b03a328fb5625e8cf28e1bd1f75 Mon Sep 17 00:00:00 2001
From: TurtleWolfe <TurtleWolfe@users.noreply.github.com>
Date: Sat, 6 Jun 2026 00:22:35 +0000
Subject: [PATCH 1/3] feat(theme): #39 #46 map DaisyUI theme color into
 Calendly/Cal.com/Disqus embeds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Third-party embeds take a brand/link color as a plain hex and can't parse
DaisyUI's OKLCH custom properties, so all three hardcoded '#00a2ff'. This
derives the color from the active theme's --color-primary at runtime and
re-applies on theme switch.

- src/utils/embed-theme.ts: getEmbedColor (OKLCH→hex, bare/# formats),
  contrastRatio, and getAccessibleEmbedColor (theme primary when it clears
  WCAG AA against the bg, else a legible fallback — #46 NFR-002).
- src/hooks/useEmbedThemeColor.ts: data-theme MutationObserver (mirrors
  useMapTheme); one hook drives all three embeds.
- CalendlyProvider/CalComProvider: brand accent = theme primary. The button
  LABEL rides on --color-primary-content, which clears AA UI/large (3:1) for
  all 34 themes, so the raw 1:1 map is safe here.
- DisqusComments: link color is contrast-gated (raw primary fails AA on the
  thread bg for 18/34 themes — pale accents); colorScheme follows dark/light.

Honest contrast gate in Playwright, NOT vitest: jsdom never applies DaisyUI
CSS, so tokens resolve empty and a jsdom test would silently pass gray-on-gray.
tests/e2e/embed-theme-contrast.spec.ts measures real computed colors for all
34 themes and fails if a token doesn't resolve. Thresholds derived from
measured ratios; 0 themes need an allowlist.

Surfaced a latent a11y gap: the old Disqus light-mode link blue (#3b82f6) was
only 3.68:1 on white — replaced with blue-600 (#2563eb, 5.17:1).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../calendar/providers/CalComProvider.tsx     |  13 +-
 .../calendar/providers/CalendlyProvider.tsx   |  23 +--
 src/components/molecular/DisqusComments.tsx   |  45 ++++-
 src/hooks/useEmbedThemeColor.test.ts          |  80 ++++++++
 src/hooks/useEmbedThemeColor.ts               |  67 +++++++
 src/utils/embed-theme.test.ts                 | 153 ++++++++++++++
 src/utils/embed-theme.ts                      | 102 ++++++++++
 tests/e2e/embed-theme-contrast.spec.ts        | 188 ++++++++++++++++++
 8 files changed, 636 insertions(+), 35 deletions(-)
 create mode 100644 src/hooks/useEmbedThemeColor.test.ts
 create mode 100644 src/hooks/useEmbedThemeColor.ts
 create mode 100644 src/utils/embed-theme.test.ts
 create mode 100644 src/utils/embed-theme.ts
 create mode 100644 tests/e2e/embed-theme-contrast.spec.ts

diff --git a/src/components/calendar/providers/CalComProvider.tsx b/src/components/calendar/providers/CalComProvider.tsx
index 57d2769d..c50f2d06 100644
--- a/src/components/calendar/providers/CalComProvider.tsx
+++ b/src/components/calendar/providers/CalComProvider.tsx
@@ -1,7 +1,7 @@
 import Cal, { getCalApi } from '@calcom/embed-react';
 import { useEffect } from 'react';
 import { createLogger } from '@/lib/logger';
-import { isDarkTheme } from '@/utils/theme-utils';
+import { useEmbedThemeColor } from '@/hooks/useEmbedThemeColor';
 
 interface CalComProviderProps {
   calLink: string;
@@ -49,12 +49,9 @@ export function CalComProvider({
     })();
   }, []);
 
-  // Auto-detect theme
-  const theme =
-    typeof window !== 'undefined'
-      ? document.documentElement.getAttribute('data-theme')
-      : 'light';
-  const isDark = isDarkTheme(theme);
+  // Theme-aware brand color (issue #39). brandColor tracks the active DaisyUI
+  // theme's --color-primary; the binary light/dark `theme` prop is unchanged.
+  const { hexWithHash: brandColor, isDark } = useEmbedThemeColor('p');
 
   if (mode === 'popup') {
     return (
@@ -85,7 +82,7 @@ export function CalComProvider({
         ...config,
         theme: isDark ? 'dark' : 'light',
         branding: {
-          brandColor: '#00a2ff',
+          brandColor,
         },
       }}
     />
diff --git a/src/components/calendar/providers/CalendlyProvider.tsx b/src/components/calendar/providers/CalendlyProvider.tsx
index ea994c20..6bc7487b 100644
--- a/src/components/calendar/providers/CalendlyProvider.tsx
+++ b/src/components/calendar/providers/CalendlyProvider.tsx
@@ -3,9 +3,8 @@ import {
   PopupWidget,
   useCalendlyEventListener,
 } from 'react-calendly';
-import { useEffect } from 'react';
 import { createLogger } from '@/lib/logger';
-import { isDarkTheme } from '@/utils/theme-utils';
+import { useEmbedThemeColor } from '@/hooks/useEmbedThemeColor';
 
 interface CalendlyProviderProps {
   url: string;
@@ -44,26 +43,16 @@ export function CalendlyProvider({
     },
   });
 
-  // Apply theme-aware styles
-  useEffect(() => {
-    const theme = document.documentElement.getAttribute('data-theme');
-    const isDark = isDarkTheme(theme);
-
-    // Theme will be applied through pageSettings below
-    logger.debug('Theme detected', { theme, isDark });
-  }, []);
-
-  const theme =
-    typeof window !== 'undefined'
-      ? document.documentElement.getAttribute('data-theme')
-      : 'light';
-  const isDark = isDarkTheme(theme);
+  // Theme-aware brand color (issue #39). The accent tracks the active DaisyUI
+  // theme's --color-primary; bg/text stay on the dark/light split. The hook
+  // re-renders on data-theme change so the embed re-mounts with the new color.
+  const { hex: primaryColor, isDark } = useEmbedThemeColor('p');
 
   const pageSettings = {
     backgroundColor: isDark ? '1a1a1a' : 'ffffff',
     hideEventTypeDetails: false,
     hideLandingPageDetails: false,
-    primaryColor: '00a2ff',
+    primaryColor,
     textColor: isDark ? 'ffffff' : '000000',
   };
 
diff --git a/src/components/molecular/DisqusComments.tsx b/src/components/molecular/DisqusComments.tsx
index 147ec6cc..062646d9 100644
--- a/src/components/molecular/DisqusComments.tsx
+++ b/src/components/molecular/DisqusComments.tsx
@@ -2,7 +2,20 @@
 
 import { useEffect, useRef, useState } from 'react';
 import Script from 'next/script';
-import { isDarkTheme } from '@/utils/theme-utils';
+import { useEmbedThemeColor } from '@/hooks/useEmbedThemeColor';
+import { getAccessibleEmbedColor } from '@/utils/embed-theme';
+
+// Disqus thread background (hardcoded RGB so Disqus's embed.js never sees an
+// OKLCH value it can't parse). Link text must stay legible against these.
+const DISQUS_BG_DARK = '#111827'; // rgb(17, 24, 39)
+const DISQUS_BG_LIGHT = '#ffffff'; // rgb(255, 255, 255)
+// Legible link fallbacks used when a theme's primary fails AA on the bg above
+// (issue #46 NFR-002 — many DaisyUI primaries are pale accents). Both clear
+// WCAG AA (4.5:1) on their respective bg: blue-300 9.84:1 on dark, blue-600
+// 5.17:1 on light. (The previous blue-500 #3b82f6 was only 3.68:1 — a latent
+// a11y gap this contrast work surfaced.)
+const DISQUS_LINK_FALLBACK_DARK = '#93c5fd'; // Tailwind blue-300
+const DISQUS_LINK_FALLBACK_LIGHT = '#2563eb'; // Tailwind blue-600
 
 interface DisqusCommentsProps {
   slug: string;
@@ -40,6 +53,19 @@ export default function DisqusComments({
   const containerRef = useRef<HTMLDivElement>(null);
   const observerRef = useRef<IntersectionObserver | null>(null);
 
+  // Theme-aware link color + dark/light scheme (issue #46). The hook
+  // re-renders on data-theme change so the injected CSS + Disqus colorScheme
+  // re-apply across all 34 DaisyUI themes. The link color uses the theme
+  // primary only when it clears WCAG AA against the Disqus bg, else a legible
+  // fallback (NFR-002) — many DaisyUI primaries are pale accents that would be
+  // illegible as link text. Disqus's embed.js can't parse OKLCH, so this is hex.
+  const { isDark: dark } = useEmbedThemeColor('p');
+  const linkColor = getAccessibleEmbedColor(
+    dark ? DISQUS_BG_DARK : DISQUS_BG_LIGHT,
+    dark ? DISQUS_LINK_FALLBACK_DARK : DISQUS_LINK_FALLBACK_LIGHT,
+    'p'
+  );
+
   // Generate production URL - hardcoded for GitHub Actions compatibility
   const productionUrl = url?.startsWith('http')
     ? url
@@ -78,10 +104,12 @@ export default function DisqusComments({
       this.page.url = productionUrl;
       this.page.identifier = slug;
       this.page.title = title;
+      // Follow the DaisyUI dark/light split (issue #46).
+      this.page.colorScheme = dark ? 'dark' : 'light';
     };
 
     setIsLoaded(true);
-  }, [isVisible, shortname, slug, title, productionUrl, isLoaded]);
+  }, [isVisible, shortname, slug, title, productionUrl, isLoaded, dark]);
 
   // Initialize or reset Disqus when script is ready
   useEffect(() => {
@@ -137,21 +165,18 @@ export default function DisqusComments({
   useEffect(() => {
     if (!isVisible) return;
 
-    // Get computed styles to determine if we're in a dark theme
-    const dark = isDarkTheme(
-      document.documentElement.getAttribute('data-theme')
-    );
-
     const style = document.createElement('style');
     style.textContent = `
       /* Minimal override for Disqus OKLCH compatibility
          Only set what's absolutely necessary to prevent conflicts */
 
       :root {
-        /* Override CSS variables with RGB fallbacks for Disqus */
+        /* Override CSS variables with RGB fallbacks for Disqus.
+           bg/text follow the dark/light split; link tracks the active
+           DaisyUI theme's primary color (hex — Disqus can't parse OKLCH). */
         --disqus-bg: ${dark ? 'rgb(17, 24, 39)' : 'rgb(255, 255, 255)'};
         --disqus-text: ${dark ? 'rgb(243, 244, 246)' : 'rgb(31, 41, 55)'};
-        --disqus-link: ${dark ? 'rgb(147, 197, 253)' : 'rgb(59, 130, 246)'};
+        --disqus-link: ${linkColor};
       }
 
       #disqus_thread {
@@ -187,7 +212,7 @@ export default function DisqusComments({
         document.head.removeChild(styleToRemove);
       }
     };
-  }, [isVisible]);
+  }, [isVisible, dark, linkColor]);
 
   // Don't render if no shortname
   if (!shortname) {
diff --git a/src/hooks/useEmbedThemeColor.test.ts b/src/hooks/useEmbedThemeColor.test.ts
new file mode 100644
index 00000000..e8e43dd5
--- /dev/null
+++ b/src/hooks/useEmbedThemeColor.test.ts
@@ -0,0 +1,80 @@
+/**
+ * useEmbedThemeColor Hook — Unit Tests (issues #39, #46)
+ *
+ * Covers:
+ * - returns hex / hexWithHash / isDark for the seeded token
+ * - recomputes when the data-theme attribute changes (MutationObserver wiring)
+ * - returns the gray fallback when no token is set
+ *
+ * As with embed-theme.test.ts, jsdom doesn't apply DaisyUI CSS, so tokens are
+ * injected via inline style. This proves the observer wiring + formatting, not
+ * real-theme resolution.
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useEmbedThemeColor } from './useEmbedThemeColor';
+
+describe('useEmbedThemeColor', () => {
+  let originalRootStyle: string;
+  let originalTheme: string | null;
+
+  beforeEach(() => {
+    originalRootStyle = document.documentElement.getAttribute('style') ?? '';
+    originalTheme = document.documentElement.getAttribute('data-theme');
+  });
+
+  afterEach(() => {
+    if (originalRootStyle) {
+      document.documentElement.setAttribute('style', originalRootStyle);
+    } else {
+      document.documentElement.removeAttribute('style');
+    }
+    if (originalTheme) {
+      document.documentElement.setAttribute('data-theme', originalTheme);
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  });
+
+  it('returns both hex formats agreeing on the body', () => {
+    document.documentElement.style.setProperty('--color-primary', '0.4 0.2 30');
+    const { result } = renderHook(() => useEmbedThemeColor('p'));
+    expect(result.current.hex).toMatch(/^[0-9a-f]{6}$/);
+    expect(result.current.hexWithHash).toBe(`#${result.current.hex}`);
+  });
+
+  it('reports isDark from the active data-theme', () => {
+    document.documentElement.setAttribute('data-theme', 'dracula');
+    const { result } = renderHook(() => useEmbedThemeColor('p'));
+    expect(result.current.isDark).toBe(true);
+  });
+
+  it('recomputes when data-theme changes', async () => {
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.documentElement.style.setProperty('--color-primary', '0.4 0.2 30');
+    const { result } = renderHook(() => useEmbedThemeColor('p'));
+
+    const initialHex = result.current.hex;
+
+    // Simulate a theme switch: change the injected token AND flip data-theme so
+    // the MutationObserver fires and the hook reads the new color.
+    act(() => {
+      document.documentElement.style.setProperty(
+        '--color-primary',
+        '0.7 0.2 250'
+      );
+      document.documentElement.setAttribute('data-theme', 'dark');
+    });
+
+    await waitFor(() => {
+      expect(result.current.hex).not.toBe(initialHex);
+    });
+    expect(result.current.isDark).toBe(true);
+  });
+
+  it('returns the gray fallback when no token is set', () => {
+    const { result } = renderHook(() => useEmbedThemeColor('p'));
+    expect(result.current.hex).toBe('808080');
+  });
+});
diff --git a/src/hooks/useEmbedThemeColor.ts b/src/hooks/useEmbedThemeColor.ts
new file mode 100644
index 00000000..e90f9cd5
--- /dev/null
+++ b/src/hooks/useEmbedThemeColor.ts
@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getEmbedColor } from '@/utils/embed-theme';
+import { isDarkTheme } from '@/utils/theme-utils';
+
+export interface EmbedThemeColor {
+  /** Bare 6-digit hex, e.g. `"00a2ff"` (Calendly `primaryColor`). */
+  hex: string;
+  /** `#`-prefixed hex, e.g. `"#00a2ff"` (Cal.com `brandColor`, Disqus links). */
+  hexWithHash: string;
+  /** Whether the active theme is a dark theme. */
+  isDark: boolean;
+}
+
+/**
+ * Theme-aware embed color for third-party widgets (issues #39, #46).
+ *
+ * Returns the active DaisyUI theme's color for `token` in both `#`-conventions
+ * plus an `isDark` flag, and recomputes whenever the `data-theme` attribute
+ * changes (via MutationObserver) or the system color scheme flips. Mirrors the
+ * `useMapTheme` reactivity pattern so a single hook drives all three embeds
+ * without duplicate observers.
+ *
+ * @param token  DaisyUI token without the `--` prefix (default `"p"` = primary).
+ */
+export function useEmbedThemeColor(token: string = 'p'): EmbedThemeColor {
+  const [color, setColor] = useState<EmbedThemeColor>({
+    hex: getEmbedColor(token),
+    hexWithHash: getEmbedColor(token, { hash: true }),
+    isDark: false,
+  });
+
+  useEffect(() => {
+    const recompute = () =>
+      setColor({
+        hex: getEmbedColor(token),
+        hexWithHash: getEmbedColor(token, { hash: true }),
+        isDark: isDarkTheme(
+          document.documentElement.getAttribute('data-theme')
+        ),
+      });
+
+    // Seed once on mount (covers the SSR → client hydration delta and the
+    // initial theme, which the useState initializer ran before `document` was
+    // guaranteed to carry the resolved theme).
+    recompute();
+
+    const observer = new MutationObserver(recompute);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', recompute);
+
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener('change', recompute);
+    };
+  }, [token]);
+
+  return color;
+}
+
+export default useEmbedThemeColor;
diff --git a/src/utils/embed-theme.test.ts b/src/utils/embed-theme.test.ts
new file mode 100644
index 00000000..be77de5e
--- /dev/null
+++ b/src/utils/embed-theme.test.ts
@@ -0,0 +1,153 @@
+/**
+ * embed-theme — Unit Tests (issues #39, #46)
+ *
+ * Covers getEmbedColor:
+ * - reads --color-primary off :root and returns a 6-digit hex
+ * - bare vs `#`-prefixed format flag
+ * - both formats agree on the hex body
+ * - falls back to 808080 when the token is unset (never white/empty)
+ *
+ * NOTE: jsdom does not apply DaisyUI's stylesheet, so these tests inject the
+ * token via an inline style (the same approach as theme-utils.test.ts). They
+ * prove the math + formatting, NOT real-theme contrast — the 34-theme contrast
+ * assertion lives in tests/e2e/embed-theme-contrast.spec.ts where DaisyUI CSS
+ * actually resolves.
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import {
+  getEmbedColor,
+  contrastRatio,
+  getAccessibleEmbedColor,
+} from './embed-theme';
+
+describe('getEmbedColor', () => {
+  let originalRootStyle: string;
+
+  beforeEach(() => {
+    originalRootStyle = document.documentElement.getAttribute('style') ?? '';
+  });
+
+  afterEach(() => {
+    if (originalRootStyle) {
+      document.documentElement.setAttribute('style', originalRootStyle);
+    } else {
+      document.documentElement.removeAttribute('style');
+    }
+  });
+
+  it('returns a bare 6-digit hex by default', () => {
+    document.documentElement.style.setProperty('--color-primary', '0.4 0.2 30');
+    const hex = getEmbedColor('p');
+    expect(hex).toMatch(/^[0-9a-f]{6}$/);
+    expect(hex.startsWith('#')).toBe(false);
+  });
+
+  it('prefixes with # when opts.hash is true', () => {
+    document.documentElement.style.setProperty('--color-primary', '0.4 0.2 30');
+    const hex = getEmbedColor('p', { hash: true });
+    expect(hex).toMatch(/^#[0-9a-f]{6}$/);
+  });
+
+  it('the two formats agree on the hex body', () => {
+    document.documentElement.style.setProperty(
+      '--color-primary',
+      '0.6 0.1 180'
+    );
+    const bare = getEmbedColor('p');
+    const hashed = getEmbedColor('p', { hash: true });
+    expect(`#${bare}`).toBe(hashed);
+  });
+
+  it('defaults the token to primary', () => {
+    document.documentElement.style.setProperty('--color-primary', '0.4 0.2 30');
+    expect(getEmbedColor()).toBe(getEmbedColor('p'));
+  });
+
+  it('falls back to 808080 when the token is unset (not empty, not white)', () => {
+    // No --color-* set on :root → getDaisyUIColorAsThree returns #808080.
+    const hex = getEmbedColor('p');
+    expect(hex).toBe('808080');
+    expect(getEmbedColor('p', { hash: true })).toBe('#808080');
+  });
+
+  it('resolves a different token (secondary)', () => {
+    document.documentElement.style.setProperty(
+      '--color-secondary',
+      '0.5 0.12 90'
+    );
+    const hex = getEmbedColor('s');
+    expect(hex).toMatch(/^[0-9a-f]{6}$/);
+    // A real color, not the gray fallback.
+    expect(hex).not.toBe('808080');
+  });
+});
+
+describe('contrastRatio', () => {
+  it('returns 21 for black vs white', () => {
+    expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 0);
+  });
+
+  it('returns 1 for identical colors', () => {
+    expect(contrastRatio('#3b82f6', '#3b82f6')).toBeCloseTo(1, 5);
+  });
+
+  it('is order-independent', () => {
+    expect(contrastRatio('#111827', '#93c5fd')).toBeCloseTo(
+      contrastRatio('#93c5fd', '#111827'),
+      5
+    );
+  });
+
+  it('tolerates colors with or without a leading #', () => {
+    expect(contrastRatio('000000', 'ffffff')).toBeCloseTo(21, 0);
+  });
+});
+
+describe('getAccessibleEmbedColor', () => {
+  let originalRootStyle: string;
+
+  beforeEach(() => {
+    originalRootStyle = document.documentElement.getAttribute('style') ?? '';
+  });
+  afterEach(() => {
+    if (originalRootStyle) {
+      document.documentElement.setAttribute('style', originalRootStyle);
+    } else {
+      document.documentElement.removeAttribute('style');
+    }
+  });
+
+  it('returns the theme primary when it clears AA on the background', () => {
+    // A dark primary on a white bg easily clears 4.5:1.
+    document.documentElement.style.setProperty(
+      '--color-primary',
+      '0.2 0.05 250' // dark blue
+    );
+    const result = getAccessibleEmbedColor('#ffffff', '#3b82f6', 'p');
+    // It chose the theme color, not the fallback.
+    expect(result).toBe(getEmbedColor('p', { hash: true }));
+    expect(contrastRatio(result, '#ffffff')).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('falls back when the theme primary fails AA on the background', () => {
+    // A very pale primary on white fails 4.5:1 → fallback returned.
+    document.documentElement.style.setProperty(
+      '--color-primary',
+      '0.95 0.02 90' // near-white
+    );
+    const fallback = '#3b82f6';
+    const result = getAccessibleEmbedColor('#ffffff', fallback, 'p');
+    expect(result).toBe(fallback);
+  });
+
+  it('returns a # -prefixed hex either way', () => {
+    document.documentElement.style.setProperty(
+      '--color-primary',
+      '0.2 0.05 250'
+    );
+    expect(getAccessibleEmbedColor('#ffffff', '#3b82f6', 'p')).toMatch(
+      /^#[0-9a-f]{6}$/
+    );
+  });
+});
diff --git a/src/utils/embed-theme.ts b/src/utils/embed-theme.ts
new file mode 100644
index 00000000..f0e00f94
--- /dev/null
+++ b/src/utils/embed-theme.ts
@@ -0,0 +1,102 @@
+import { getDaisyUIColorAsThree } from '@/utils/theme-utils';
+
+/**
+ * Shared theme → third-party-embed color mapping (issues #39, #46).
+ *
+ * Third-party embeds (Calendly, Cal.com, Disqus) take a brand/accent/link color
+ * as a plain hex string and cannot parse DaisyUI's OKLCH CSS custom properties.
+ * This module reads the active DaisyUI theme's tokens off `:root`, runs the
+ * OKLCH→sRGB math (via `getDaisyUIColorAsThree`), and returns a 6-digit hex in
+ * whichever `#`-convention the embed expects:
+ *
+ * - Calendly's `pageSettings.primaryColor` wants a bare hex (`"00a2ff"`).
+ * - Cal.com's `branding.brandColor` and Disqus link colors want `"#00a2ff"`.
+ *
+ * The brand-accent mapping ({@link getEmbedColor}) is mechanical 1:1 — a
+ * button's label rides on DaisyUI's paired `*-content` token, so the accent
+ * itself doesn't need to be legible against the page background.
+ *
+ * Link text is different: Disqus paints links in the chosen color directly on
+ * its thread background, so a raw primary that happens to be pale (cupcake,
+ * pastel, aqua, …) would be illegible. {@link getAccessibleEmbedColor} satisfies
+ * issue #46's NFR-002 by returning the theme primary ONLY when it clears the
+ * WCAG AA text bar against the given background, and a guaranteed-legible
+ * fallback otherwise — the spec's "fallback for unmapped themes".
+ *
+ * Callers MUST re-invoke on theme change; use {@link useEmbedThemeColor} which
+ * wires the canonical `data-theme` MutationObserver.
+ *
+ * SSR-safe: `getDaisyUIColorAsThree` returns the `#808080` fallback when
+ * `document` is undefined (static export renders these client-side only).
+ */
+
+/** Minimum WCAG AA contrast for normal-size link text. */
+const AA_TEXT_RATIO = 4.5;
+
+/**
+ * Brand/accent color for an embed (Calendly `primaryColor`, Cal.com
+ * `brandColor`). Mechanical 1:1 map of the active theme's token.
+ *
+ * @param token  DaisyUI token without the `--` prefix — `"p"` (primary, default),
+ *               `"s"`, `"a"`, `"b1"`, etc.
+ * @param opts.hash  When true, prefix the result with `#`. Default false.
+ * @returns      A 6-character hex color, optionally `#`-prefixed.
+ */
+export function getEmbedColor(
+  token: string = 'p',
+  opts: { hash?: boolean } = {}
+): string {
+  const hex = getDaisyUIColorAsThree(token).getHexString();
+  return opts.hash ? `#${hex}` : hex;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const lin = (c: number) => {
+    const cs = c / 255;
+    return cs <= 0.03928 ? cs / 12.92 : ((cs + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/**
+ * WCAG contrast ratio (1–21) between two hex colors. Order-independent.
+ */
+export function contrastRatio(hexA: string, hexB: string): number {
+  const l1 = relativeLuminance(hexToRgb(hexA));
+  const l2 = relativeLuminance(hexToRgb(hexB));
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/**
+ * Theme-derived link color that is GUARANTEED legible (WCAG AA, 4.5:1) against
+ * `backgroundHex` (issue #46 NFR-002). Returns the active theme's `token` color
+ * if it clears the bar; otherwise the supplied legible `fallbackHex`.
+ *
+ * @param backgroundHex  The surface the text sits on, `#`-prefixed (e.g. the
+ *                       Disqus thread bg `"#111827"` / `"#ffffff"`).
+ * @param fallbackHex    A color known to be legible on `backgroundHex`,
+ *                       `#`-prefixed. Used when the theme color fails contrast.
+ * @param token          DaisyUI token (default `"p"`).
+ * @returns              A `#`-prefixed hex that clears 4.5:1 on `backgroundHex`.
+ */
+export function getAccessibleEmbedColor(
+  backgroundHex: string,
+  fallbackHex: string,
+  token: string = 'p'
+): string {
+  const candidate = getEmbedColor(token, { hash: true });
+  return contrastRatio(candidate, backgroundHex) >= AA_TEXT_RATIO
+    ? candidate
+    : fallbackHex;
+}
diff --git a/tests/e2e/embed-theme-contrast.spec.ts b/tests/e2e/embed-theme-contrast.spec.ts
new file mode 100644
index 00000000..5e22d4da
--- /dev/null
+++ b/tests/e2e/embed-theme-contrast.spec.ts
@@ -0,0 +1,188 @@
+import { test, expect } from '@playwright/test';
+
+// Embed-theme contrast gate (issues #39, #46).
+//
+// The embeds now derive their colors from the active DaisyUI theme:
+//   - Calendly `primaryColor` / Cal.com `brandColor` = theme --color-primary
+//     (a button accent; the button LABEL rides on --color-primary-content).
+//   - Disqus link color = theme --color-primary IF it clears WCAG AA on the
+//     Disqus thread bg, else a legible fallback (getAccessibleEmbedColor).
+//
+// This spec verifies the ACTUAL rendered pairings are legible for every shipped
+// theme, asserting on REAL browser-computed colors.
+//
+// WHY PLAYWRIGHT, NOT VITEST: DaisyUI's stylesheet is never applied in jsdom,
+// so getComputedStyle(:root).getPropertyValue('--color-primary') returns an
+// empty string there and the helpers fall back to gray — a jsdom contrast test
+// would silently pass against gray-on-gray for every theme. This runs in
+// chromium-gen against the built static site where DaisyUI CSS resolves. The
+// HONESTY GUARD below fails the test if a token resolves to a degenerate value,
+// so a future build that drops DaisyUI CSS can never make this pass vacuously.
+//
+// Thresholds chosen from real measured ratios (see the PR description):
+//   - primary-content on primary: all 34 themes ≥ 3.64:1 → assert AA UI/large 3:1.
+//   - accessible Disqus link on disqus-bg: guaranteed ≥ 4.5:1 by the fallback.
+// No theme allowlist is needed; if one were, it would carry a justification,
+// never a silent skip.
+
+const THEMES = [
+  'scripthammer-dark',
+  'scripthammer-light',
+  'light',
+  'dark',
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'corporate',
+  'synthwave',
+  'retro',
+  'cyberpunk',
+  'valentine',
+  'halloween',
+  'garden',
+  'forest',
+  'aqua',
+  'lofi',
+  'pastel',
+  'fantasy',
+  'wireframe',
+  'black',
+  'luxury',
+  'dracula',
+  'cmyk',
+  'autumn',
+  'business',
+  'acid',
+  'lemonade',
+  'night',
+  'coffee',
+  'winter',
+  'dim',
+  'nord',
+  'sunset',
+] as const;
+
+// Mirrors src/utils/theme-utils.ts DARK_THEMES (drives the Disqus bg choice).
+const DARK_THEMES = new Set([
+  'scripthammer-dark',
+  'dark',
+  'synthwave',
+  'halloween',
+  'forest',
+  'black',
+  'luxury',
+  'dracula',
+  'business',
+  'night',
+  'coffee',
+  'dim',
+  'sunset',
+]);
+
+// Mirrors DisqusComments.tsx constants.
+const DISQUS_BG_DARK = '#111827';
+const DISQUS_BG_LIGHT = '#ffffff';
+const DISQUS_LINK_FALLBACK_DARK = '#93c5fd'; // blue-300
+const DISQUS_LINK_FALLBACK_LIGHT = '#2563eb'; // blue-600
+
+const AA_TEXT = 4.5; // normal text
+const AA_UI = 3; // UI components / large text
+
+interface Measured {
+  primary: string; // computed rgb() of --color-primary
+  primaryContent: string; // computed rgb() of --color-primary-content
+}
+
+test.describe('embed color contrast across all DaisyUI themes', () => {
+  test.use({ viewport: { width: 1280, height: 1024 } });
+
+  for (const theme of THEMES) {
+    test(`${theme} — embed colors legible`, async ({ page }) => {
+      await page.addInitScript(
+        (t) => window.localStorage.setItem('theme', t),
+        theme
+      );
+      await page.goto('/themes/', { waitUntil: 'networkidle' });
+      await expect(page.locator('html')).toHaveAttribute('data-theme', theme);
+
+      // Resolve the OKLCH custom properties to concrete sRGB by painting them
+      // onto a real element (getComputedStyle on the raw custom property would
+      // echo the OKLCH token string).
+      const m = await page.evaluate<Measured>(() => {
+        const probe = (prop: string): string => {
+          const el = document.createElement('div');
+          el.style.color = `var(${prop})`;
+          document.body.appendChild(el);
+          const c = getComputedStyle(el).color;
+          el.remove();
+          return c;
+        };
+        return {
+          primary: probe('--color-primary'),
+          primaryContent: probe('--color-primary-content'),
+        };
+      });
+
+      // Shared WCAG math (rgb() string → ratio), mirrored from the app helper.
+      const parseRgb = (s: string): [number, number, number] => {
+        const n = s.match(/-?[\d.]+/g);
+        if (!n || n.length < 3) return [-1, -1, -1];
+        return [Number(n[0]), Number(n[1]), Number(n[2])];
+      };
+      const relLum = ([r, g, b]: number[]): number => {
+        const lin = (c: number) => {
+          const cs = c / 255;
+          return cs <= 0.03928 ? cs / 12.92 : ((cs + 0.055) / 1.055) ** 2.4;
+        };
+        return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+      };
+      const ratio = (a: number[], b: number[]): number => {
+        const l1 = relLum(a),
+          l2 = relLum(b);
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+      };
+      const hexToRgb = (h: string): number[] => [
+        parseInt(h.slice(1, 3), 16),
+        parseInt(h.slice(3, 5), 16),
+        parseInt(h.slice(5, 7), 16),
+      ];
+
+      const primary = parseRgb(m.primary);
+      const primaryContent = parseRgb(m.primaryContent);
+
+      // HONESTY GUARD — a real theme always resolves to parseable colors.
+      expect(
+        primary[0] >= 0 && primaryContent[0] >= 0,
+        `Could not resolve theme tokens for "${theme}" ` +
+          `(primary="${m.primary}", primary-content="${m.primaryContent}"). ` +
+          `DaisyUI CSS may not have applied — a real failure, not a pass.`
+      ).toBe(true);
+
+      // (#39) Calendly/Cal.com paint buttons with the brand color; the label is
+      // --color-primary-content on --color-primary. Assert AA UI/large (3:1).
+      const brandRatio = ratio(primary, primaryContent);
+      expect(
+        brandRatio,
+        `${theme}: brand-button label (primary-content on primary) = ` +
+          `${brandRatio.toFixed(2)}:1 (need ≥ ${AA_UI}:1)`
+      ).toBeGreaterThanOrEqual(AA_UI);
+
+      // (#46) Disqus link = accessible color the component will actually emit:
+      // primary if it clears AA on the bg, else the legible fallback. Recompute
+      // the component's selection here and assert the RESULT clears AA text.
+      const bg = DARK_THEMES.has(theme) ? DISQUS_BG_DARK : DISQUS_BG_LIGHT;
+      const fallback = DARK_THEMES.has(theme)
+        ? DISQUS_LINK_FALLBACK_DARK
+        : DISQUS_LINK_FALLBACK_LIGHT;
+      const bgRgb = hexToRgb(bg);
+      const primaryClears = ratio(primary, bgRgb) >= AA_TEXT;
+      const chosenLink = primaryClears ? primary : hexToRgb(fallback);
+      const linkRatio = ratio(chosenLink, bgRgb);
+      expect(
+        linkRatio,
+        `${theme}: Disqus link (${primaryClears ? 'theme primary' : 'fallback'}) ` +
+          `on bg ${bg} = ${linkRatio.toFixed(2)}:1 (need ≥ ${AA_TEXT}:1)`
+      ).toBeGreaterThanOrEqual(AA_TEXT);
+    });
+  }
+});

From 0c3e50b0da15ba54e7b6082a146977b3701c618d Mon Sep 17 00:00:00 2001
From: TurtleWolfe <TurtleWolfe@users.noreply.github.com>
Date: Sat, 6 Jun 2026 01:01:38 +0000
Subject: [PATCH 2/3] =?UTF-8?q?fix(theme):=20address=20review=20=E2=80=94?=
 =?UTF-8?q?=20Disqus=20colorScheme=20live-update=20+=20non-vacuous=20contr?=
 =?UTF-8?q?ast=20guard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adversarial review (verified against real Chromium) found two real issues:

1. Disqus colorScheme froze on theme switch. The config builder sat behind the
   one-shot `isLoaded` guard, so `disqus_config.colorScheme` was never rebuilt
   and the reset effect (deps without `dark`) never re-fired — only the injected
   CSS updated live. Moved config construction into the reset effect with `dark`
   in its deps, so a post-load theme switch rebuilds the config and calls
   DISQUS.reset to re-render the iframe in the new scheme.

2. The e2e contrast honesty guard was vacuous. An unresolved var(--color-primary)
   is invalid-at-computed-value-time and `color` falls back to the inherited body
   color — a valid rgb() — so `primary[0] >= 0` always passed; a tokens-dropped
   build would NOT fail. Now assert `primary !== primary-content` (verified
   collision-free across all 34 real themes; both collapse to the inherited color
   when tokens don't resolve, failing loudly). Added KNOWN_PALE_PRIMARY checks so
   the Disqus-link assertion can't pass trivially — it proves the AA gate actually
   rejects a real pale primary (cupcake/pastel/aqua/… → fallback).

Minors: seed useEmbedThemeColor's useState to the SSR-deterministic #808080 for
all fields (avoids a hydration mismatch on the color fields); soften the
Calendly/Cal.com comments (iframes apply color on mount, not live re-color).

Verified: type-check, lint, build green; 17 unit tests pass; all 34 themes pass
the strengthened assertions offline against the compiled DaisyUI CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../calendar/providers/CalComProvider.tsx     |  6 +-
 .../calendar/providers/CalendlyProvider.tsx   |  7 +-
 src/components/molecular/DisqusComments.tsx   | 23 +++----
 src/hooks/useEmbedThemeColor.ts               | 10 ++-
 tests/e2e/embed-theme-contrast.spec.ts        | 64 ++++++++++++++++---
 5 files changed, 84 insertions(+), 26 deletions(-)

diff --git a/src/components/calendar/providers/CalComProvider.tsx b/src/components/calendar/providers/CalComProvider.tsx
index c50f2d06..aaf1d762 100644
--- a/src/components/calendar/providers/CalComProvider.tsx
+++ b/src/components/calendar/providers/CalComProvider.tsx
@@ -49,8 +49,10 @@ export function CalComProvider({
     })();
   }, []);
 
-  // Theme-aware brand color (issue #39). brandColor tracks the active DaisyUI
-  // theme's --color-primary; the binary light/dark `theme` prop is unchanged.
+  // Theme-aware brand color (issue #39). brandColor is the active DaisyUI
+  // theme's --color-primary, applied to the embed on mount; the binary
+  // light/dark `theme` prop is unchanged. (The Cal.com iframe initializes once,
+  // so an already-rendered embed keeps its color until it re-initializes.)
   const { hexWithHash: brandColor, isDark } = useEmbedThemeColor('p');
 
   if (mode === 'popup') {
diff --git a/src/components/calendar/providers/CalendlyProvider.tsx b/src/components/calendar/providers/CalendlyProvider.tsx
index 6bc7487b..c9d6f7a9 100644
--- a/src/components/calendar/providers/CalendlyProvider.tsx
+++ b/src/components/calendar/providers/CalendlyProvider.tsx
@@ -43,9 +43,10 @@ export function CalendlyProvider({
     },
   });
 
-  // Theme-aware brand color (issue #39). The accent tracks the active DaisyUI
-  // theme's --color-primary; bg/text stay on the dark/light split. The hook
-  // re-renders on data-theme change so the embed re-mounts with the new color.
+  // Theme-aware brand color (issue #39). The accent is the active DaisyUI
+  // theme's --color-primary, applied to the widget on mount; bg/text stay on
+  // the dark/light split. (react-calendly builds the iframe once on mount, so
+  // an already-rendered widget keeps its color until it next re-initializes.)
   const { hex: primaryColor, isDark } = useEmbedThemeColor('p');
 
   const pageSettings = {
diff --git a/src/components/molecular/DisqusComments.tsx b/src/components/molecular/DisqusComments.tsx
index 062646d9..10c96e8c 100644
--- a/src/components/molecular/DisqusComments.tsx
+++ b/src/components/molecular/DisqusComments.tsx
@@ -94,11 +94,20 @@ export default function DisqusComments({
     };
   }, [shortname]);
 
-  // Configure Disqus when visible
+  // Mark loaded so the script tag renders (one-shot gate).
   useEffect(() => {
     if (!isVisible || !shortname || isLoaded) return;
+    setIsLoaded(true);
+  }, [isVisible, shortname, isLoaded]);
+
+  // Build/refresh window.disqus_config and (re)initialize Disqus. `dark` is in
+  // the deps so a post-load theme switch rebuilds the config with the new
+  // colorScheme and calls DISQUS.reset to re-render the embed in that scheme
+  // (issue #46). The config builder must be rebuilt here — not behind the
+  // one-shot isLoaded gate above — or colorScheme would freeze at first load.
+  useEffect(() => {
+    if (!scriptReady || !isLoaded || !shortname) return;
 
-    // Set global Disqus configuration
     window.disqus_config = function (this: any) {
       this.page = this.page || {};
       this.page.url = productionUrl;
@@ -108,14 +117,6 @@ export default function DisqusComments({
       this.page.colorScheme = dark ? 'dark' : 'light';
     };
 
-    setIsLoaded(true);
-  }, [isVisible, shortname, slug, title, productionUrl, isLoaded, dark]);
-
-  // Initialize or reset Disqus when script is ready
-  useEffect(() => {
-    if (!scriptReady || !isLoaded || !shortname) return;
-
-    // Check if DISQUS is available and reset it
     const initializeDisqus = () => {
       if (window.DISQUS) {
         try {
@@ -134,7 +135,7 @@ export default function DisqusComments({
     const timeout = setTimeout(initializeDisqus, 1000);
 
     return () => clearTimeout(timeout);
-  }, [scriptReady, isLoaded, shortname]);
+  }, [scriptReady, isLoaded, shortname, slug, title, productionUrl, dark]);
 
   // Cleanup on unmount
   useEffect(() => {
diff --git a/src/hooks/useEmbedThemeColor.ts b/src/hooks/useEmbedThemeColor.ts
index e90f9cd5..e58d8c66 100644
--- a/src/hooks/useEmbedThemeColor.ts
+++ b/src/hooks/useEmbedThemeColor.ts
@@ -25,9 +25,15 @@ export interface EmbedThemeColor {
  * @param token  DaisyUI token without the `--` prefix (default `"p"` = primary).
  */
 export function useEmbedThemeColor(token: string = 'p'): EmbedThemeColor {
+  // Seed all three fields to their SSR-deterministic values (the #808080
+  // fallback `getEmbedColor` returns when `document` is undefined). Computing
+  // the real color in the initializer would diverge between the server render
+  // (gray) and the client's first render (real theme) → hydration mismatch,
+  // since these values reach embed props. The on-mount effect fills in the real
+  // values client-side as the single intended correction.
   const [color, setColor] = useState<EmbedThemeColor>({
-    hex: getEmbedColor(token),
-    hexWithHash: getEmbedColor(token, { hash: true }),
+    hex: '808080',
+    hexWithHash: '#808080',
     isDark: false,
   });
 
diff --git a/tests/e2e/embed-theme-contrast.spec.ts b/tests/e2e/embed-theme-contrast.spec.ts
index 5e22d4da..609e02ad 100644
--- a/tests/e2e/embed-theme-contrast.spec.ts
+++ b/tests/e2e/embed-theme-contrast.spec.ts
@@ -91,8 +91,23 @@ const AA_UI = 3; // UI components / large text
 interface Measured {
   primary: string; // computed rgb() of --color-primary
   primaryContent: string; // computed rgb() of --color-primary-content
+  body: string; // computed rgb() of the body's inherited color
 }
 
+// Themes whose --color-primary is, by design, too pale to clear WCAG AA as link
+// text on the Disqus background — so the component MUST fall back to its legible
+// link color. Asserting the fallback actually triggers here proves the AA gate
+// rejects a real pale primary (not just that the math is internally consistent).
+// Verified against the compiled DaisyUI CSS; see the PR description.
+const KNOWN_PALE_PRIMARY = new Set([
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'pastel',
+  'aqua',
+  'wireframe',
+]);
+
 test.describe('embed color contrast across all DaisyUI themes', () => {
   test.use({ viewport: { width: 1280, height: 1024 } });
 
@@ -107,7 +122,11 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
 
       // Resolve the OKLCH custom properties to concrete sRGB by painting them
       // onto a real element (getComputedStyle on the raw custom property would
-      // echo the OKLCH token string).
+      // echo the OKLCH token string). We also capture the body's inherited
+      // color: a `var(--undefined-token)` is invalid-at-computed-value-time and
+      // `color` (inherited) then resolves to the body color — so an UNRESOLVED
+      // token is indistinguishable from "primary == body". The honesty guard
+      // below keys off exactly that.
       const m = await page.evaluate<Measured>(() => {
         const probe = (prop: string): string => {
           const el = document.createElement('div');
@@ -120,6 +139,7 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
         return {
           primary: probe('--color-primary'),
           primaryContent: probe('--color-primary-content'),
+          body: getComputedStyle(document.body).color,
         };
       });
 
@@ -150,16 +170,31 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
       const primary = parseRgb(m.primary);
       const primaryContent = parseRgb(m.primaryContent);
 
-      // HONESTY GUARD — a real theme always resolves to parseable colors.
+      // HONESTY GUARD — prove DaisyUI's tokens actually RESOLVED, not merely
+      // that they parsed. An unresolved `var(--color-primary)` is invalid at
+      // computed-value time and `color` (inherited) falls back to the body
+      // color — a valid rgb() — so a parseable-only check passes vacuously
+      // against gray/black-on-X. The robust signal: in a tokens-dropped build
+      // primary, primary-content, AND the body color all collapse to the SAME
+      // inherited color; in every real theme the content token is designed to
+      // contrast its primary, so these never collide (verified across all 34
+      // themes against the compiled CSS).
       expect(
         primary[0] >= 0 && primaryContent[0] >= 0,
-        `Could not resolve theme tokens for "${theme}" ` +
-          `(primary="${m.primary}", primary-content="${m.primaryContent}"). ` +
-          `DaisyUI CSS may not have applied — a real failure, not a pass.`
+        `Could not parse theme tokens for "${theme}" ` +
+          `(primary="${m.primary}", primary-content="${m.primaryContent}").`
       ).toBe(true);
+      expect(
+        m.primary,
+        `"${theme}": --color-primary === --color-primary-content (${m.primary}) ` +
+          `and === body color (${m.body}) — tokens did not resolve. DaisyUI CSS ` +
+          `did not apply. This is a real failure, not a vacuous pass.`
+      ).not.toBe(m.primaryContent);
 
       // (#39) Calendly/Cal.com paint buttons with the brand color; the label is
       // --color-primary-content on --color-primary. Assert AA UI/large (3:1).
+      // (This is a DaisyUI token-pairing invariant — a proxy for in-iframe
+      // legibility, since the cross-origin embed can't be measured directly.)
       const brandRatio = ratio(primary, primaryContent);
       expect(
         brandRatio,
@@ -167,9 +202,11 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
           `${brandRatio.toFixed(2)}:1 (need ≥ ${AA_UI}:1)`
       ).toBeGreaterThanOrEqual(AA_UI);
 
-      // (#46) Disqus link = accessible color the component will actually emit:
-      // primary if it clears AA on the bg, else the legible fallback. Recompute
-      // the component's selection here and assert the RESULT clears AA text.
+      // (#46) Disqus link = the accessible color the component actually emits.
+      // getAccessibleEmbedColor reads the live DOM token itself, so we mirror
+      // its contrast gate here on the measured primary. The KNOWN_PALE_PRIMARY
+      // assertion below proves the gate genuinely rejects a real pale primary,
+      // so this can't pass trivially for every input.
       const bg = DARK_THEMES.has(theme) ? DISQUS_BG_DARK : DISQUS_BG_LIGHT;
       const fallback = DARK_THEMES.has(theme)
         ? DISQUS_LINK_FALLBACK_DARK
@@ -183,6 +220,17 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
         `${theme}: Disqus link (${primaryClears ? 'theme primary' : 'fallback'}) ` +
           `on bg ${bg} = ${linkRatio.toFixed(2)}:1 (need ≥ ${AA_TEXT}:1)`
       ).toBeGreaterThanOrEqual(AA_TEXT);
+
+      // Prove the AA gate actually REJECTS a real pale primary (so the link
+      // assertion can't pass trivially for any input): for known-pale themes the
+      // component must pick the fallback, not the primary.
+      if (KNOWN_PALE_PRIMARY.has(theme)) {
+        expect(
+          primaryClears,
+          `${theme}: expected --color-primary to FAIL AA on ${bg} and force the ` +
+            `fallback, but it cleared the gate — re-check KNOWN_PALE_PRIMARY.`
+        ).toBe(false);
+      }
     });
   }
 });

From 1f0bb790a640d47a496077d7f311b8cf06e800c6 Mon Sep 17 00:00:00 2001
From: TurtleWolfe <TurtleWolfe@users.noreply.github.com>
Date: Sat, 6 Jun 2026 01:12:25 +0000
Subject: [PATCH 3/3] =?UTF-8?q?fix(test):=20convert=20embed=20contrast=20c?=
 =?UTF-8?q?olors=20via=20canvas=20=E2=80=94=20fixes=20false=201:1=20CI=20f?=
 =?UTF-8?q?ailure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The contrast spec failed CI on dark/light/scripthammer-* with ~1:1 ratios. Root
cause (verified in real Chromium via MCP): getComputedStyle().color returns
OKLCH-authored DaisyUI tokens as `oklch(L C H)` STRINGS, not `rgb()`. The numeric
regex read L/C/H as R/G/B, collapsing the dark theme's true 4.13:1 to 1.03:1.

Fix: read each token back through a <canvas> 2d context (fillStyle accepts any CSS
color; getImageData returns concrete sRGB bytes — the real OKLCH→sRGB conversion
the browser paints with). Verified end-to-end in Chromium: the same dark-theme
tokens that mis-read as 1.03:1 now measure 4.13:1, matching the offline math.

The probe now returns [r,g,b] arrays; the honesty guard compares colors by value
(primary !== primary-content). Re-verified all 34 themes pass every assertion
(brand 3:1, accessible link 4.5:1, pale-theme fallback) against the compiled CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/manifest.json                   | 42 +++++------
 tests/e2e/embed-theme-contrast.spec.ts | 98 +++++++++++++++-----------
 2 files changed, 77 insertions(+), 63 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 4af35c72..fdee60da 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -5,8 +5,8 @@
   "theme_color": "#1a1a2e",
   "background_color": "#1a1a2e",
   "display": "standalone",
-  "start_url": "/ScriptHammer/",
-  "scope": "/ScriptHammer/",
+  "start_url": "/",
+  "scope": "/",
   "orientation": "portrait-primary",
   "categories": [
     "productivity",
@@ -17,61 +17,61 @@
   "prefer_related_applications": false,
   "icons": [
     {
-      "src": "/ScriptHammer/icon-72.svg",
+      "src": "/icon-72.svg",
       "sizes": "72x72",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-96.svg",
+      "src": "/icon-96.svg",
       "sizes": "96x96",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-128.svg",
+      "src": "/icon-128.svg",
       "sizes": "128x128",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-144.svg",
+      "src": "/icon-144.svg",
       "sizes": "144x144",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-152.svg",
+      "src": "/icon-152.svg",
       "sizes": "152x152",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-192.svg",
+      "src": "/icon-192.svg",
       "sizes": "192x192",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-384.svg",
+      "src": "/icon-384.svg",
       "sizes": "384x384",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-512.svg",
+      "src": "/icon-512.svg",
       "sizes": "512x512",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/ScriptHammer/icon-192x192-maskable.png",
+      "src": "/icon-192x192-maskable.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/ScriptHammer/icon-512x512-maskable.png",
+      "src": "/icon-512x512-maskable.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
@@ -79,14 +79,14 @@
   ],
   "screenshots": [
     {
-      "src": "/ScriptHammer/screenshots/desktop.png",
+      "src": "/screenshots/desktop.png",
       "sizes": "1920x1080",
       "type": "image/png",
       "form_factor": "wide",
       "label": "Desktop view"
     },
     {
-      "src": "/ScriptHammer/screenshots/mobile.png",
+      "src": "/screenshots/mobile.png",
       "sizes": "390x844",
       "type": "image/png",
       "form_factor": "narrow",
@@ -96,33 +96,33 @@
   "shortcuts": [
     {
       "name": "Components",
-      "url": "/ScriptHammer/components",
+      "url": "/components",
       "description": "View all components",
       "icons": [
         {
-          "src": "/ScriptHammer/icon-96.svg",
+          "src": "/icon-96.svg",
           "sizes": "96x96"
         }
       ]
     },
     {
       "name": "Contact",
-      "url": "/ScriptHammer/contact",
+      "url": "/contact",
       "description": "Send us a message",
       "icons": [
         {
-          "src": "/ScriptHammer/icon-96.svg",
+          "src": "/icon-96.svg",
           "sizes": "96x96"
         }
       ]
     },
     {
       "name": "Themes",
-      "url": "/ScriptHammer/themes",
+      "url": "/themes",
       "description": "Choose your theme",
       "icons": [
         {
-          "src": "/ScriptHammer/icon-96.svg",
+          "src": "/icon-96.svg",
           "sizes": "96x96"
         }
       ]
@@ -131,7 +131,7 @@
   "related_applications": [],
   "protocol_handlers": [],
   "share_target": {
-    "action": "/ScriptHammer/share",
+    "action": "/share",
     "method": "POST",
     "enctype": "multipart/form-data",
     "params": {
diff --git a/tests/e2e/embed-theme-contrast.spec.ts b/tests/e2e/embed-theme-contrast.spec.ts
index 609e02ad..2ac5ca45 100644
--- a/tests/e2e/embed-theme-contrast.spec.ts
+++ b/tests/e2e/embed-theme-contrast.spec.ts
@@ -19,6 +19,14 @@ import { test, expect } from '@playwright/test';
 // HONESTY GUARD below fails the test if a token resolves to a degenerate value,
 // so a future build that drops DaisyUI CSS can never make this pass vacuously.
 //
+// COLOR READBACK: each token is converted to concrete sRGB via a <canvas> 2d
+// context (fillStyle accepts any CSS color; getImageData returns sRGB bytes).
+// This is required because Chromium serializes OKLCH-authored custom properties
+// back as `oklch(...)` strings from getComputedStyle — a naive numeric regex
+// would read L/C/H as R/G/B and collapse the ratio toward 1:1 (verified: the
+// dark theme's real 4.13:1 mis-read as 1.03:1). The canvas does the real
+// OKLCH→sRGB conversion the browser uses to paint.
+//
 // Thresholds chosen from real measured ratios (see the PR description):
 //   - primary-content on primary: all 34 themes ≥ 3.64:1 → assert AA UI/large 3:1.
 //   - accessible Disqus link on disqus-bg: guaranteed ≥ 4.5:1 by the fallback.
@@ -88,10 +96,12 @@ const DISQUS_LINK_FALLBACK_LIGHT = '#2563eb'; // blue-600
 const AA_TEXT = 4.5; // normal text
 const AA_UI = 3; // UI components / large text
 
+type Rgb = [number, number, number];
+
 interface Measured {
-  primary: string; // computed rgb() of --color-primary
-  primaryContent: string; // computed rgb() of --color-primary-content
-  body: string; // computed rgb() of the body's inherited color
+  primary: Rgb; // sRGB of --color-primary
+  primaryContent: Rgb; // sRGB of --color-primary-content
+  body: Rgb; // sRGB of the body's inherited color
 }
 
 // Themes whose --color-primary is, by design, too pale to clear WCAG AA as link
@@ -120,35 +130,44 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
       await page.goto('/themes/', { waitUntil: 'networkidle' });
       await expect(page.locator('html')).toHaveAttribute('data-theme', theme);
 
-      // Resolve the OKLCH custom properties to concrete sRGB by painting them
-      // onto a real element (getComputedStyle on the raw custom property would
-      // echo the OKLCH token string). We also capture the body's inherited
-      // color: a `var(--undefined-token)` is invalid-at-computed-value-time and
-      // `color` (inherited) then resolves to the body color — so an UNRESOLVED
-      // token is indistinguishable from "primary == body". The honesty guard
-      // below keys off exactly that.
+      // Resolve each DaisyUI OKLCH token to concrete 0-255 sRGB. We paint the
+      // token onto an element, read getComputedStyle().color, then push that
+      // through a <canvas> 2d context — fillStyle accepts ANY CSS color and
+      // getImageData always returns sRGB bytes. This is essential: modern
+      // Chromium serializes wide-gamut OKLCH custom properties back as
+      // `oklch(...)`/`color(srgb ...)` strings, NOT legacy `rgb()`, so a naive
+      // numeric regex would mis-read L/C/H as R/G/B and collapse the ratio
+      // toward 1:1 (the false-failure this replaces). The body color is
+      // captured the same way: an UNRESOLVED `var()` falls back to the inherited
+      // body color, so primary==body would signal tokens-didn't-apply.
       const m = await page.evaluate<Measured>(() => {
-        const probe = (prop: string): string => {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+        const toRgb = (cssColor: string): [number, number, number] => {
+          ctx.clearRect(0, 0, 1, 1);
+          ctx.fillStyle = '#000';
+          ctx.fillStyle = cssColor; // ignored if invalid → stays #000
+          ctx.fillRect(0, 0, 1, 1);
+          const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+          return [r, g, b];
+        };
+        const probe = (prop: string): [number, number, number] => {
           const el = document.createElement('div');
           el.style.color = `var(${prop})`;
           document.body.appendChild(el);
           const c = getComputedStyle(el).color;
           el.remove();
-          return c;
+          return toRgb(c);
         };
         return {
           primary: probe('--color-primary'),
           primaryContent: probe('--color-primary-content'),
-          body: getComputedStyle(document.body).color,
+          body: toRgb(getComputedStyle(document.body).color),
         };
       });
 
-      // Shared WCAG math (rgb() string → ratio), mirrored from the app helper.
-      const parseRgb = (s: string): [number, number, number] => {
-        const n = s.match(/-?[\d.]+/g);
-        if (!n || n.length < 3) return [-1, -1, -1];
-        return [Number(n[0]), Number(n[1]), Number(n[2])];
-      };
       const relLum = ([r, g, b]: number[]): number => {
         const lin = (c: number) => {
           const cs = c / 255;
@@ -166,30 +185,25 @@ test.describe('embed color contrast across all DaisyUI themes', () => {
         parseInt(h.slice(3, 5), 16),
         parseInt(h.slice(5, 7), 16),
       ];
-
-      const primary = parseRgb(m.primary);
-      const primaryContent = parseRgb(m.primaryContent);
-
-      // HONESTY GUARD — prove DaisyUI's tokens actually RESOLVED, not merely
-      // that they parsed. An unresolved `var(--color-primary)` is invalid at
-      // computed-value time and `color` (inherited) falls back to the body
-      // color — a valid rgb() — so a parseable-only check passes vacuously
-      // against gray/black-on-X. The robust signal: in a tokens-dropped build
-      // primary, primary-content, AND the body color all collapse to the SAME
-      // inherited color; in every real theme the content token is designed to
-      // contrast its primary, so these never collide (verified across all 34
-      // themes against the compiled CSS).
-      expect(
-        primary[0] >= 0 && primaryContent[0] >= 0,
-        `Could not parse theme tokens for "${theme}" ` +
-          `(primary="${m.primary}", primary-content="${m.primaryContent}").`
-      ).toBe(true);
+      const sameColor = (a: number[], b: number[]) =>
+        a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
+
+      const primary = m.primary;
+      const primaryContent = m.primaryContent;
+
+      // HONESTY GUARD — prove DaisyUI's tokens actually RESOLVED. An unresolved
+      // `var(--color-primary)` is invalid-at-computed-value-time and `color`
+      // (inherited) falls back to the body color, so a value-exists check passes
+      // vacuously. The robust signal: in a tokens-dropped build primary,
+      // primary-content, AND the body color all collapse to the SAME inherited
+      // color; in every real theme the content token is designed to contrast its
+      // primary, so these never collide (verified across all 34 themes).
       expect(
-        m.primary,
-        `"${theme}": --color-primary === --color-primary-content (${m.primary}) ` +
-          `and === body color (${m.body}) — tokens did not resolve. DaisyUI CSS ` +
-          `did not apply. This is a real failure, not a vacuous pass.`
-      ).not.toBe(m.primaryContent);
+        sameColor(primary, primaryContent),
+        `"${theme}": --color-primary (${primary}) === --color-primary-content ` +
+          `(${primaryContent}); body=${m.body}. Tokens did not resolve — DaisyUI ` +
+          `CSS did not apply. A real failure, not a vacuous pass.`
+      ).toBe(false);
 
       // (#39) Calendly/Cal.com paint buttons with the brand color; the label is
       // --color-primary-content on --color-primary. Assert AA UI/large (3:1).