@forthtilliath/shadcn-ui 0.2.0 → 0.3.0

package/dist/styles/themes/crt.css

@@ -0,0 +1,238 @@
+/*
+ * crt — CRT monitor: amber phosphor, scanlines and vignette, glowing text, blinking cursor.
+ *
+ * Tokens plus signature effects: plain CSS rules on shadcn's data-slot
+ * attributes, active only while this theme is imported. Fonts fall back to
+ * system stacks; for the full look, load IBM Plex Mono
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.96 0.025 85);
+  --foreground: oklch(0.3 0.06 60);
+  --card: oklch(0.98 0.015 85);
+  --card-foreground: oklch(0.3 0.06 60);
+  --popover: oklch(0.98 0.015 85);
+  --popover-foreground: oklch(0.3 0.06 60);
+  --primary: oklch(0.48 0.12 60);
+  --primary-foreground: oklch(0.98 0.015 85);
+  --secondary: oklch(0.91 0.04 80);
+  --secondary-foreground: oklch(0.3 0.06 60);
+  --muted: oklch(0.92 0.03 85);
+  --muted-foreground: oklch(0.44 0.07 60);
+  --accent: oklch(0.88 0.09 85);
+  --accent-foreground: oklch(0.3 0.06 60);
+  --destructive: oklch(0.5 0.19 27);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.72 0.07 70);
+  --input: oklch(0.72 0.07 70);
+  --ring: oklch(0.48 0.12 60);
+  --chart-1: oklch(0.48 0.12 60);
+  --chart-2: oklch(0.62 0.14 75);
+  --chart-3: oklch(0.4 0.08 60);
+  --chart-4: oklch(0.5 0.19 27);
+  --chart-5: oklch(0.7 0.12 85);
+  --sidebar: oklch(0.98 0.015 85);
+  --sidebar-foreground: oklch(0.3 0.06 60);
+  --sidebar-primary: oklch(0.48 0.12 60);
+  --sidebar-primary-foreground: oklch(0.98 0.015 85);
+  --sidebar-accent: oklch(0.88 0.09 85);
+  --sidebar-accent-foreground: oklch(0.3 0.06 60);
+  --sidebar-border: oklch(0.72 0.07 70);
+  --sidebar-ring: oklch(0.48 0.12 60);
+  --font-sans:
+    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-serif:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-mono:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 0rem;
+  --shadow-2xs: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  --shadow: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-xl: 0 0 #0000;
+  --shadow-2xl: 0 0 #0000;
+  --crt-scanline: oklch(0.3 0.06 60 / 0.06);
+  --crt-glow: 0 0 #0000;
+}
+
+.dark {
+  --background: oklch(0.15 0.018 60);
+  --foreground: oklch(0.84 0.16 72);
+  --card: oklch(0.19 0.025 60);
+  --card-foreground: oklch(0.84 0.16 72);
+  --popover: oklch(0.19 0.025 60);
+  --popover-foreground: oklch(0.84 0.16 72);
+  --primary: oklch(0.84 0.16 72);
+  --primary-foreground: oklch(0.15 0.018 60);
+  --secondary: oklch(0.27 0.045 60);
+  --secondary-foreground: oklch(0.84 0.16 72);
+  --muted: oklch(0.23 0.035 60);
+  --muted-foreground: oklch(0.72 0.13 70);
+  --accent: oklch(0.91 0.13 88);
+  --accent-foreground: oklch(0.15 0.018 60);
+  --destructive: oklch(0.7 0.19 30);
+  --destructive-foreground: oklch(0.15 0.018 60);
+  --border: oklch(0.42 0.08 70);
+  --input: oklch(0.42 0.08 70);
+  --ring: oklch(0.84 0.16 72);
+  --chart-1: oklch(0.84 0.16 72);
+  --chart-2: oklch(0.91 0.13 88);
+  --chart-3: oklch(0.65 0.12 65);
+  --chart-4: oklch(0.7 0.19 30);
+  --chart-5: oklch(0.55 0.1 70);
+  --sidebar: oklch(0.19 0.025 60);
+  --sidebar-foreground: oklch(0.84 0.16 72);
+  --sidebar-primary: oklch(0.84 0.16 72);
+  --sidebar-primary-foreground: oklch(0.15 0.018 60);
+  --sidebar-accent: oklch(0.91 0.13 88);
+  --sidebar-accent-foreground: oklch(0.15 0.018 60);
+  --sidebar-border: oklch(0.42 0.08 70);
+  --sidebar-ring: oklch(0.84 0.16 72);
+  --font-sans:
+    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-serif:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-mono:
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 0rem;
+  --shadow-2xs: 0 0 4px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-xs: 0 0 7px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-sm: 0 0 10px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow: 0 0 13px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-md: 0 0 16px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-lg: 0 0 19px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-xl: 0 0 22px 0 oklch(0.84 0.16 72 / 0.22);
+  --shadow-2xl: 0 0 25px 0 oklch(0.84 0.16 72 / 0.22);
+  --crt-scanline: oklch(0 0 0 / 0.28);
+  --crt-glow: 0 0 6px color-mix(in oklab, currentColor 55%, transparent);
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  text-shadow: var(--crt-glow);
+  background-image: radial-gradient(
+    ellipse at center,
+    transparent 55%,
+    oklch(0 0 0 / 0.35)
+  );
+  background-attachment: fixed;
+}
+
+/* Scanlines over the whole screen, click-through. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0 2px,
+    var(--crt-scanline) 2px 3px
+  );
+}
+
+[data-slot="card"],
+[data-slot="alert"],
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="popover-content"],
+[data-slot="hover-card-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"],
+[data-slot="menubar-content"],
+[data-slot="input"],
+[data-slot="textarea"],
+[data-slot="select-trigger"],
+[data-slot="input-otp-slot"],
+[data-slot="button"][class*="shadow-xs"],
+[data-slot="badge"] {
+  border-radius: 0;
+}
+
+[data-slot="button"][class*="shadow-xs"] {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+[data-slot="button"]:is(
+    [class*="bg-primary"],
+    [class*="bg-destructive"],
+    [class*="bg-secondary"]
+  )::before {
+  content: "[" / "";
+}
+
+[data-slot="button"]:is(
+    [class*="bg-primary"],
+    [class*="bg-destructive"],
+    [class*="bg-secondary"]
+  )::after {
+  content: "]" / "";
+}
+
+[data-slot="card-title"],
+[data-slot="dialog-title"],
+[data-slot="alert-dialog-title"],
+[data-slot="sheet-title"],
+[data-slot="drawer-title"] {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+[data-slot="card-title"],
+[data-slot="dialog-title"],
+[data-slot="alert-dialog-title"],
+[data-slot="sheet-title"],
+[data-slot="drawer-title"]::after {
+  content: "_" / "";
+  animation: crt-blink 1s steps(1) infinite;
+}
+
+[data-slot="input"],
+[data-slot="textarea"],
+[data-slot="select-trigger"],
+[data-slot="input-otp-slot"] {
+  caret-color: var(--primary);
+  caret-shape: block;
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  text-shadow: none;
+}
+
+@keyframes crt-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="card-title"]::after,
+  [data-slot="dialog-title"]::after,
+  [data-slot="alert-dialog-title"]::after,
+  [data-slot="sheet-title"]::after,
+  [data-slot="drawer-title"]::after {
+    animation: none;
+  }
+}

package/dist/styles/themes/default.css

@@ -11,7 +11,8 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* 0.545 (shadcn: 0.556) reaches 4.5:1 on --muted, for WCAG AA. */
+  --muted-foreground: oklch(0.545 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);

