@forthtilliath/shadcn-ui 0.2.0 → 0.3.0

package/dist/styles/themes/newspaper.css

@@ -0,0 +1,204 @@
+/*
+ * newspaper — Newspaper: newsprint and ink, Didone headlines over double rules, halftone dots, small caps.
+ *
+ * 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 Libre Baskerville, Playfair Display, Courier Prime
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.94 0.012 90);
+  --foreground: oklch(0.18 0.005 90);
+  --card: oklch(0.96 0.01 90);
+  --card-foreground: oklch(0.18 0.005 90);
+  --popover: oklch(0.96 0.01 90);
+  --popover-foreground: oklch(0.18 0.005 90);
+  --primary: oklch(0.18 0.005 90);
+  --primary-foreground: oklch(0.96 0.01 90);
+  --secondary: oklch(0.88 0.012 90);
+  --secondary-foreground: oklch(0.18 0.005 90);
+  --muted: oklch(0.9 0.012 90);
+  --muted-foreground: oklch(0.4 0.01 90);
+  --accent: oklch(0.5 0.2 27);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.48 0.19 27);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.18 0.005 90);
+  --input: oklch(0.18 0.005 90);
+  --ring: oklch(0.18 0.005 90);
+  --chart-1: oklch(0.18 0.005 90);
+  --chart-2: oklch(0.5 0.2 27);
+  --chart-3: oklch(0.45 0.01 90);
+  --chart-4: oklch(0.65 0.01 90);
+  --chart-5: oklch(0.35 0.08 250);
+  --sidebar: oklch(0.96 0.01 90);
+  --sidebar-foreground: oklch(0.18 0.005 90);
+  --sidebar-primary: oklch(0.18 0.005 90);
+  --sidebar-primary-foreground: oklch(0.96 0.01 90);
+  --sidebar-accent: oklch(0.5 0.2 27);
+  --sidebar-accent-foreground: oklch(0.98 0 0);
+  --sidebar-border: oklch(0.18 0.005 90);
+  --sidebar-ring: oklch(0.18 0.005 90);
+  --font-sans:
+    "Libre Baskerville", "Old Standard TT", ui-serif, Georgia, Cambria,
+    "Times New Roman", serif;
+  --font-serif:
+    "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    "Courier Prime", "Courier New", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-display:
+    "Playfair Display", "Bodoni Moda", Didot, "Bodoni 72", ui-serif, Georgia,
+    Cambria, "Times New Roman", serif;
+  --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;
+}
+
+.dark {
+  --background: oklch(0.17 0.005 90);
+  --foreground: oklch(0.92 0.01 90);
+  --card: oklch(0.2 0.006 90);
+  --card-foreground: oklch(0.92 0.01 90);
+  --popover: oklch(0.2 0.006 90);
+  --popover-foreground: oklch(0.92 0.01 90);
+  --primary: oklch(0.92 0.01 90);
+  --primary-foreground: oklch(0.17 0.005 90);
+  --secondary: oklch(0.28 0.008 90);
+  --secondary-foreground: oklch(0.92 0.01 90);
+  --muted: oklch(0.25 0.008 90);
+  --muted-foreground: oklch(0.74 0.01 90);
+  --accent: oklch(0.7 0.17 27);
+  --accent-foreground: oklch(0.17 0.005 90);
+  --destructive: oklch(0.68 0.18 27);
+  --destructive-foreground: oklch(0.17 0.005 90);
+  --border: oklch(0.92 0.01 90);
+  --input: oklch(0.92 0.01 90);
+  --ring: oklch(0.92 0.01 90);
+  --chart-1: oklch(0.92 0.01 90);
+  --chart-2: oklch(0.7 0.17 27);
+  --chart-3: oklch(0.7 0.01 90);
+  --chart-4: oklch(0.5 0.01 90);
+  --chart-5: oklch(0.7 0.08 250);
+  --sidebar: oklch(0.2 0.006 90);
+  --sidebar-foreground: oklch(0.92 0.01 90);
+  --sidebar-primary: oklch(0.92 0.01 90);
+  --sidebar-primary-foreground: oklch(0.17 0.005 90);
+  --sidebar-accent: oklch(0.7 0.17 27);
+  --sidebar-accent-foreground: oklch(0.17 0.005 90);
+  --sidebar-border: oklch(0.92 0.01 90);
+  --sidebar-ring: oklch(0.92 0.01 90);
+  --font-sans:
+    "Libre Baskerville", "Old Standard TT", ui-serif, Georgia, Cambria,
+    "Times New Roman", serif;
+  --font-serif:
+    "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --font-mono:
+    "Courier Prime", "Courier New", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-display:
+    "Playfair Display", "Bodoni Moda", Didot, "Bodoni 72", ui-serif, Georgia,
+    Cambria, "Times New Roman", serif;
+  --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;
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background-image: radial-gradient(
+    color-mix(in oklab, var(--foreground) 11%, transparent) 0.7px,
+    transparent 1px
+  );
+  background-size: 5px 5px;
+}
+
+[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="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: 1px solid var(--border);
+}
+
+[data-slot="card"] {
+  border-top: 6px double var(--border);
+}
+
+[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: 900;
+  font-size: 1.4em;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+}
+
+[data-slot="card-description"] {
+  font-style: italic;
+}
+
+[data-slot="button"][class*="shadow-xs"],
+[data-slot="badge"] {
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+}
+
+[data-slot="button"][class*="shadow-xs"] {
+  border: 1px solid var(--foreground);
+}
+
+[data-slot="separator"][data-orientation="horizontal"] {
+  height: 0;
+  background: none;
+  border-top: 3px double var(--border);
+}

package/dist/styles/themes/pixel.css

@@ -0,0 +1,189 @@
+/*
+ * pixel — 8-bit: notched pixel frames, pixel type, checkerboard — Game Boy greens (light), PICO-8 night (dark).
+ *
+ * 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 Pixelify Sans, Press Start 2P, VT323
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.83 0.13 120);
+  --foreground: oklch(0.3 0.07 145);
+  --card: oklch(0.88 0.1 120);
+  --card-foreground: oklch(0.3 0.07 145);
+  --popover: oklch(0.88 0.1 120);
+  --popover-foreground: oklch(0.3 0.07 145);
+  --primary: oklch(0.3 0.07 145);
+  --primary-foreground: oklch(0.88 0.1 120);
+  --secondary: oklch(0.45 0.09 145);
+  --secondary-foreground: oklch(0.93 0.07 120);
+  --muted: oklch(0.78 0.14 122);
+  --muted-foreground: oklch(0.3 0.07 145);
+  --accent: oklch(0.7 0.16 122);
+  --accent-foreground: oklch(0.25 0.06 145);
+  --destructive: oklch(0.42 0.12 30);
+  --destructive-foreground: oklch(0.93 0.07 120);
+  --border: oklch(0.3 0.07 145);
+  --input: oklch(0.3 0.07 145);
+  --ring: oklch(0.3 0.07 145);
+  --chart-1: oklch(0.3 0.07 145);
+  --chart-2: oklch(0.45 0.09 145);
+  --chart-3: oklch(0.62 0.15 125);
+  --chart-4: oklch(0.42 0.12 30);
+  --chart-5: oklch(0.55 0.1 180);
+  --sidebar: oklch(0.88 0.1 120);
+  --sidebar-foreground: oklch(0.3 0.07 145);
+  --sidebar-primary: oklch(0.3 0.07 145);
+  --sidebar-primary-foreground: oklch(0.88 0.1 120);
+  --sidebar-accent: oklch(0.7 0.16 122);
+  --sidebar-accent-foreground: oklch(0.25 0.06 145);
+  --sidebar-border: oklch(0.3 0.07 145);
+  --sidebar-ring: oklch(0.3 0.07 145);
+  --font-sans:
+    "Pixelify Sans", "Silkscreen", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-serif:
+    "Pixelify Sans", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-mono:
+    "VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --font-display:
+    "Press Start 2P", "Silkscreen", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --radius: 0rem;
+  --shadow-2xs: 2px 2px 0px 0px oklch(0.3 0.07 145);
+  --shadow-xs: 2px 2px 0px 0px oklch(0.3 0.07 145);
+  --shadow-sm: 4px 4px 0px 0px oklch(0.3 0.07 145);
+  --shadow: 4px 4px 0px 0px oklch(0.3 0.07 145);
+  --shadow-md: 4px 4px 0px 0px oklch(0.3 0.07 145);
+  --shadow-lg: 8px 8px 0px 0px oklch(0.3 0.07 145);
+  --shadow-xl: 8px 8px 0px 0px oklch(0.3 0.07 145);
+  --shadow-2xl: 12px 12px 0px 0px oklch(0.3 0.07 145);
+  --pixel-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='%230f380f'%3E%3Cpath d='M2 0h2v2H2zM0 2h2v2H0zM4 2h2v2H4zM2 4h2v2H2z'/%3E%3C/svg%3E");
+}
+
+.dark {
+  --background: oklch(0.2 0.035 270);
+  --foreground: oklch(0.96 0.005 90);
+  --card: oklch(0.26 0.045 270);
+  --card-foreground: oklch(0.96 0.005 90);
+  --popover: oklch(0.26 0.045 270);
+  --popover-foreground: oklch(0.96 0.005 90);
+  --primary: oklch(0.9 0.17 100);
+  --primary-foreground: oklch(0.2 0.035 270);
+  --secondary: oklch(0.72 0.13 240);
+  --secondary-foreground: oklch(0.2 0.035 270);
+  --muted: oklch(0.3 0.045 270);
+  --muted-foreground: oklch(0.8 0.02 270);
+  --accent: oklch(0.77 0.15 350);
+  --accent-foreground: oklch(0.2 0.035 270);
+  --destructive: oklch(0.66 0.22 25);
+  --destructive-foreground: oklch(0.2 0.035 270);
+  --border: oklch(0.96 0.005 90);
+  --input: oklch(0.96 0.005 90);
+  --ring: oklch(0.9 0.17 100);
+  --chart-1: oklch(0.9 0.17 100);
+  --chart-2: oklch(0.72 0.13 240);
+  --chart-3: oklch(0.77 0.15 350);
+  --chart-4: oklch(0.75 0.2 145);
+  --chart-5: oklch(0.7 0.17 50);
+  --sidebar: oklch(0.26 0.045 270);
+  --sidebar-foreground: oklch(0.96 0.005 90);
+  --sidebar-primary: oklch(0.9 0.17 100);
+  --sidebar-primary-foreground: oklch(0.2 0.035 270);
+  --sidebar-accent: oklch(0.77 0.15 350);
+  --sidebar-accent-foreground: oklch(0.2 0.035 270);
+  --sidebar-border: oklch(0.96 0.005 90);
+  --sidebar-ring: oklch(0.9 0.17 100);
+  --font-sans:
+    "Pixelify Sans", "Silkscreen", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --font-serif:
+    "Pixelify Sans", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-mono:
+    "VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --font-display:
+    "Press Start 2P", "Silkscreen", ui-monospace, SFMono-Regular, Menlo,
+    Consolas, "Liberation Mono", monospace;
+  --radius: 0rem;
+  --shadow-2xs: 2px 2px 0px 0px oklch(0.08 0.02 270);
+  --shadow-xs: 2px 2px 0px 0px oklch(0.08 0.02 270);
+  --shadow-sm: 4px 4px 0px 0px oklch(0.08 0.02 270);
+  --shadow: 4px 4px 0px 0px oklch(0.08 0.02 270);
+  --shadow-md: 4px 4px 0px 0px oklch(0.08 0.02 270);
+  --shadow-lg: 8px 8px 0px 0px oklch(0.08 0.02 270);
+  --shadow-xl: 8px 8px 0px 0px oklch(0.08 0.02 270);
+  --shadow-2xl: 12px 12px 0px 0px oklch(0.08 0.02 270);
+  --pixel-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='%23f4f4f4'%3E%3Cpath d='M2 0h2v2H2zM0 2h2v2H0zM4 2h2v2H4zM2 4h2v2H2z'/%3E%3C/svg%3E");
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background-image: conic-gradient(
+    color-mix(in oklab, var(--foreground) 6%, transparent) 25%,
+    transparent 0 50%,
+    color-mix(in oklab, var(--foreground) 6%, transparent) 0 75%,
+    transparent 0
+  );
+  background-size: 16px 16px;
+}
+
+[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: 4px solid transparent;
+  border-image: var(--pixel-frame) 2 / 4px stretch;
+  border-radius: 0;
+  background-clip: padding-box;
+  image-rendering: pixelated;
+}
+
+[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-size: 0.8em;
+  line-height: 1.6;
+  text-transform: uppercase;
+}
+
+[data-slot="button"][class*="shadow-xs"] {
+  text-transform: uppercase;
+  box-shadow: var(--shadow-sm);
+  transition: none;
+}
+
+[data-slot="button"][class*="shadow-xs"]:active {
+  transform: translateY(4px);
+  box-shadow: 0 0 #0000;
+}
+
+[data-slot] {
+  transition-timing-function: steps(3, end);
+}

package/dist/styles/themes/sketch.css

@@ -0,0 +1,214 @@
+/*
+ * sketch — Hand-drawn: wobbly inked outlines and handwriting — lined notebook (light), chalkboard (dark).
+ *
+ * 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 Patrick Hand
+ * (e.g. from Google Fonts, or next/font).
+ */
+
+:root {
+  --background: oklch(0.98 0.008 90);
+  --foreground: oklch(0.28 0.03 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.28 0.03 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.28 0.03 260);
+  --primary: oklch(0.45 0.15 255);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.93 0.1 100);
+  --secondary-foreground: oklch(0.28 0.03 260);
+  --muted: oklch(0.95 0.01 90);
+  --muted-foreground: oklch(0.46 0.02 260);
+  --accent: oklch(0.9 0.07 350);
+  --accent-foreground: oklch(0.28 0.03 260);
+  --destructive: oklch(0.52 0.19 27);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.28 0.03 260);
+  --input: oklch(0.28 0.03 260);
+  --ring: oklch(0.45 0.15 255);
+  --chart-1: oklch(0.45 0.15 255);
+  --chart-2: oklch(0.75 0.15 100);
+  --chart-3: oklch(0.7 0.13 350);
+  --chart-4: oklch(0.6 0.12 150);
+  --chart-5: oklch(0.52 0.19 27);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.28 0.03 260);
+  --sidebar-primary: oklch(0.45 0.15 255);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9 0.07 350);
+  --sidebar-accent-foreground: oklch(0.28 0.03 260);
+  --sidebar-border: oklch(0.28 0.03 260);
+  --sidebar-ring: oklch(0.45 0.15 255);
+  --font-sans:
+    "Patrick Hand", "Kalam", "Comic Neue", "Comic Sans MS", "Chalkboard SE",
+    cursive;
+  --font-serif: "Patrick Hand", "Kalam", cursive;
+  --font-mono:
+    "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 0.75rem;
+  --shadow-2xs: 1px 1px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-xs: 1px 1px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-sm: 2px 2px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow: 2px 2px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-md: 3px 3px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-lg: 3px 3px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-xl: 4px 4px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --shadow-2xl: 6px 6px 0px 0px oklch(0.28 0.03 260 / 0.85);
+  --paper-lines: repeating-linear-gradient(
+    transparent 0 27px,
+    oklch(0.75 0.06 240 / 0.45) 27px 28px
+  );
+  --paper-margin: linear-gradient(
+    90deg,
+    transparent 56px,
+    oklch(0.7 0.15 25 / 0.45) 56px 58px,
+    transparent 58px
+  );
+  --highlight: oklch(0.93 0.14 100 / 0.8);
+}
+
+.dark {
+  --background: oklch(0.29 0.035 160);
+  --foreground: oklch(0.95 0.01 100);
+  --card: oklch(0.33 0.04 160);
+  --card-foreground: oklch(0.95 0.01 100);
+  --popover: oklch(0.33 0.04 160);
+  --popover-foreground: oklch(0.95 0.01 100);
+  --primary: oklch(0.9 0.09 95);
+  --primary-foreground: oklch(0.29 0.035 160);
+  --secondary: oklch(0.39 0.04 160);
+  --secondary-foreground: oklch(0.95 0.01 100);
+  --muted: oklch(0.35 0.035 160);
+  --muted-foreground: oklch(0.84 0.02 110);
+  --accent: oklch(0.85 0.08 350);
+  --accent-foreground: oklch(0.29 0.035 160);
+  --destructive: oklch(0.78 0.14 25);
+  --destructive-foreground: oklch(0.29 0.035 160);
+  --border: oklch(0.9 0.01 100);
+  --input: oklch(0.9 0.01 100);
+  --ring: oklch(0.9 0.09 95);
+  --chart-1: oklch(0.9 0.09 95);
+  --chart-2: oklch(0.85 0.08 350);
+  --chart-3: oklch(0.82 0.08 220);
+  --chart-4: oklch(0.85 0.1 150);
+  --chart-5: oklch(0.78 0.14 25);
+  --sidebar: oklch(0.33 0.04 160);
+  --sidebar-foreground: oklch(0.95 0.01 100);
+  --sidebar-primary: oklch(0.9 0.09 95);
+  --sidebar-primary-foreground: oklch(0.29 0.035 160);
+  --sidebar-accent: oklch(0.85 0.08 350);
+  --sidebar-accent-foreground: oklch(0.29 0.035 160);
+  --sidebar-border: oklch(0.9 0.01 100);
+  --sidebar-ring: oklch(0.9 0.09 95);
+  --font-sans:
+    "Patrick Hand", "Kalam", "Comic Neue", "Comic Sans MS", "Chalkboard SE",
+    cursive;
+  --font-serif: "Patrick Hand", "Kalam", cursive;
+  --font-mono:
+    "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --radius: 0.75rem;
+  --shadow-2xs: 1px 1px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-xs: 1px 1px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-sm: 2px 2px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow: 2px 2px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-md: 3px 3px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-lg: 3px 3px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-xl: 4px 4px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --shadow-2xl: 6px 6px 0px 0px oklch(0.95 0.01 100 / 0.35);
+  --paper-lines: radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.5px);
+  --paper-margin: radial-gradient(
+    ellipse at 30% 20%,
+    oklch(1 0 0 / 0.06),
+    transparent 50%
+  );
+  --highlight: oklch(0.83 0.08 350 / 0.3);
+}
+
+/* Signature effects */
+
+:where([data-slot="button"][class*="shadow-xs"]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background-image: var(--paper-margin), var(--paper-lines);
+  background-size:
+    auto,
+    100% 28px;
+  background-attachment: local;
+}
+
+.dark body {
+  background-size:
+    auto,
+    6px 6px;
+}
+
+[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);
+  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
+}
+
+[data-slot="card"] {
+  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
+  transform: rotate(-0.4deg);
+}
+
+[data-slot="card-title"],
+[data-slot="dialog-title"],
+[data-slot="alert-dialog-title"],
+[data-slot="sheet-title"],
+[data-slot="drawer-title"] {
+  font-size: 1.25em;
+  background: linear-gradient(
+    transparent 58%,
+    var(--highlight) 58% 92%,
+    transparent 92%
+  );
+  width: fit-content;
+}
+
+[data-slot="button"][class*="shadow-xs"] {
+  transition: transform 120ms ease;
+}
+
+[data-slot="button"][class*="shadow-xs"]:hover {
+  transform: rotate(-1.5deg) scale(1.03);
+}
+
+[data-slot="button"][class*="shadow-xs"]:active {
+  transform: rotate(1deg) scale(0.98);
+}
+
+[data-slot="button"][class*="shadow-xs"]:focus-visible {
+  outline: 2px dashed var(--ring);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="button"][class*="shadow-xs"],
+  [data-slot="card"] {
+    transition: none;
+    transform: none;
+  }
+}