@leavepulse/ui 0.12.0

package/src/tokens/tokens.css

@@ -0,0 +1,333 @@
+/*
+ * Design tokens — the single source of truth for the kit.
+ *
+ * No `@import "tailwindcss"` here: this file is meant to be pulled in by a
+ * consumer that already imports Tailwind (see src/index.css and the package's
+ * "./css" export). Importing Tailwind here too would double its rules.
+ *
+ * Exposed to Tailwind v4 via @theme, so every token becomes BOTH a utility
+ * (bg-surface-raised, text-ink, rounded-card, …) AND a live CSS variable that
+ * the runtime theme engine can override. Components read only tokens; theming
+ * is just rewriting these variables.
+ *
+ * Three orthogonal axes:
+ *   color   — semantic palette (theme / brand)
+ *   shape   — radii (style)
+ *   density — spacing unit, control height, font scale (compactness)
+ */
+@theme {
+  /* ── color: surfaces ─────────────────────────── */
+  --color-surface: #080b0d;
+  --color-surface-raised: #12171d;
+  --color-surface-soft: #172027;
+  /* Derived from the (themed) raised surface so it can never drift per theme.
+     A popover/dropdown is just the raised surface with a touch of translucency. */
+  --color-surface-overlay: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
+
+  /* ── color: text ─────────────────────────────── */
+  --color-ink: #eef5f1;
+  --color-ink-inverse: #06100b;
+  --color-muted: #9aa8a2;
+  --color-muted-strong: #c7d2cc;
+
+  /* ── color: brand + state ────────────────────── */
+  --color-brand: #00bcff;
+  --color-brand-hover: #19c6ff;
+  --color-brand-soft: rgba(0, 188, 255, 0.16);
+  --color-action: #39e58c;
+  --color-action-hover: #4dffa1;
+  --color-accent: #f0b35a;
+  --color-danger: #ff6f6f;
+  --color-danger-hover: #ff8585;
+  --color-danger-soft: rgba(255, 111, 111, 0.14);
+
+  /* ── color: lines + focus ────────────────────── */
+  --color-line: rgba(255, 255, 255, 0.1);
+  --color-line-strong: rgba(255, 255, 255, 0.18);
+  --color-ring: rgba(0, 188, 255, 0.45);
+
+  /* ── shape ───────────────────────────────────── */
+  --radius-control: 8px;
+  --radius-card: 14px;
+  --radius-pill: 9999px;
+
+  /* ── density ─────────────────────────────────── */
+  --spacing-unit: 4px; /* base rhythm; scaled per density mode */
+  --size-control-sm: 32px;
+  --size-control-md: 38px;
+  --size-control-lg: 44px;
+
+  /* ── depth ───────────────────────────────────── */
+  --shadow-panel: 0 16px 48px rgba(0, 0, 0, 0.32);
+
+  /* ── surface / skin ──────────────────────────────
+     The skin axis (flat default). applyTheme() overrides these at runtime per
+     TokenSet.surface; components paint panels via .lp-skin-panel which reads
+     them, so a flat look and a full glass look are the same vars. */
+  --surface-border-width: 1px;
+  --surface-panel-blur: 0px;
+  --surface-panel-saturate: 100%;
+  --surface-panel-overlay: none;
+  --surface-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --surface-panel-inset: 0 0 0 0 transparent;
+
+  /* ── motion ──────────────────────────────────── */
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* Three-step motion scale, themeable like everything else. fast = state
+     feedback (hover/press/focus); medium = transforms & most enter/exit;
+     slow = larger reveals (disclosure height, drawer slide).
+
+     Exposed under BOTH names on purpose: `--duration-*` for the explicit
+     `duration-[var(--duration-fast)]` form already used across components, and
+     `--transition-duration-*` so Tailwind v4 emits the short `duration-medium`
+     utility (v4 reads duration utilities from the --transition-duration-*
+     namespace, not --duration-*). They reference one source so values can't drift. */
+  --duration-fast: 160ms;
+  --duration-medium: 220ms;
+  --duration-slow: 320ms;
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-medium: var(--duration-medium);
+  --transition-duration-slow: var(--duration-slow);
+
+  /* ── type ────────────────────────────────────── */
+  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+}
+
+/*
+ * NOTE: there are no static [data-theme]/[data-density] rules. Themes are
+ * JSON (TokenSet) applied at runtime via useTheme().apply() — see src/theme/.
+ * The :root block above is only the bootstrap fallback (the dark default).
+ */
+
+/* ── layering scale ──────────────────────────────
+   One ladder so overlays never fight. Toasts sit ABOVE modals on purpose:
+   a notification must remain visible even while a dialog is open. */
+@theme {
+  --z-dropdown: 50;
+  --z-overlay: 100;
+  --z-modal: 110;
+  --z-popover: 120;
+  --z-tooltip: 130;
+  --z-toast: 200;
+}
+
+/* ── overlay enter/exit animations ───────────────
+   reka keeps content mounted while data-state=closed as long as a CSS
+   animation is declared for that state (via its Presence wrapper). */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+@keyframes pop-out {
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+/*
+ * Popover enter/exit. The -in/-out pair drifts DOWN from the trigger (content
+ * placed below it). When the popper flips ABOVE the trigger (data-side=top),
+ * use the -up pair so the drift direction matches where it actually opens —
+ * otherwise an upward menu still slides down-from-above and reads wrong.
+ */
+@keyframes popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+}
+@keyframes popover-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+}
+@keyframes popover-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.97);
+  }
+}
+@keyframes popover-out-up {
+  to {
+    opacity: 0;
+    transform: translateY(4px) scale(0.97);
+  }
+}
+/* Option cascade: items slide in top→down on open. */
+@keyframes option-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+/* Cascade upward when the list opens above the trigger (data-side=top), so the
+   options drift toward where the list actually is — mirror of option-in. */
+@keyframes option-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes tab-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+@keyframes drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes drawer-out-right {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes drawer-out-left {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+    opacity: 1;
+  }
+}
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+/* Check/indicator pop: the tick scales + fades in when toggled on. */
+@keyframes indicator-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+}
+@keyframes disclosure-body-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/*
+ * Skin painter. A raised panel opts in with .lp-skin-panel and gets the active
+ * skin (flat → glass) purely from the surface tokens: border width, an overlay
+ * gradient layer, backdrop blur/saturate, and a layered + inset shadow. Driven
+ * by data, so re-skinning needs no per-component CSS.
+ */
+.lp-skin-panel {
+  position: relative;
+  border-width: var(--surface-border-width);
+  box-shadow: var(--surface-panel-inset), var(--surface-panel-shadow);
+  backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
+  -webkit-backdrop-filter: blur(var(--surface-panel-blur)) saturate(var(--surface-panel-saturate));
+}
+
+/* The overlay gradient rides above the base fill but under the content. */
+.lp-skin-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background: var(--surface-panel-overlay);
+  pointer-events: none;
+}
+
+.lp-skin-panel > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── circular theme reveal (View Transitions) ────
+   applyThemeWithTransition() snapshots the page, swaps the theme tokens, then
+   shrinks a clip-path circle in the OLD snapshot from the toggle's position,
+   revealing the new theme through the hole. The browser's default root
+   cross-fade would smear that, so we disable it: both snapshots hold full
+   opacity and don't blend — only the JS-driven circle animates. The NEW layer
+   sits beneath, full-screen and static; the OLD layer is on top and gets
+   clipped away. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-new(root) {
+  z-index: 1;
+}
+::view-transition-old(root) {
+  z-index: 2;
+}
+
+/* ── reduced motion ──────────────────────────────
+   WCAG 2.3.3: honour the OS "reduce motion" preference. Every overlay
+   keyframe above (pop/drawer/toast/option/tab/popover/collapsible) and the
+   CSS transitions/animate-pulse used across the kit collapse to a near-instant
+   state change — content still mounts/unmounts, it just doesn't travel. This is
+   the CSS half; motion-v springs (Tabs/Layout) opt out in JS via
+   useReducedMotion(). */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/*
+ * NOTE: tokens.css is the EMBEDDABLE layer — tokens + keyframes + z-scale only,
+ * no html/body resets and no global scrollbar rules (those would clobber a host
+ * app like the launcher). App-level resets live in the consumer (see the
+ * preview's preview.css / a host's own base styles).
+ */

package/src/tokens/utilities.css

@@ -0,0 +1,23 @@
+/*
+ * Always-on utilities (shipped via the main "@leavepulse/ui" import, unlike the
+ * opt-in scrollbar skin). These are scoped CLASSES — they only affect elements
+ * that explicitly carry them, so they never clobber a host app's globals.
+ */
+
+/*
+ * Hide a native scrollbar while keeping the element scrollable, and crucially
+ * keep it OUT of the layout flow so it never reserves viewport width. Used by
+ * components whose scroll can't be an LpScrollArea overlay (e.g. the CodeBlock
+ * overlay editor, whose transparent textarea + <pre> must scroll natively in
+ * sync), and exposed for app-level use to drop native bars site-wide.
+ */
+.lp-scrollbar-none {
+  scrollbar-width: none; /* Firefox / standards */
+  -ms-overflow-style: none; /* old Edge */
+}
+
+.lp-scrollbar-none::-webkit-scrollbar {
+  display: none; /* Chrome / Safari */
+  width: 0;
+  height: 0;
+}