package/dist/styles/themes/glass.css

@@ -0,0 +1,178 @@
+/*
+ * glass — Glassmorphism: frosted translucent surfaces floating over a colorful gradient mesh.
+ *
+ * Tokens plus signature effects: plain CSS rules on shadcn's data-slot
+ * attributes, active only while this theme is imported. Fonts fall back to
+ * system stacks; for the full look, load Plus Jakarta Sans
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.97 0.012 260);
+  --foreground: oklch(0.22 0.03 265);
+  --card: oklch(0.99 0.006 260);
+  --card-foreground: oklch(0.22 0.03 265);
+  --popover: oklch(0.99 0.006 260);
+  --popover-foreground: oklch(0.22 0.03 265);
+  --primary: oklch(0.5 0.2 265);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.94 0.02 260);
+  --secondary-foreground: oklch(0.3 0.04 265);
+  --muted: oklch(0.94 0.015 260);
+  --muted-foreground: oklch(0.45 0.03 265);
+  --accent: oklch(0.92 0.04 200);
+  --accent-foreground: oklch(0.3 0.05 220);
+  --destructive: oklch(0.54 0.2 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9 0.02 260);
+  --input: oklch(0.9 0.02 260);
+  --ring: oklch(0.5 0.2 265);
+  --chart-1: oklch(0.5 0.2 265);
+  --chart-2: oklch(0.65 0.14 200);
+  --chart-3: oklch(0.65 0.2 350);
+  --chart-4: oklch(0.75 0.14 90);
+  --chart-5: oklch(0.6 0.16 300);
+  --sidebar: oklch(0.99 0.006 260);
+  --sidebar-foreground: oklch(0.22 0.03 265);
+  --sidebar-primary: oklch(0.5 0.2 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.92 0.04 200);
+  --sidebar-accent-foreground: oklch(0.3 0.05 220);
+  --sidebar-border: oklch(0.9 0.02 260);
+  --sidebar-ring: oklch(0.5 0.2 265);
+  --font-sans:
+    "Plus Jakarta Sans", "Manrope", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 1.25rem;
+  --shadow-2xs: 0 2px 10px -4px oklch(0.4 0.1 265 / 0.08);
+  --shadow-xs: 0 4px 16px -4px oklch(0.4 0.1 265 / 0.1);
+  --shadow-sm: 0 6px 22px -4px oklch(0.4 0.1 265 / 0.12);
+  --shadow: 0 8px 28px -4px oklch(0.4 0.1 265 / 0.14);
+  --shadow-md: 0 10px 34px -4px oklch(0.4 0.1 265 / 0.16);
+  --shadow-lg: 0 12px 40px -4px oklch(0.4 0.1 265 / 0.18);
+  --shadow-xl: 0 14px 46px -4px oklch(0.4 0.1 265 / 0.2);
+  --shadow-2xl: 0 16px 52px -4px oklch(0.4 0.1 265 / 0.22);
+  --mesh-1: oklch(0.82 0.12 300 / 0.75);
+  --mesh-2: oklch(0.85 0.11 200 / 0.75);
+  --mesh-3: oklch(0.86 0.12 350 / 0.7);
+  --mesh-4: oklch(0.9 0.1 90 / 0.65);
+  --glass-edge: oklch(1 0 0 / 0.65);
+}
+
+.dark {
+  --background: oklch(0.17 0.03 270);
+  --foreground: oklch(0.96 0.01 260);
+  --card: oklch(0.23 0.035 270);
+  --card-foreground: oklch(0.96 0.01 260);
+  --popover: oklch(0.23 0.035 270);
+  --popover-foreground: oklch(0.96 0.01 260);
+  --primary: oklch(0.74 0.14 265);
+  --primary-foreground: oklch(0.17 0.03 270);
+  --secondary: oklch(0.3 0.04 270);
+  --secondary-foreground: oklch(0.96 0.01 260);
+  --muted: oklch(0.27 0.035 270);
+  --muted-foreground: oklch(0.78 0.03 265);
+  --accent: oklch(0.35 0.05 220);
+  --accent-foreground: oklch(0.96 0.01 260);
+  --destructive: oklch(0.69 0.19 25);
+  --destructive-foreground: oklch(0.17 0.03 270);
+  --border: oklch(0.4 0.04 270);
+  --input: oklch(0.4 0.04 270);
+  --ring: oklch(0.74 0.14 265);
+  --chart-1: oklch(0.74 0.14 265);
+  --chart-2: oklch(0.75 0.12 200);
+  --chart-3: oklch(0.72 0.17 350);
+  --chart-4: oklch(0.8 0.12 90);
+  --chart-5: oklch(0.7 0.15 300);
+  --sidebar: oklch(0.23 0.035 270);
+  --sidebar-foreground: oklch(0.96 0.01 260);
+  --sidebar-primary: oklch(0.74 0.14 265);
+  --sidebar-primary-foreground: oklch(0.17 0.03 270);
+  --sidebar-accent: oklch(0.35 0.05 220);
+  --sidebar-accent-foreground: oklch(0.96 0.01 260);
+  --sidebar-border: oklch(0.4 0.04 270);
+  --sidebar-ring: oklch(0.74 0.14 265);
+  --font-sans:
+    "Plus Jakarta Sans", "Manrope", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 1.25rem;
+  --shadow-2xs: 0 2px 10px -4px oklch(0 0 0 / 0.3);
+  --shadow-xs: 0 4px 16px -4px oklch(0 0 0 / 0.34);
+  --shadow-sm: 0 6px 22px -4px oklch(0 0 0 / 0.38);
+  --shadow: 0 8px 28px -4px oklch(0 0 0 / 0.42);
+  --shadow-md: 0 10px 34px -4px oklch(0 0 0 / 0.46);
+  --shadow-lg: 0 12px 40px -4px oklch(0 0 0 / 0.5);
+  --shadow-xl: 0 14px 46px -4px oklch(0 0 0 / 0.54);
+  --shadow-2xl: 0 16px 52px -4px oklch(0 0 0 / 0.58);
+  --mesh-1: oklch(0.45 0.2 300 / 0.8);
+  --mesh-2: oklch(0.42 0.14 220 / 0.8);
+  --mesh-3: oklch(0.42 0.18 350 / 0.7);
+  --mesh-4: oklch(0.38 0.12 170 / 0.7);
+  --glass-edge: oklch(1 0 0 / 0.14);
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(at 12% 18%, var(--mesh-1) 0, transparent 45%),
+    radial-gradient(at 88% 8%, var(--mesh-2) 0, transparent 42%),
+    radial-gradient(at 72% 88%, var(--mesh-3) 0, transparent 46%),
+    radial-gradient(at 8% 92%, var(--mesh-4) 0, transparent 40%);
+  background-attachment: fixed;
+}
+
+[data-slot="card"],
+[data-slot="alert"],
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="popover-content"],
+[data-slot="hover-card-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"],
+[data-slot="menubar-content"] {
+  background-color: color-mix(in oklab, var(--card) 62%, transparent);
+  backdrop-filter: blur(20px) saturate(1.6);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6);
+  border: 1px solid var(--glass-edge);
+}
+
+[data-slot="input"],
+[data-slot="textarea"],
+[data-slot="select-trigger"],
+[data-slot="input-otp-slot"],
+[data-slot="button"][class*="border-input"] {
+  background-color: color-mix(in oklab, var(--card) 45%, transparent);
+  border-color: var(--glass-edge);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* A light sheen across filled buttons. */
+[data-slot="button"]:is(
+  [class*="bg-primary"],
+  [class*="bg-destructive"],
+  [class*="bg-secondary"]
+) {
+  background-image: linear-gradient(
+    180deg,
+    oklch(1 0 0 / 0.28),
+    oklch(1 0 0 / 0) 60%
+  );
+}

