@voltro/ui-shadcn 0.1.0

package/src/tokens.css

@@ -0,0 +1,532 @@
+/* @voltro/ui-shadcn design tokens — Tailwind v4 + tw-animate-css + the full
+ * shadcn palette (light AND dark values) + the kit's ambient animations.
+ *
+ * Wiring, in your app's src/globals.css (see the styling docs,
+ * `routing/styling`):
+ *
+ *   @import "@voltro/ui-shadcn/tokens.css";
+ *   @source "./";                                       (your app's src)
+ *   @source "../node_modules/@voltro/ui-shadcn/src";    (the kit sources)
+ *
+ * (Directory form shown — the equivalent glob form ending in
+ * "…src/**/*.{tsx,ts,jsx,js}" works too; it just can't be spelled
+ * inside this CSS comment.)
+ *
+ * The SECOND @source (the kit path) is MANDATORY when you render kit
+ * components: @source paths resolve relative to the IMPORTING css file, so
+ * the kit's own @source below expands to YOUR app's src once imported —
+ * kit-only classes are silently dropped without the explicit kit path. The
+ * published package ships src/ precisely so this path matches.
+ *
+ * Keep every @theme block ABOVE any @layer rules in the same stylesheet —
+ * a later @theme is silently dropped. */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Tailwind v4 derives content from the Vite module graph; the framework's
+   Vite root is `<app>/.framework/`, not the app src — this glob (rebased to
+   the importing stylesheet, see the header) points the scanner at the
+   consuming app's src/. */
+@source "./**/*.{tsx,ts,jsx,js}";
+
+/* Canonical shadcn-style dark-mode trigger: any descendant of an
+   element with class `dark` inherits the dark token set. */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(0.99 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.94 0 0);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.44 0 0);
+  --accent: oklch(0.94 0 0);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.63 0.19 23.03);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.94 0 0);
+  --ring: oklch(0 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.55 0.22 264.53);
+  --chart-3: oklch(0.72 0 0);
+  --chart-4: oklch(0.92 0 0);
+  --chart-5: oklch(0.56 0 0);
+  --sidebar: oklch(0.99 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0 0 0);
+  --font-sans: Geist, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Geist Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 2px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.18;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow-md:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+  --shadow-lg:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+  --shadow-xl:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.14 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.18 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(1 0 0);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.25 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.23 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.32 0 0);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.69 0.2 23.91);
+  --destructive-foreground: oklch(0 0 0);
+  --border: oklch(0.26 0 0);
+  --input: oklch(0.32 0 0);
+  --ring: oklch(0.72 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.58 0.21 260.84);
+  --chart-3: oklch(0.56 0 0);
+  --chart-4: oklch(0.44 0 0);
+  --chart-5: oklch(0.92 0 0);
+  --sidebar: oklch(0.18 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.32 0 0);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.32 0 0);
+  --sidebar-ring: oklch(0.72 0 0);
+  --font-sans: Geist, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Geist Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0px;
+  --shadow-y: 1px;
+  --shadow-blur: 2px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.18;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow-md:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+  --shadow-lg:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+  --shadow-xl:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+}
+
+/* ---- Map the tokens above into Tailwind v4's @theme so utility
+   classes like `bg-background`, `text-muted-foreground`, etc.
+   resolve correctly. The `inline` keyword means the values are
+   used verbatim — no @media (prefers-color-scheme) inversion. ---- */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  /* Animation utilities — Tailwind v4 generates `animate-<name>`
+   * utilities from `--animate-<name>` registrations here. Keyframe
+   * definitions live further down (CSS doesn't care about order between
+   * @keyframes and the rule that references them, so the @theme block
+   * stays consolidated at the top to avoid the multi-@theme merge bug
+   * where blocks after @layer get silently dropped). */
+  --animate-mesh-drift-a: ui-mesh-drift-a 70s ease-in-out infinite;
+  --animate-mesh-drift-b: ui-mesh-drift-b 90s ease-in-out infinite;
+  --animate-mesh-drift-c: ui-mesh-drift-c 60s ease-in-out infinite;
+  --animate-caret-blink: ui-caret-blink 1s steps(2) infinite;
+  --animate-gradient-pan: ui-gradient-pan 8s ease-in-out infinite;
+  --animate-pulse-ring: ui-pulse-ring 2s ease-out infinite;
+  --animate-shimmer: ui-shimmer 2.5s linear infinite;
+  --animate-twinkle: ui-twinkle 6s ease-in-out infinite;
+}
+
+/* Border-color reset in @layer components (NOT @layer base). Under Vite the
+ * consuming app's entry `@import "tailwindcss"` AND this kit's own
+ * `@import "tailwindcss"` inject Tailwind preflight TWICE; the duplicate
+ * `* { border: 0 solid }` (→ currentColor) lands AFTER a reset inside
+ * @layer base and wins, so every plain `border` renders as the text color
+ * (white in dark mode). @layer components beats @layer base (preflight) yet
+ * loses to @layer utilities, so `border-red-500` / `border-destructive` still
+ * override. (Bundler-dedup'd builds like Turbopack only ever see one
+ * preflight, so this is harmless there.) */
+@layer components {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+  }
+}
+
+@layer base {
+  html,
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    min-height: 100vh;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+  /* Reserve scrollbar gutter unconditionally. Without this, short
+   * pages have no vertical scrollbar and long pages do — the resulting
+   * ~15px viewport-width difference shifts every `mx-auto max-w-7xl`
+   * container by ~7-8px between page navigations. Centered brand
+   * marks and nav rows visibly jump on route change. `stable` reserves
+   * the gutter even when no scrollbar is rendered, so layout is
+   * page-length-independent. */
+  html {
+    scrollbar-gutter: stable;
+  }
+
+  /* Pointer cursor on every actionable element. Tailwind v4 dropped
+   * the Preflight rule that gave `<button>` `cursor: pointer`,
+   * matching macOS/Windows native button behaviour. Most apps in this
+   * repo expect web-style pointer affordance on anything clickable
+   * (buttons, role="button" divs, summary, label[for]). Re-enable
+   * here so every plain `<button>` in a consumer app picks it up
+   * without per-component opt-in. `:not(:disabled)` keeps disabled
+   * buttons at default (paired with shadcn's `disabled:pointer-events-none`). */
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  [role="menuitem"]:not([aria-disabled="true"]),
+  summary,
+  label[for] {
+    cursor: pointer;
+  }
+  body {
+    margin: 0;
+  }
+
+  /* Cross-browser custom scrollbars. Thin, theme-aware, the thumb
+   * brightens on hover. Same visual outcome as a Radix ScrollArea
+   * but with zero JS + no extra DOM. Applies to every scrollable
+   * element (sidebars, code blocks, the page itself); add
+   * `.scrollbar-default` on any element to opt out. */
+  * {
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    transition: background-color 120ms ease;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--muted-foreground);
+    background-clip: padding-box;
+  }
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .scrollbar-default {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  .scrollbar-default::-webkit-scrollbar {
+    width: revert;
+    height: revert;
+  }
+  .scrollbar-default::-webkit-scrollbar-thumb {
+    background: revert;
+    border: revert;
+    border-radius: revert;
+  }
+}
+
+.font-tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Cinematic ambient animations ----
+ * Slow drifting blobs, blinking caret, gradient pan. All transform-
+ * only (GPU-composited), all motion-safe via the `motion-safe:`
+ * Tailwind variant on the consumer. Durations are deliberately long
+ * (45–90s) so motion feels ambient, not "loud". */
+
+@keyframes ui-mesh-drift-a {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  33% {
+    transform: translate3d(8vw, 4vh, 0) scale(1.05);
+  }
+  66% {
+    transform: translate3d(-4vw, 8vh, 0) scale(0.95);
+  }
+}
+@keyframes ui-mesh-drift-b {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  33% {
+    transform: translate3d(-6vw, -5vh, 0) scale(1.08);
+  }
+  66% {
+    transform: translate3d(4vw, -8vh, 0) scale(0.92);
+  }
+}
+@keyframes ui-mesh-drift-c {
+  0%,
+  100% {
+    transform: translate(-50%, 0) scale(1);
+  }
+  50% {
+    transform: translate(-50%, -8vh) scale(1.1);
+  }
+}
+@keyframes ui-caret-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes ui-gradient-pan {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+@keyframes ui-pulse-ring {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  20% {
+    transform: scale(0.7);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+@keyframes ui-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+@keyframes ui-twinkle {
+  /* Twinkle = restrained opacity ramp + a hint of scale. Caps at
+   * opacity 0.7 so the dot never fully solidifies (would read as a
+   * UI element, not ambient sparkle). Stays at 0 for 30% of the
+   * cycle so different dots feel arrhythmic. */
+  0%,
+  30%,
+  100% {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  55% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0.3;
+    transform: scale(0.85);
+  }
+}
+
+/* ---- Shiki dual-theme switch ----
+ * `HighlightedCode` (and any direct codeToHtml caller using
+ * `themes: { light, dark }` + `defaultColor: false`) emits inline
+ * styles like `--shiki-light:#xxx; --shiki-dark:#yyy` on every
+ * token span. The rules below resolve those CSS vars to the actual
+ * color/bg, picking the LIGHT set by default and DARK under `.dark`.
+ *
+ * Background goes ONLY on the <pre> — putting it on inner spans too
+ * paints the per-line `<span class="line">` elements with the theme
+ * bg, which then visibly banded against the surrounding wrapper
+ * (CodeBlock figure / CodeWindow chrome) because the colours are
+ * close-but-not-identical. Spans keep the color rule so per-token
+ * syntax highlighting still works. */
+pre.shiki {
+  background-color: var(--shiki-light-bg) !important;
+  color: var(--shiki-light) !important;
+}
+pre.shiki span {
+  color: var(--shiki-light) !important;
+}
+.dark pre.shiki {
+  background-color: var(--shiki-dark-bg) !important;
+  color: var(--shiki-dark) !important;
+}
+.dark pre.shiki span {
+  color: var(--shiki-dark) !important;
+}
+
+/* Heading with hand-painted gradient text. Use on display-size <h1>
+ * elements: `<h1 className="text-gradient">…</h1>`. Combines well
+ * with motion-safe animate-gradient-pan for the cinematic pan effect. */
+.text-gradient {
+  background-image: linear-gradient(
+    100deg,
+    var(--foreground) 0%,
+    oklch(0.75 0.18 290) 50%,
+    var(--foreground) 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* ---- Stagger entrance for grids ----
+ * `.stagger-in > *` fades + slides up with a 40ms delay between
+ * children. Used by DocCards (and reusable for any grid). Respects
+ * prefers-reduced-motion. */
+@keyframes ui-stagger-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.stagger-in > * {
+  animation: ui-stagger-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+}
+.stagger-in > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger-in > *:nth-child(2) {
+  animation-delay: 40ms;
+}
+.stagger-in > *:nth-child(3) {
+  animation-delay: 80ms;
+}
+.stagger-in > *:nth-child(4) {
+  animation-delay: 120ms;
+}
+.stagger-in > *:nth-child(5) {
+  animation-delay: 160ms;
+}
+.stagger-in > *:nth-child(6) {
+  animation-delay: 200ms;
+}
+.stagger-in > *:nth-child(7) {
+  animation-delay: 240ms;
+}
+.stagger-in > *:nth-child(8) {
+  animation-delay: 280ms;
+}
+.stagger-in > *:nth-child(9) {
+  animation-delay: 320ms;
+}
+.stagger-in > *:nth-child(n + 10) {
+  animation-delay: 360ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .stagger-in > * {
+    animation: none;
+  }
+}