Skin / Advanced pack

Windows XP

Windows XP-inspired Luna tokens, bevels, and titlebar details.

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.

Skin pack

npx shadcn@latest add http://127.0.0.1:3000/r/xp/skin.json

See registry manifest

Pack 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/xp/theme.css

/*

* XP (Luna) skin tokens. Import AFTER tailwindcss. Raw re-values ONLY — @theme bindings stay in

* refined baseline (merge globally, no pack owns them). Scoped to [data-skin="xp"] only, never bare

* :root — standalone installs (no refined co-compiled) must also add `@custom-variant dark (&:is(.dark *));`.

*/

[data-skin="xp"] {

/* typography — Tahoma first: the Luna system face */

--font-sans: Tahoma, "Segoe UI", "Trebuchet MS", Verdana, ui-sans-serif, sans-serif;

--font-mono: "Lucida Console", Consolas, monospace;

/* type scale — Tahoma reads at the Luna 13px body rung; the other rungs keep the refined defaults */

--text-body: 0.8125rem; /* 13px */

/* color — shadcn base names, full colors */

--background: #ffffff;

--foreground: #1a1a1a;

--card: #ffffff;

--card-foreground: #1a1a1a;

--popover: #ffffff;

--popover-foreground: #1a1a1a;

--primary: #316ac5; /* XP selection blue */

--primary-foreground: #ffffff;

--muted: #f1efe2;

--muted-foreground: #6f6c5c;

--secondary: #ece9d8;

--secondary-foreground: #1a1a1a;

--accent: #316ac5; /* XP highlight = solid selection blue with white text */

--accent-foreground: #ffffff;

--destructive: #d64541;

--destructive-foreground: #ffffff;

--ring-opacity: 1;

--border: oklch(from #919b9c l c h / var(--ring-opacity));

--input: #7f9db9; /* classic field border */

--ring: #f8b334; /* XP orange focus glow */

/* page canvas — the XP dialog beige every panel sits on */

--canvas: #ece9d8;

/* floating surfaces are solid in XP — no glass */

--popover-opacity: 1;

--backdrop-blur-popover: 0px;

/* modal overlay — plain dim, no blur */

--overlay-opacity: 0.3;

--backdrop-blur-overlay: 0px;

/* hard scroll edges: the square DA never fades clipped content */

--scroll-fade-size: 0rem;

/* elevation — low size, hard offset shadows */

--shadow-color: oklch(0 0 0);

--shadow-size: 0.4;

--shadow-opacity: 1;

--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: 0 squares the whole DA. Controls consume --radius-control (0 here → square);

buttons floor it at Luna's 3px via max(3px, --radius-control) in skin.config.tsx. So the corner is

token-driven — raising --radius (theme editor) rounds XP controls instead of leaving them inert. */

--radius: 0rem;

--radius-control: calc(var(--radius) * 2);

/* corner shape stays round — square boxes have no corner arc to reshape */

--corner-shape: round;

--corner-shape-control: var(--corner-shape);

--corner-shape-popover: var(--corner-shape);

--corner-shape-panel: var(--corner-shape);

  /* floating-list geometry: same derivations as refined; --radius 0 collapses them to square rows/container = XP menu. */

--popover-padding: 2px;

--radius-popup-item: calc(var(--radius-control) * 0.6);

--nest-safe: 1px;

--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) - 1px));

/* content density — XP runs tighter than the refined skin */

--padding-x: 0.75rem;

--padding-y: 0.5rem;

/* control size scale — ONE base height; the ramp derives from it */

--control-h: 2rem;

/* round() to whole px so no derived step lands on a subpixel height (mirrors refined). */

--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);

/* motion — XP does not ease: linear curves, near-instant tempos */

--ease-standard: linear;

--ease-emphasized: linear;

--duration-fast: 40ms;

--duration-base: 60ms;

--duration-slow: 80ms;

}

/* Dark tokens — "Royale Noir" homage. Scoped like the light block (never on a bare .dark

subtree: refined owns the shared dark defaults), re-asserted on/under a dark xp root so the

light assertion above never wins against dark mode by proximity. */

:where(.dark) [data-skin="xp"],

.dark[data-skin="xp"] {

--background: #1e2124;

--foreground: #e6e4df;

--card: #26292d;

--card-foreground: #e6e4df;

--popover: #26292d;

--popover-foreground: #e6e4df;

--primary: #3f6fc4;

--primary-foreground: #ffffff;

--muted: #2a2d31;

--muted-foreground: #9aa0a6;

--secondary: #2a2d31;

--secondary-foreground: #e6e4df;

--accent: #2f5fb8;

--accent-foreground: #ffffff;

--destructive: #e06055;

--destructive-foreground: #ffffff;

--ring-opacity: 1;

--border: oklch(from #3f444b l c h / var(--ring-opacity));

--input: #4a5560;

--ring: #d89b3d;

--canvas: #0f1113;

--shadow-color: oklch(0 0 0);

}

/* XP collapses motion UNCONDITIONALLY (Luna tempo IS "reduced"; skin.config matches with motion:"reduced" flag).

always-on, de-gated from prefers-reduced-motion, so standalone installs snap without the docs theme editor.

declared after token block above on purpose, to override the near-instant Luna values there. */

[data-skin="xp"] {

--duration-fast: 0ms;

--duration-base: 0ms;

--duration-slow: 0ms;

}

Refined UI

Windows XP

Pack source