Skin / Advanced pack
Liquid metal
Polished metal skin with a WebGL shader control surface.
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/liquid-metal/skin.jsonPack source
The 4 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/liquid-metal/theme.css
/* * ADVANCED skin (tokens + skin.css + WebGL runtime, see skin.config.tsx). Additive over baseline, * scoped [data-skin="liquid-metal"]. .dark block RESTATES refined dark surfaces (not omits) so * portaled popups under non-.dark <body> still read dark colors. */[data-skin="liquid-metal"] { --font-sans: "Helvetica Neue", Arial, "Segoe UI", sans-serif; --font-mono: Menlo, Monaco, "Courier New", monospace; --radius: 14px; --corner-shape: round; --padding-x: 18px; --padding-y: 11px; --control-h: 40px; --shadow-size: 1.6; --ring-opacity: 1; --popover-opacity: 0.7; --backdrop-blur-popover: 16px; --overlay-opacity: 0.45; --backdrop-blur-overlay: 10px; --duration-base: 260ms; --duration-fast: 195ms; --duration-slow: 390ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);}:root:not(.dark)[data-skin="liquid-metal"],:where(:not(.dark)) [data-skin="liquid-metal"] { --primary: oklch(0.9192 0.0388 261.447); --primary-foreground: oklch(0.2102 0.006 285.874); --foreground: oklch(0.2107 0.0087 264.371); --secondary-foreground: oklch(0.2107 0.0087 264.371); --accent-foreground: oklch(0.2107 0.0087 264.371); --canvas: oklch(0.9509 0.0056 264.533); --background: oklch(0.9744 0.0039 271.371); --card: oklch(0.9744 0.0039 271.371); --card-foreground: oklch(0.2107 0.0087 264.371); --popover: oklch(0.9744 0.0039 271.371); --popover-foreground: oklch(0.2107 0.0087 264.371);}.dark[data-skin="liquid-metal"],:where(.dark) [data-skin="liquid-metal"] { --primary: oklch(0.9192 0.0388 261.447); --primary-foreground: oklch(0.2102 0.006 285.874); --foreground: oklch(0.9841 0.0012 264.547); --card-foreground: oklch(0.9841 0.0012 264.547); --popover-foreground: oklch(0.9841 0.0012 264.547); --secondary-foreground: oklch(0.9841 0.0012 264.547); --accent-foreground: oklch(0.9841 0.0012 264.547); /* Restate the refined dark surfaces so portaled menus/popovers don't inherit the light block. */ --canvas: oklch(0.1417 0.0044 285.819); --background: oklch(0.1417 0.0044 285.819); --card: oklch(0.1763 0.0058 285.786); --popover: oklch(0.1763 0.0058 285.786);}