package/dist/styles/themes/memphis.css

@@ -0,0 +1,220 @@
+/*
+ * memphis — Memphis pop: confetti pattern, asymmetric corners, squiggly underlined titles, colored hard shadows.
+ *
+ * Tokens plus signature effects: plain CSS rules on shadcn's data-slot
+ * attributes, active only while this theme is imported. Fonts fall back to
+ * system stacks; for the full look, load Rubik
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.97 0.02 90);
+  --foreground: oklch(0.2 0.02 280);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.02 280);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.02 280);
+  --primary: oklch(0.56 0.23 350);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.78 0.12 185);
+  --secondary-foreground: oklch(0.2 0.02 280);
+  --muted: oklch(0.94 0.03 90);
+  --muted-foreground: oklch(0.42 0.03 280);
+  --accent: oklch(0.9 0.16 95);
+  --accent-foreground: oklch(0.2 0.02 280);
+  --destructive: oklch(0.53 0.21 27);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.2 0.02 280);
+  --input: oklch(0.2 0.02 280);
+  --ring: oklch(0.56 0.23 350);
+  --chart-1: oklch(0.56 0.23 350);
+  --chart-2: oklch(0.78 0.12 185);
+  --chart-3: oklch(0.9 0.16 95);
+  --chart-4: oklch(0.55 0.2 295);
+  --chart-5: oklch(0.7 0.18 40);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.2 0.02 280);
+  --sidebar-primary: oklch(0.56 0.23 350);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9 0.16 95);
+  --sidebar-accent-foreground: oklch(0.2 0.02 280);
+  --sidebar-border: oklch(0.2 0.02 280);
+  --sidebar-ring: oklch(0.56 0.23 350);
+  --font-sans:
+    "Rubik", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --font-display:
+    "Rubik", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --radius: 1rem;
+  --shadow-2xs: 2px 2px 0px 0px oklch(0.78 0.12 185);
+  --shadow-xs: 2px 2px 0px 0px oklch(0.78 0.12 185);
+  --shadow-sm: 3px 3px 0px 0px oklch(0.78 0.12 185);
+  --shadow: 4px 4px 0px 0px oklch(0.78 0.12 185);
+  --shadow-md: 5px 5px 0px 0px oklch(0.78 0.12 185);
+  --shadow-lg: 6px 6px 0px 0px oklch(0.78 0.12 185);
+  --shadow-xl: 8px 8px 0px 0px oklch(0.78 0.12 185);
+  --shadow-2xl: 12px 12px 0px 0px oklch(0.78 0.12 185);
+  --memphis-a: oklch(0.62 0.23 350 / 0.45);
+  --memphis-b: oklch(0.78 0.12 185 / 0.55);
+  --memphis-c: oklch(0.2 0.02 280 / 0.07);
+}
+
+.dark {
+  --background: oklch(0.22 0.05 285);
+  --foreground: oklch(0.97 0.02 90);
+  --card: oklch(0.27 0.06 285);
+  --card-foreground: oklch(0.97 0.02 90);
+  --popover: oklch(0.27 0.06 285);
+  --popover-foreground: oklch(0.97 0.02 90);
+  --primary: oklch(0.75 0.19 350);
+  --primary-foreground: oklch(0.2 0.04 285);
+  --secondary: oklch(0.8 0.12 185);
+  --secondary-foreground: oklch(0.2 0.04 285);
+  --muted: oklch(0.3 0.06 285);
+  --muted-foreground: oklch(0.8 0.03 90);
+  --accent: oklch(0.9 0.16 95);
+  --accent-foreground: oklch(0.2 0.04 285);
+  --destructive: oklch(0.7 0.2 27);
+  --destructive-foreground: oklch(0.2 0.04 285);
+  --border: oklch(0.97 0.02 90);
+  --input: oklch(0.97 0.02 90);
+  --ring: oklch(0.75 0.19 350);
+  --chart-1: oklch(0.75 0.19 350);
+  --chart-2: oklch(0.8 0.12 185);
+  --chart-3: oklch(0.9 0.16 95);
+  --chart-4: oklch(0.7 0.18 295);
+  --chart-5: oklch(0.75 0.17 40);
+  --sidebar: oklch(0.27 0.06 285);
+  --sidebar-foreground: oklch(0.97 0.02 90);
+  --sidebar-primary: oklch(0.75 0.19 350);
+  --sidebar-primary-foreground: oklch(0.2 0.04 285);
+  --sidebar-accent: oklch(0.9 0.16 95);
+  --sidebar-accent-foreground: oklch(0.2 0.04 285);
+  --sidebar-border: oklch(0.97 0.02 90);
+  --sidebar-ring: oklch(0.75 0.19 350);
+  --font-sans:
+    "Rubik", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --font-display:
+    "Rubik", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --radius: 1rem;
+  --shadow-2xs: 2px 2px 0px 0px oklch(0.75 0.19 350);
+  --shadow-xs: 2px 2px 0px 0px oklch(0.75 0.19 350);
+  --shadow-sm: 3px 3px 0px 0px oklch(0.75 0.19 350);
+  --shadow: 4px 4px 0px 0px oklch(0.75 0.19 350);
+  --shadow-md: 5px 5px 0px 0px oklch(0.75 0.19 350);
+  --shadow-lg: 6px 6px 0px 0px oklch(0.75 0.19 350);
+  --shadow-xl: 8px 8px 0px 0px oklch(0.75 0.19 350);
+  --shadow-2xl: 12px 12px 0px 0px oklch(0.75 0.19 350);
+  --memphis-a: oklch(0.75 0.19 350 / 0.45);
+  --memphis-b: oklch(0.8 0.12 185 / 0.4);
+  --memphis-c: oklch(0.97 0.02 90 / 0.06);
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* Confetti: dots, rings and dashes. */
+body {
+  background-image:
+    radial-gradient(circle at 20% 30%, var(--memphis-a) 3px, transparent 3.5px),
+    radial-gradient(
+      circle at 70% 75%,
+      transparent 4px,
+      var(--memphis-b) 4.5px 6px,
+      transparent 6.5px
+    ),
+    linear-gradient(
+      45deg,
+      transparent 48%,
+      var(--memphis-c) 48% 52%,
+      transparent 52%
+    );
+  background-size:
+    64px 64px,
+    96px 96px,
+    52px 52px;
+}
+
+[data-slot="card"],
+[data-slot="alert"],
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="popover-content"],
+[data-slot="hover-card-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"],
+[data-slot="menubar-content"],
+[data-slot="input"],
+[data-slot="textarea"],
+[data-slot="select-trigger"],
+[data-slot="input-otp-slot"],
+[data-slot="button"][class*="shadow-xs"],
+[data-slot="badge"] {
+  border: 2px solid var(--border);
+}
+
+[data-slot="card"],
+[data-slot="alert"],
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="popover-content"],
+[data-slot="hover-card-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"],
+[data-slot="menubar-content"] {
+  border-radius: 1.75rem 0.25rem 1.75rem 0.25rem;
+  box-shadow: var(--shadow-lg);
+}
+
+[data-slot="button"][class*="shadow-xs"],
+[data-slot="badge"] {
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+[data-slot="button"][class*="shadow-xs"] {
+  box-shadow: var(--shadow-sm);
+  transition: transform 100ms ease;
+}
+
+[data-slot="button"][class*="shadow-xs"]:hover {
+  transform: translateY(-2px) rotate(-1deg);
+}
+
+[data-slot="badge"] {
+  transform: rotate(-2deg);
+}
+
+[data-slot="card-title"],
+[data-slot="dialog-title"],
+[data-slot="alert-dialog-title"],
+[data-slot="sheet-title"],
+[data-slot="drawer-title"] {
+  font-family: var(--font-display);
+  font-weight: 800;
+  text-decoration: underline wavy var(--primary) 2px;
+  text-underline-offset: 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="button"][class*="shadow-xs"] {
+    transition: none;
+  }
+}