fix(ui): dark-mode skeleton shimmer and border parity

[Jesssullivan]

Summary

• Replace hardcoded hex CSS with light-dark() in 8 components
• Skeleton loading shimmer now renders correctly in dark mode
• Border colors use light-dark(var(--color-surface-300), var(--color-surface-700))
• Scrollbar tracks and thumbs follow host theme

Components

ClientForm, DateTimePicker, PaymentSelector, ProviderPicker, ServicePicker, StripeCheckout, VenmoButton, VenmoCheckout

Test plan

• pnpm test — 583/583 pass
• Visual QA in dark mode host app

[greptile-apps]

Greptile Summary

This PR converts hardcoded light-mode CSS variable references to light-dark() across 8 components, fixing skeleton shimmer visibility and border contrast in dark-mode host apps. The border changes (light-dark(var(...), var(...))) are straightforwardly valid; the gradient-wrapped shimmer declarations are supported in modern browsers but silently drop the background in older engines that lack light-dark() support, leaving skeleton placeholders invisible rather than degrading to a light-mode fallback.

Confidence Score: 5/5

Safe to merge — the only finding is a P2 progressively-enhanced fallback suggestion with no functional regression on supported browsers.

All changes are CSS-only and internally consistent. The sole concern is the absence of a plain-gradient fallback before the light-dark() declarations, which is a best-practice suggestion rather than a blocking defect. No browser that already supports light-dark() (the intended target) is broken.

No files require special attention; the fallback suggestion applies equally to all six skeleton-shimmer components.

Important Files Changed

Filename	Overview
src/components/DateTimePicker.svelte	Skeleton shimmer and spinner border updated to use light-dark(); gradient fallback missing for unsupported browsers
src/components/ClientForm.svelte	Input/textarea border color converted to light-dark() with valid color values — straightforward and correct
src/components/StripeCheckout.svelte	Skeleton element background converted to light-dark(); same no-fallback concern as other skeleton components
src/components/VenmoCheckout.svelte	Skeleton button and spinner border converted to light-dark(); same no-fallback concern
src/components/PaymentSelector.svelte	Skeleton shimmer background converted to light-dark(); same no-fallback concern
src/components/ProviderPicker.svelte	Skeleton avatar/text/provider backgrounds converted to light-dark(); same no-fallback concern
src/components/ServicePicker.svelte	Skeleton card background converted to light-dark(); same no-fallback concern
src/components/VenmoButton.svelte	Skeleton button background converted to light-dark(); same no-fallback concern

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Host App sets color-scheme] --> B{Browser supports light-dark}
    B -- Yes - modern --> C[light-dark resolves correctly]
    C --> D[Light mode - surface-200/300 gradient shimmer]
    C --> E[Dark mode - surface-700/800 gradient shimmer]
    B -- No - older browser --> F[Declaration silently ignored]
    F --> G[Skeleton background = transparent - no shimmer visible]

Loading

_{Reviews (1): Last reviewed commit: "fix(ui): dark-mode skeleton shimmer and ..." | Re-trigger Greptile}

[greptile-apps]

Missing fallback for unsupported browsers

light-dark() with linear-gradient() arguments is only supported in Chrome 123+, Firefox 120+, and Safari 17.5+. In browsers without support the entire background declaration is silently dropped, leaving skeleton shimmer elements with a transparent background — the loading placeholder becomes invisible. Adding a plain gradient before the light-dark() declaration lets unsupported browsers degrade gracefully to the light-mode shimmer.

Suggested change

	.skeleton-slot {
	background: linear-gradient(90deg, var(--color-surface-200) 25%, var(--color-surface-300) 50%, var(--color-surface-200) 75%);
	background: light-dark(
	linear-gradient(90deg, var(--color-surface-200) 25%, var(--color-surface-300) 50%, var(--color-surface-200) 75%),
	linear-gradient(90deg, var(--color-surface-800) 25%, var(--color-surface-700) 50%, var(--color-surface-800) 75%)
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	background: linear-gradient(90deg, var(--color-surface-200) 25%, var(--color-surface-300) 50%, var(--color-surface-200) 75%);
	background: light-dark(
	linear-gradient(90deg, var(--color-surface-200) 25%, var(--color-surface-300) 50%, var(--color-surface-200) 75%),
	linear-gradient(90deg, var(--color-surface-800) 25%, var(--color-surface-700) 50%, var(--color-surface-800) 75%)
	);

The same pattern applies to the .skeleton-* rules in PaymentSelector, ProviderPicker, ServicePicker, StripeCheckout, VenmoButton, and VenmoCheckout.