Skin / Advanced pack
Modern Apple
Liquid-Glass Apple skin: translucent surfaces, refined backdrop blur, white rims, transparent inputs, and squircle corners.
One command installs the pack's theme.css, skin.css and skin.config.tsx over the refined library — tokens, skin.css and slot classes together, plus any runtime the pack mounts. Reinstalling refined resets the theme and skin targets back to the baseline look.
npx shadcn@latest add http://127.0.0.1:3000/r/modern-apple/skin.jsonPack source
The 3 files this pack ships, read straight from the registry. Each is yours to own and edit after install.
theme.css — token block scoped to [data-skin]; a theme skin's entire brand
src/registry/skin-packs/modern-apple/theme.css
/* * ADVANCED skin (tokens + skin.css glass materials + skin.config slots) — Liquid Glass reading of * iOS 26/macOS Tahoe. Scoped [data-skin="modern-apple"] only, not :root, so skins co-compile. * Raw token re-values only (@theme lives in baseline); standalone installs need own `@custom-variant dark`. */[data-skin="modern-apple"] { /* typography — the SF stack; small chrome runs a rung larger via the type re-values below */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* type scale — small chrome bumped one rung (11/12/13px micro/meta/label); body stays 14px */ --text-micro: 0.6875rem; /* 11px */ --text-meta: 0.75rem; /* 12px */ --text-label: 0.8125rem; /* 13px */ /* shadcn base names, authored in oklch; derived tokens use relative color syntax to track author format. */ --background: oklch(1 0 0); --foreground: oklch(0.2178 0 89.876); /* #1A1A1A — DS Labels/Vibrant Primary */ --card: oklch(1 0 0); --card-foreground: oklch(0.2178 0 89.876); --popover: oklch(0.995 0 0); /* near-white glass base, frosted by --popover-opacity below */ --popover-foreground: oklch(0.2178 0 89.876); --primary: oklch(0.6321 0.2018 254.088); /* #0088FF — real iOS 26 system blue (DS Accents/Blue) */ --primary-foreground: oklch(1 0 0); --muted: oklch(0.9673 0.0024 286.354); /* #F5F5F7 parchment */ --muted-foreground: oklch(0.5521 0 89.876); /* #727272 — DS Labels/Vibrant Secondary */ --secondary: oklch(0.9364 0.0027 286.347); /* #E9E9EB — assistant bubble gray */ --secondary-foreground: oklch(0.2178 0 89.876); --accent: oklch(0.9673 0.0024 286.354); --accent-foreground: oklch(0.2178 0 89.876); --destructive: oklch(0.6532 0.2328 25.739); /* #FF383C — DS Accents/Red */ --destructive-foreground: oklch(1 0 0); /* "Ring white" contract: resting + focus ring both white (glass rim / soft halo), not the usual blue outline. */ --ring-opacity: 0.55; --border: oklch(from oklch(1 0 0) l c h / var(--ring-opacity)); /* white hairline rim */ --input: oklch(1 0 0 / 0.45); /* transparent-glass field border, white */ --ring: oklch(1 0 0 / 0.9); /* white focus halo */ /* page canvas — the light neutral desktop the glass floats on */ --canvas: oklch(0.9466 0 0); /* #ECECEC */ /* Glass pair frosts popover/dropdown/select/context-menu/dialog together (all read bg-popover). Calibrated between DS Frost L/M=16 and apple.com blur(20px) for refined-not-heavy reading. */ --popover-opacity: 0.62; --backdrop-blur-popover: 18px; /* DS Liquid Glass/Frost — Large = 16; +2 for the web canvas */ /* modal overlay (dialog backdrop) — a soft frosted dim, not a hard scrim */ --overlay-opacity: 0.2; --backdrop-blur-overlay: 6px; --scroll-fade-size: 2rem; /* elevation — Apple shadows are soft, large, and low-contrast */ --shadow-color: oklch(0.2244 0.0257 263.845); --shadow-size: 1; --shadow-opacity: 0.85; --shadow-y: 1; --shadow-control-multiplier: 1; --shadow-panel-multiplier: 2; --shadow-popover-multiplier: 4; --shadow-modal-multiplier: 5; --shadow-ambient-multiplier: 8; /* THE one radius knob. Continuous, generous Apple corners: ~14px surfaces, ~11px controls. */ --radius: 0.875rem; --radius-control: calc(var(--radius) * 0.78); /* ~11px push-button / field corner */ /* Radius divergence from refined: TIGHTER ratios (1.9x field/1.7x panel/2x scene) so continuous corners don't balloon. */ --radius-field: calc(var(--radius) * 1.9); /* user bubble, composer shell */ --radius-panel: calc(var(--radius) * 1.7); /* code / markdown surfaces */ --radius-scene: calc(var(--radius) * 2); /* scene frame, large media */ /* Apple's continuous (superellipse) corners since iOS 7; `squircle` is the CSS corner-shape for it. */ --corner-shape: squircle; --corner-shape-control: var(--corner-shape); --corner-shape-popover: var(--corner-shape); --corner-shape-panel: var(--corner-shape); /* floating-list geometry (menu / select / context-menu). Rows inset 5px, concentric container. */ --popover-padding: 0.3125rem; /* 5px gap between container edge and rows */ --radius-popup-item: 0.5rem; /* 8px menu-row corner */ /* sub-pixel guard for a rounded child inside an overflow-clipped rounded container */ --nest-safe: 1px; /* corner-fit ratio = 2 + √2 (see the refined skin for the derivation) */ --nest-corner-ratio: 3.41421356; --radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2)); --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding))); /* content density for the rounded surfaces (bubble / composer field) */ --padding-x: 1rem; --padding-y: 0.5rem; /* control size scale — ONE base height; xs/sm/md/lg are COMPUTED from it. ~34px regular controls. */ --control-h: 2.125rem; --control-h-xs: round(var(--control-h) * 0.78, 1px); --control-h-sm: round(var(--control-h) * 0.89, 1px); --control-h-md: var(--control-h); --control-h-lg: round(var(--control-h) * 1.11, 1px); /* Apple system springs overshoot+settle elastically; CSS has no native spring, so --ease-emphasized is a `linear()` spring (~8% overshoot) driving popups/tabs-indicator/select-chevron/panel-enter. --ease-standard stays smooth easeOut for color/text (bounce reads as jitter); tempo runs longer. */ --ease-standard: cubic-bezier(0.33, 1, 0.68, 1); --ease-emphasized: linear( 0, 0.006, 0.025 3.1%, 0.101 7.3%, 0.276 12.5%, 0.578 19.8%, 0.73 24%, 0.853, 0.949 31.9%, 1.008, 1.062 39.5%, 1.079, 1.085, 1.08 46.9%, 1.055 52.2%, 1.014 60.4%, 0.995 66.6%, 0.985 72.9%, 0.987 80.2%, 0.997 91.7%, 1 ); --duration-fast: 200ms; --duration-base: 340ms; --duration-slow: 520ms;}/* Dark tokens: glass goes graphite, brighter #0A84FF accent, white rims. Scoped like light block. */:where(.dark) [data-skin="modern-apple"],.dark[data-skin="modern-apple"] { --background: oklch(0.235 0 89.876); /* #1E1E1E — DS Window Background */ --foreground: oklch(0.9673 0.0024 286.354); --card: oklch(0.2478 0.0042 286.109); --card-foreground: oklch(0.9673 0.0024 286.354); --popover: oklch(0.27 0.006 286.001); /* graphite glass base before frosting */ --popover-foreground: oklch(0.9673 0.0024 286.354); --primary: oklch(0.6243 0.2056 255.486); /* #0A84FF — iOS dark system blue */ --primary-foreground: oklch(1 0 0); --muted: oklch(0.2978 0.0033 286.199); --muted-foreground: oklch(0.6894 0.0112 286.102); /* #98989D */ --secondary: oklch(0.3473 0.004 286.188); /* #3A3A3C — assistant bubble gray */ --secondary-foreground: oklch(0.9673 0.0024 286.354); --accent: oklch(0.326 0.0056 286.084); --accent-foreground: oklch(0.9673 0.0024 286.354); --destructive: oklch(0.6606 0.2261 28.178); /* #FF453A */ --destructive-foreground: oklch(1 0 0); /* the white rim reads even brighter on the graphite glass; keep the white ring contract */ --ring-opacity: 0.28; --border: oklch(from oklch(1 0 0) l c h / var(--ring-opacity)); --input: oklch(1 0 0 / 0.22); --ring: oklch(1 0 0 / 0.8); --canvas: oklch(0.1822 0.004 286.056); --popover-opacity: 0.55; --shadow-color: oklch(0 0 0); --shadow-opacity: 1;}/* prefers-reduced-motion: token-driven, so every transition/derived tempo flattens together. */@media (prefers-reduced-motion: reduce) { [data-skin="modern-apple"] { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }}