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 = 4.02:1 with white → WCAG 1.4.3 FAIL.
WireKit uses blue-600 (~5.26:1 ✓). Override to #007AFF in app.css
if WCAG trade-off is accepted — document in your own a11y statement.
The .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. */
/* `:root` and `.dark`, NOT `@theme` / `@layer theme`, and the difference decides whether
this block does anything at all.
WireKit's own defaults sit inside `:where(:root)` — specificity 0 — precisely so a plain
`:root` override wins whichever stylesheet the browser reads last. `@theme` compiles into
`@layer theme`, and UNLAYERED CSS beats LAYERED CSS whatever the specificity: the defaults
are unlayered, so a preset in `@theme` loses to them and silently does nothing except for
the handful of tokens WireKit never declares.
Nothing reports that. The CSS is valid, the custom properties resolve, and the page renders
in the default theme while the developer reads their own preset in their own stylesheet. */
:root {
/* 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.53:1 AA ✓ */
--color-wk-bg-input: var(--color-neutral-50);
/* Accent — WCAG-compliant Apple Blue approximation.
Apple #007AFF = 4.02:1 with white → FAIL.
blue-600: ~5.26: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);
}
.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;
/* Hint text on a tinted callout. Cupertino lifts bg-elevated to #2C2C2E
(secondarySystemBackground), which is 9 lightness points above the stock
dark surface — and the callout tint is 15% of the state color mixed into
exactly that. The inherited muted then measured 4.35:1 on the WARNING
tint, under a 4.5:1 the theming guide guarantees by name for
`text-muted` on "the tinted surfaces of callout / alert". Two points
lighter clears it at 4.67:1 and is invisible next to the old value. */
--color-wk-text-muted: #B1B1B1;
/* 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.
The dark field fill is the page's own #1C1C1E, so this line is a
field's only edge, and in a card, a dialog or a drawer it sits on
#2C2C2E: neutral-500 drew 2.94:1 there. systemGray clears both:
#8E8E93 on #1C1C1E: 5.21:1 ✓
#8E8E93 on #2C2C2E: 4.27:1 ✓ WCAG 1.4.11 */
--color-wk-border-strong: #8E8E93;
--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 ✓
Accent TEXT is one step lighter, blue-300: a callout or an alert tints its
surface with the accent, and blue-400 text on that tint is 4.12:1. blue-300
is 6.0:1 on the accent callout and 9.4:1 on #1C1C1E. */
/* See the note in soft.md: the light block's white label wins over the base
stylesheet's dark value and lands on blue-400 at 2.54:1. Near-black is 7.05:1. */
--color-wk-accent-fg: var(--color-neutral-900);
--color-wk-accent: var(--color-blue-400);
--color-wk-accent-hover: var(--color-blue-300);
--color-wk-accent-content: var(--color-blue-300);
--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 4.02:1 — below WCAG AA for normal text. Blue-600 is the WCAG-compliant default.
Liquid Glass Extension
An optional liquid-glass module designed for the Cupertino theme. Adds glass surfaces in four levels, from clear to opaque, and a refraction effect to any WireKit component through CSS classes.
Installation:
php artisan wirekit:glass install
Then add <x-wirekit:: at the start of your layout's <body>:
<head>
@wirekitStyles
</head>
<body>
{{-- FIRST thing in the body, never in the head: this emits an <svg>, and an SVG in
the head ends head parsing — every metadata tag after it is reparented into the
body, where a crawler does not look. --}}
<x-wirekit::glass />
{{-- … your layout … --}}
@wirekitScripts
</body>
Two tiers of glass effects:
| Class | Tier | Browsers | Effect |
|---|---|---|---|
wk-glass |
1 | All modern | Liquid glass at the regular level; wk-glass-clear, wk-glass-frosted and wk-glass-opaque set another level |
wk-glass-refract |
1 + 2 | Chromium bends the backdrop; Safari shows it lightly frosted, without the bending | Clear glass + SVG displacement refraction |
<x-wirekit::card class="wk-glass">
Glass card — all browsers.
</x-wirekit::card>
<x-wirekit::card class="wk-glass-refract">
Refraction glass — Chromium bends the backdrop, Safari shows it lightly frosted.
</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 4.02:1 on white and fails WCAG 1.4.3 for text. WireKit therefore defaults Cupertino's accent to blue-600 (~5.26: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.53:1) because a hairline border alone fails boundary contrast.