Theme: Cupertino
Apple-aesthetic — clarity, depth, concentricity. No font bundle needed (uses OS-integrated SF Pro with Inter fallback):
/* WireKit Theme: Cupertino — Apple-aesthetic, clarity and depth.
Inherits from Default: neutral text/bg palette, semantic colors,
ring-wk-width 2px, opacity-wk-hover 0.8.
Font: -apple-system → SF Pro on Apple devices (OS-integrated).
Inter (already in WireKit bundle) as fallback on Win/Linux.
No config/wirekit.php entry needed.
⚠ Apple Blue #007AFF = 3.76:1 with white → WCAG 1.4.3 FAIL.
WireKit uses blue-600 (~4.79:1 ✓). Override to #007AFF in app.css
if WCAG trade-off is accepted — document in your own a11y statement.
IMPORTANT: .dark block uses Apple HIG system colors (#1C1C1E etc.)
instead of Tailwind neutral. Ring-offset must match dark bg to
prevent visible "halo" artifact around focused elements. */
@theme {
/* Font — OS-integrated, no bundle font needed.
-apple-system → SF Pro (macOS 10.11+, iOS 9+)
BlinkMacSystemFont → SF Pro on older Chrome/macOS
Inter → best SF Pro fallback on Win/Linux (already bundled) */
--font-wk-sans: -apple-system, BlinkMacSystemFont, 'Inter',
ui-sans-serif, system-ui, sans-serif;
/* Radius — Apple concentricity.
0.875rem (14dp) base → md: 14dp (Apple standard control),
xl: calc(0.875rem × 2) = 1.75rem ≈ 28dp (Apple modal/sheet). */
--radius-wk: 0.875rem;
/* Shadows — Apple-refined, vertically biased.
Apple UIs "float" — diffuse soft light from above.
2-layer: ambient (large, low) + contact (small, sharp). */
--shadow-wk-sm: 0 1px 4px rgba(0, 0, 0, 0.06),
0 0 1px rgba(0, 0, 0, 0.04);
--shadow-wk-md: 0 4px 16px rgba(0, 0, 0, 0.08),
0 1px 4px rgba(0, 0, 0, 0.04);
--shadow-wk-lg: 0 16px 40px rgba(0, 0, 0, 0.12),
0 4px 12px rgba(0, 0, 0, 0.06);
/* Motion — iOS ease-out approximation.
250ms: Apple's sweet spot (200-300ms range).
Unique curve: ≠ Soft (0,0,0.2,1) ≠ M3 (0.2,0,0,1).
Fast start, organic deceleration, no bounce. */
--transition-wk-duration: 250ms;
--transition-wk-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Border — Apple hairline (0.5px = 1 physical pixel on Retina).
On non-Retina: rounds to 1px. Apple's accepted trade-off. */
--border-wk-width: 0.5px;
/* Input — WCAG 1.4.11 fix: 0.5px hairline (neutral-300 on white
= 1.45:1) fails boundary contrast alone. neutral-50 bg-input
provides visual differentiation. placeholder (neutral-500)
on neutral-50: ~4.48:1 AA ✓ */
--color-wk-bg-input: var(--color-neutral-50);
/* Accent — WCAG-compliant Apple Blue approximation.
Apple #007AFF = 3.76:1 with white → FAIL.
blue-600: ~4.79:1 AA ✓ blue-700 (hover): ~6.03:1 AAA ✓ */
--color-wk-accent: var(--color-blue-600);
--color-wk-accent-hover: var(--color-blue-700);
--color-wk-accent-content: var(--color-blue-700);
--color-wk-accent-fg: var(--color-white);
--color-wk-ring: var(--color-blue-600);
}
@layer theme {
.dark {
/* Apple HIG system colors — NOT Tailwind neutral.
The Apple feel comes from these exact values.
bg: #1C1C1E (systemBackground)
bg-elevated: #2C2C2E (secondarySystemBackground)
bg-muted: #3A3A3C (tertiarySystemBackground) */
--color-wk-bg: #1C1C1E;
--color-wk-bg-elevated: #2C2C2E;
--color-wk-bg-subtle: #2C2C2E;
--color-wk-bg-muted: #3A3A3C;
--color-wk-bg-input: #1C1C1E;
/* Ring-offset fix: Default sets ring-offset to neutral-950
(#0a0a0a). Cupertino dark bg = #1C1C1E (much lighter).
Without this, a visible dark "halo" appears around focused
elements. Fix: ring-offset = dark bg. */
--color-wk-ring-offset: #1C1C1E;
/* Borders dark — Default's neutral-600 on #1C1C1E would be
~2.25:1 (acceptable decorative). But neutral-800 (#262626)
on #1C1C1E = ~1.12:1 → invisible!
neutral-500 on #1C1C1E: ~3.57:1 ✓ WCAG 1.4.11 */
--color-wk-border: var(--color-neutral-500);
--color-wk-border-hover: var(--color-neutral-400);
/* Form controls read --color-wk-border-strong. Light mode inherits the
base tokens deliberately; only the dark palette is retinted here. */
--color-wk-border-strong: var(--color-neutral-500); /* 3.6:1 ✓ */
--color-wk-border-strong-hover: var(--color-neutral-400); /* 6.6:1 ✓ */
--color-wk-border-subtle: var(--color-neutral-600);
/* Accent dark — blue-400 for dark surfaces.
neutral-900 (inherited fg) on blue-400: ~6.86:1 AAA ✓
blue-400 as link on #1C1C1E: ~6.97:1 AAA ✓ */
--color-wk-accent: var(--color-blue-400);
--color-wk-accent-hover: var(--color-blue-300);
--color-wk-accent-content: var(--color-blue-400);
--color-wk-ring: var(--color-blue-400);
/* Shadows dark — 4-5× higher opacity than light.
Elevation needs stronger contrast on dark backgrounds. */
--shadow-wk-sm: 0 1px 4px rgba(0, 0, 0, 0.30),
0 0 1px rgba(0, 0, 0, 0.20);
--shadow-wk-md: 0 4px 16px rgba(0, 0, 0, 0.40),
0 1px 4px rgba(0, 0, 0, 0.25);
--shadow-wk-lg: 0 16px 40px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.35);
}
}
For the authentic Apple Blue (#007AFF), add --color-wk-accent: #007AFF; in your app.css. Note that white text on #007AFF only reaches 3.76:1 — below WCAG AA for normal text. Blue-600 is the WCAG-compliant default.
Liquid Glass Extension
An optional glassmorphism module designed for the Cupertino theme. Adds frosted-glass and refraction effects to any WireKit component via CSS classes.
Installation:
php artisan wirekit:glass install
Then add <x-wirekit::glass /> to your layout <head>:
<head>
@wirekitStyles
<x-wirekit::glass />
@wirekitScripts
</head>
Two tiers of glass effects:
| Class | Tier | Browsers | Effect |
|---|---|---|---|
wk-glass |
1 | All modern | Frosted glass (backdrop-filter: blur() + translucent bg) |
wk-glass-refract |
1 + 2 | All (Tier 2: Chrome) | Frosted glass + SVG displacement refraction |
<x-wirekit::card class="wk-glass">
Frosted glass card — all browsers.
</x-wirekit::card>
<x-wirekit::card class="wk-glass-refract">
Refraction glass — Chrome gets distortion, others see frosted fallback.
</x-wirekit::card>
Liquid Glass works on any element, but is specifically calibrated for the Cupertino theme's Apple-aesthetic colors and hairline borders. On other presets the backdrop-filter still works but the visual cohesion may differ.
See the full Liquid Glass documentation for customization options, dark-mode behavior, accessibility notes, and live previews.
Design notes
Cupertino takes its cues from Apple's design language: clarity, depth, concentric corner radii, and lightly translucent surfaces, with the system blue accent. It uses the OS-integrated SF Pro font with an Inter fallback, so there is no font bundle to ship. The optional Liquid Glass extension (documented below) layers on the frosted-glass refraction effect.
Best for: Apple-ecosystem-adjacent products and clean, premium brands. Avoid it where you need a strongly distinct, non-Apple identity.
Accessibility
One deliberate trade-off is worth knowing: Apple's exact system blue (#007AFF) is only 3.76:1 on white and fails WCAG 1.4.3 for text. WireKit therefore defaults Cupertino's accent to blue-600 (~4.79:1, AA). If you override back to the exact Apple blue for brand fidelity, document that trade-off in your own accessibility statement. Inputs use a neutral-50 surface tint (~4.48:1) because a hairline border alone fails boundary contrast.