primitive-app 3.2.0-alpha.15 → 3.2.0-alpha.16

package/dist/lib/portal-target.d.ts

@@ -0,0 +1,14 @@
+import { type ComputedRef, type Ref } from "vue";
+/**
+ * Render the portaled content of descendants (dialogs, dropdown menus,
+ * selects, popovers, sheets) into `target` instead of `document.body`.
+ *
+ * The dev tools provide their themed root, so what they open keeps their
+ * styling rather than the host app's.
+ */
+export declare function providePortalTarget(target: Ref<HTMLElement | undefined>): void;
+/**
+ * The element portaled content renders into: the nearest
+ * `providePortalTarget` element once it is mounted, otherwise `"body"`.
+ */
+export declare function usePortalTarget(): ComputedRef<HTMLElement | "body">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primitive-app",
-  "version": "3.2.0-alpha.15",
+  "version": "3.2.0-alpha.16",
   "license": "UNLICENSED",
   "author": "Primitive LLC",
   "type": "module",
@@ -42,6 +42,7 @@
     "dev": "vite",
     "build": "pnpm codegen && run-p type-check \"build-only {@}\" -- && pnpm build:dts",
     "preview": "vite preview",
+    "test": "vitest run",
     "clean": "rm -rf dist && pnpm clean-modules",
     "clean-modules": "rm -rf node_modules pnpm-lock.yaml",
     "build-only": "vite build",

package/src/style.css

@@ -83,7 +83,13 @@
   }
 }
 
-:root {
+/*
+ * The platform palette. The dev tools (`.primitive-devtools`) declare it on
+ * their own scope too, so a host that re-themes these tokens in `:root` keeps
+ * its theme out of the overlay.
+ */
+:root,
+.primitive-devtools {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.129 0.042 264.695);
@@ -119,7 +125,8 @@
   --sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
-.dark {
+.dark,
+.dark .primitive-devtools {
   --background: oklch(0.129 0.042 264.695);
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.129 0.042 264.695);
@@ -154,6 +161,182 @@
   --sidebar-ring: oklch(0.446 0.043 257.281);
 }
 
+/* The dev tools' own type: Tailwind's default stacks, whatever the host sets. */
+.primitive-devtools {
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-family: var(--font-sans);
+  line-height: 1.5;
+  color: var(--foreground);
+}
+
+/*
+ * The Tailwind theme the dev tools' utilities read. The host's Tailwind build
+ * compiles those utilities, so a host `@theme` that redefines a key
+ * (`--color-background`, `--spacing`, `--text-sm`) would otherwise restyle the
+ * overlay; inside the scope each key is primitive-app's value, or Tailwind's
+ * default, again. Tailwind writes some keys into the classes at build time
+ * (breakpoints, shadows, tw-animate's easing and duration, and any key a host
+ * declares `@theme inline`), out of a scope's reach.
+ * tests/devtools-theme-isolation-3938.test.ts (this package) fails when a
+ * dev-tools class starts reading a key missing here.
+ */
+.primitive-devtools {
+  --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-black: #000;
+  --color-white: #fff;
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --radius-xs: 0.125rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --spacing: 0.25rem;
+  /*
+   * A host `@theme` may add a step to the spacing scale (`--spacing-10`), and
+   * Tailwind then compiles `w-10`, `px-4`, `top-1/2`, `max-w-lg` and
+   * `leading-none` to read it. Each step the dev tools' classes use is held
+   * here at the value that class has without it. Decimal steps are looked up
+   * under both spellings (`--spacing-1\.5`, `--spacing-1_5`).
+   */
+  --spacing-0: 0;
+  --spacing-0\.5: calc(var(--spacing) * 0.5);
+  --spacing-0_5: calc(var(--spacing) * 0.5);
+  --spacing-1: calc(var(--spacing) * 1);
+  --spacing-1\.5: calc(var(--spacing) * 1.5);
+  --spacing-1_5: calc(var(--spacing) * 1.5);
+  --spacing-2: calc(var(--spacing) * 2);
+  --spacing-2\.5: calc(var(--spacing) * 2.5);
+  --spacing-2_5: calc(var(--spacing) * 2.5);
+  --spacing-3: calc(var(--spacing) * 3);
+  --spacing-3\.5: calc(var(--spacing) * 3.5);
+  --spacing-3_5: calc(var(--spacing) * 3.5);
+  --spacing-4: calc(var(--spacing) * 4);
+  --spacing-5: calc(var(--spacing) * 5);
+  --spacing-6: calc(var(--spacing) * 6);
+  --spacing-7: calc(var(--spacing) * 7);
+  --spacing-8: calc(var(--spacing) * 8);
+  --spacing-9: calc(var(--spacing) * 9);
+  --spacing-10: calc(var(--spacing) * 10);
+  --spacing-12: calc(var(--spacing) * 12);
+  --spacing-16: calc(var(--spacing) * 16);
+  --spacing-20: calc(var(--spacing) * 20);
+  --spacing-24: calc(var(--spacing) * 24);
+  --spacing-28: calc(var(--spacing) * 28);
+  --spacing-32: calc(var(--spacing) * 32);
+  --spacing-40: calc(var(--spacing) * 40);
+  --spacing-44: calc(var(--spacing) * 44);
+  --spacing-48: calc(var(--spacing) * 48);
+  --spacing-56: calc(var(--spacing) * 56);
+  --spacing-64: calc(var(--spacing) * 64);
+  --spacing-72: calc(var(--spacing) * 72);
+  --spacing-80: calc(var(--spacing) * 80);
+  --spacing-96: calc(var(--spacing) * 96);
+  --spacing-1\/2: calc(1 / 2 * 100%);
+  --spacing-3\/4: calc(3 / 4 * 100%);
+  --spacing-px: 1px;
+  --spacing-auto: auto;
+  --spacing-fit: fit-content;
+  --spacing-full: 100%;
+  --spacing-none: 1;
+  --spacing-xs: var(--container-xs);
+  --spacing-sm: var(--container-sm);
+  --spacing-md: var(--container-md);
+  --spacing-lg: var(--container-lg);
+  --spacing-4xl: var(--container-4xl);
+  --spacing-screen-lg: var(--breakpoint-lg);
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-4xl: 56rem;
+  --breakpoint-lg: 64rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --tracking-wide: 0.025em;
+  --tracking-widest: 0.1em;
+  --leading-relaxed: 1.625;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-spin: spin 1s linear infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --blur: 8px;
+  --blur-sm: 8px;
+  --aspect-video: 16 / 9;
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*
+ * A host's base rules aimed at elements (`button { font-family: … }`) reach
+ * the dev tools' controls directly, not through the scope. Inside it every
+ * element takes its type from its parent instead (code stays monospace). This
+ * sits in the base layer, so utilities such as `font-mono` still apply.
+ */
+@layer base {
+  .primitive-devtools * {
+    font-family: inherit;
+    letter-spacing: inherit;
+  }
+  .primitive-devtools code,
+  .primitive-devtools kbd,
+  .primitive-devtools samp,
+  .primitive-devtools pre {
+    font-family: var(--font-mono);
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;