@miragon/mcp-toolkit-ui 2.5.0 → 2.7.0

package/src/theme/theme-provider.tsx

@@ -7,7 +7,8 @@ import {
   type CSSProperties,
   type ReactNode,
 } from "react"
-import type { ThemeDefinition } from "./create-theme.js"
+import { resolveThemeVars, type ThemeDefinition } from "./create-theme.js"
+import { PortalContainerContext } from "./portal-container.js"
 
 /**
  * How the `.dark` class is resolved on the theme scope:
@@ -74,8 +75,11 @@ function useResolvedMode(mode: ThemeMode): "light" | "dark" {
 /** Props for {@link ThemeProvider}. */
 export interface ThemeProviderProps {
   /**
-   * The white-label theme to apply (from {@link createTheme} or `themePresets`).
-   * Omit to manage only the light/dark `mode` against the toolkit defaults.
+   * The white-label theme to apply (from {@link createTheme}). Omit to keep the
+   * theme of the nearest enclosing `ThemeProvider` (re-applied in this
+   * provider's mode, so a light island inside a dark branded scope stays on
+   * the brand), or, at the top, to manage only the light/dark `mode` against
+   * the toolkit defaults (the Miragon theme).
    */
   theme?: ThemeDefinition
   /**
@@ -97,19 +101,34 @@ export interface ThemeProviderProps {
 /**
  * Apply a white-label {@link ThemeDefinition} to a subtree. Renders a wrapper
  * element carrying the theme's CSS variables as inline `style`, so they override
- * the `:root` defaults for every descendant — `Card`, `Button`, `bg-card`,
- * `text-primary`, and `rounded-lg` all re-skin without touching the widgets.
+ * the toolkit's defaults (the Miragon theme) for every descendant — `Card`,
+ * `Button`, `bg-card`, `text-link`, and `rounded-md` all re-skin without
+ * touching the widgets.
  *
- * Dark mode is handled at the scope: the `.dark` class is toggled on the wrapper
- * (not `<html>`) per the resolved {@link ThemeMode}, and the theme's `darkVars`
- * are layered on under it. This keeps theming local — two differently themed
+ * Dark mode is handled at the scope: the `.dark` class and `data-theme-mode`
+ * are set on the wrapper (not `<html>`) per the resolved {@link ThemeMode}. In
+ * dark mode the wrapper gets the toolkit's dark roles plus the theme's dark
+ * tokens and its mode-invariant light tokens ({@link resolveThemeVars}) — a
+ * light surface colour never leaks into a dark scope (mcp-toolkit#178 N35). A
+ * light scope inside a dark scope stays light: there, `data-theme-mode="light"`
+ * re-declares the toolkit's light roles. A light scope in a light document
+ * re-declares nothing and keeps what the document set (a consumer's `:root`
+ * brand). A nested provider without `theme` re-applies the enclosing one's
+ * theme in its own mode. This keeps theming local — two differently themed
  * subtrees (e.g. a brand preview gallery) coexist on one page.
  *
+ * Overlays opened inside the scope (Dialog, Sheet, Select) portal into a node
+ * within it, so they wear the same theme and mode (#178 N36,
+ * {@link usePortalContainer}). That node is the wrapper's FIRST child, an empty
+ * `display: contents` element: it draws no box, and `space-*`, `divide-*`,
+ * `gap` and `last:` on the wrapper see only your children. Only selectors on
+ * the wrapper's first/nth child (`first:`, `odd:`) count it.
+ *
  * Uses only React + the DOM (no `mcp-use/react`), so it ships from the root
  * barrel and works in a host-free standalone app, a host, or SSR alike.
  *
  * @example
- * <ThemeProvider theme={themePresets.violet} mode={host.theme ?? "system"}>
+ * <ThemeProvider theme={brand} mode={host.theme ?? "system"}>
  *   <YourWidget />
  * </ThemeProvider>
  */
@@ -122,31 +141,48 @@ export function ThemeProvider({
 }: ThemeProviderProps): ReactNode {
   const resolvedMode = useResolvedMode(mode)
   const isDark = resolvedMode === "dark"
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
+  // Without its own theme a nested provider keeps the enclosing one's brand.
+  const enclosing = useContext(ThemeContext)
+  const activeTheme = theme ?? enclosing?.theme ?? null
 
-  // Merge the light vars with the dark overrides only when dark is active, so a
-  // dark scope gets the brand's dark palette on top of `.dark`'s defaults.
-  const style = useMemo<CSSProperties>(() => {
-    if (!theme) return {}
-    if (isDark && theme.darkVars) {
-      return { ...theme.vars, ...theme.darkVars }
-    }
-    return theme.vars
-  }, [theme, isDark])
+  const style = useMemo<CSSProperties>(
+    () => resolveThemeVars(activeTheme, resolvedMode),
+    [activeTheme, resolvedMode],
+  )
 
   const value = useMemo<ThemeContextValue>(
-    () => ({ theme: theme ?? null, mode, resolvedMode }),
-    [theme, mode, resolvedMode],
+    () => ({ theme: activeTheme, mode, resolvedMode }),
+    [activeTheme, mode, resolvedMode],
   )
 
-  const classes = [isDark ? "dark" : undefined, "bg-background text-foreground", className]
+  const classes = [
+    isDark ? "dark" : undefined,
+    "bg-background text-foreground font-sans",
+    className,
+  ]
     .filter(Boolean)
     .join(" ")
 
+  // The portal node OPENS the scope as an empty `display: contents` element:
+  // it draws no box, yet overlays portaled into it inherit the scope's
+  // variables and its `.dark` / `data-theme-mode`. First, not last: Tailwind's
+  // `space-*`/`divide-*` and `last:` target the last child, so a trailing node
+  // would hand the real last child a margin or divider it never had.
+  const PortalRoot = As === "span" ? "span" : "div"
+
   return (
     <ThemeContext.Provider value={value}>
-      <As className={classes} style={style} data-theme-mode={resolvedMode}>
-        {children}
-      </As>
+      <PortalContainerContext.Provider value={portalContainer}>
+        <As className={classes} style={style} data-theme-mode={resolvedMode}>
+          <PortalRoot
+            ref={setPortalContainer}
+            data-slot="theme-portal"
+            style={{ display: "contents" }}
+          />
+          {children}
+        </As>
+      </PortalContainerContext.Provider>
     </ThemeContext.Provider>
   )
 }

package/src/theme.css

@@ -0,0 +1,314 @@
+/*
+ * @miragon/mcp-toolkit-ui/theme.css — the toolkit's design tokens and base
+ * layer, without Tailwind's entry point. `globals.css` is this file plus
+ * `@import "tailwindcss"` and the toolkit's `@source`; import THIS file instead
+ * when your own stylesheet already imports Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@miragon/mcp-toolkit-ui/src";
+ *   @import "@miragon/mcp-toolkit-ui/theme.css";
+ *
+ * Three layers (modeler-tool-design §13):
+ *   1. `--cd-*`  the Miragon corporate-design tokens, vendored unchanged.
+ *   2. Roles     `--primary`, `--link`, `--focus`, `--<tone>`, `--<tone>-soft`,
+ *                `--<tone>-ink`, radii, shadows, motion, fonts — light AND dark,
+ *                each pointing at `--cd-*` only (never at another role, so a
+ *                role overridden on a scope cannot leave a stale alias behind;
+ *                the font roles also name the host's font, `--host-font-*`).
+ *   3. Utilities Tailwind's `@theme` maps utilities onto the roles.
+ * A brand (a customer's, or a host's neutral palette) overrides layer 2 only —
+ * see docs/guides/white-labeling.md. Components use role names exclusively.
+ */
+@import "tw-animate-css";
+/* Vendort aus Miragon/corporate-identity. Nicht bearbeiten, zum Aktualisieren neu kopieren. */
+@import "./theme/cd-tokens.generated.css";
+
+/*
+ * Dark mode follows the host: a `.dark` class (the toolkit's ThemeProvider, a
+ * shell that mirrors the host theme) or `data-theme="dark"` (what SEP-1865
+ * hosts and mcp-use's ThemeProvider write on <html>). `data-theme-mode="light"`
+ * marks a forced-light island — a light ThemeProvider, or an always-light
+ * surface such as a diagram's paper and its zoom chrome.
+ *
+ * `dark:` follows the NEAREST mode scope: an element is dark when it sits in a
+ * dark scope with no light island in between. The second branch is a dark
+ * scope nested in a light island (a dark preview inside a light app); one
+ * such re-nesting is supported, which also covers a light island inside it.
+ */
+@custom-variant dark (&:is(:is(.dark, [data-theme="dark"], [data-theme-mode="dark"]) *:not([data-theme-mode="light"] *), [data-theme-mode="light"] :is(.dark, [data-theme="dark"], [data-theme-mode="dark"]) *:not([data-theme-mode="light"] :is(.dark, [data-theme="dark"], [data-theme-mode="dark"]) [data-theme-mode="light"] *)));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-focus: var(--focus);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary: var(--primary);
+  --color-link: var(--link);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-scrim: var(--scrim);
+  /* Status tones — three roles each (CI §3.3): the colour itself for fills,
+     dots, borders and icons (`bg-danger`, `border-danger`); a tint for
+     surfaces (`bg-danger-soft`, the text on it is the foreground); and the
+     TEXT colour of a tone on a plain surface (`text-danger-ink`, e.g. a
+     field error). Success and warning reach only 1.67:1 / 1.83:1 on white,
+     so their ink is the foreground. Figures never take a tone colour. */
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-ink: var(--danger-ink);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-ink: var(--warning-ink);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-success-ink: var(--success-ink);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+  --color-info-ink: var(--info-ink);
+  /* Larger legacy steps keep deriving from the base `--radius`. */
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --default-transition-duration: var(--motion-fast);
+  --default-transition-timing-function: var(--ease);
+}
+
+/* Utilities whose role carries the utility's own name (`rounded-md` →
+   `var(--radius-md)`, `shadow-2` → `var(--shadow-2)`, `font-mono` →
+   `var(--font-mono)`). `reference` keeps Tailwind from emitting the
+   self-referencing theme variable; the roles below define the values. */
+@theme inline reference {
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-pill: var(--radius-pill);
+  --shadow-1: var(--shadow-1);
+  --shadow-2: var(--shadow-2);
+  --shadow-3: var(--shadow-3);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+/* ── Mode-independent roles ───────────────────────────────────────────────── */
+:root {
+  --radius: var(--cd-radius-md);
+  --radius-sm: var(--cd-radius-sm);
+  --radius-md: var(--cd-radius-md);
+  --radius-lg: var(--cd-radius-lg);
+  --radius-pill: var(--cd-radius-pill);
+  --shadow-1: var(--cd-shadow-1);
+  --shadow-2: var(--cd-shadow-2);
+  --shadow-3: var(--cd-shadow-3);
+  --motion-fast: var(--cd-motion-fast);
+  --motion-base: var(--cd-motion-base);
+  --motion-slow: var(--cd-motion-slow);
+  --ease: var(--cd-ease);
+  /* Geist first, then the host's font, then the system stack. Loading Geist
+     is opt-in (fonts.css or fontFaces()); where it is not loaded the next
+     family renders. A SEP-1865 host sends its font as --font-sans and
+     --font-mono, the same names as these roles: McpToolkitApp moves it to
+     --host-font-sans / --host-font-mono (adoptHostFontVariables), so it
+     fills the fallback slot instead of replacing the whole stack. A brand
+     sets --font-sans itself. */
+  --font-sans:
+    "Geist", "Geist Variable", var(--host-font-sans, ui-sans-serif), system-ui, sans-serif;
+  --font-mono:
+    "Geist Mono", "Geist Mono Variable", var(--host-font-mono, ui-monospace), SFMono-Regular, Menlo,
+    Consolas, monospace;
+}
+
+/* ── Light roles ──────────────────────────────────────────────────────────── */
+/* Re-declared on a forced-light island only where it sits inside a dark
+   scope, so it stays light there. A light scope in a light document
+   re-declares nothing and inherits what the document set, a consumer's
+   `:root` brand included. `:where()` keeps the island selector at (0,1,0):
+   a brand rule on `[data-theme-mode="light"]` after this file still wins. */
+:root,
+:where(.dark, [data-theme="dark"], [data-theme-mode="dark"]) [data-theme-mode="light"] {
+  --background: var(--cd-weiss);
+  --foreground: var(--cd-schwarz);
+  --card: var(--cd-weiss);
+  --card-foreground: var(--cd-schwarz);
+  --popover: var(--cd-weiss);
+  --popover-foreground: var(--cd-schwarz);
+  --primary: var(--cd-blau);
+  --primary-foreground: var(--cd-weiss);
+  --primary-hover: var(--cd-blau-link);
+  --secondary: var(--cd-grau);
+  --secondary-foreground: var(--cd-schwarz);
+  --muted: var(--cd-grau);
+  --muted-foreground: var(--cd-text-leise);
+  --accent: var(--cd-info-soft);
+  --accent-foreground: var(--cd-blau-link);
+  --link: var(--cd-blau-link);
+  --destructive: var(--cd-danger);
+  --destructive-foreground: var(--cd-weiss);
+  --border: var(--cd-linie);
+  --input: var(--cd-kontur);
+  --ring: var(--cd-blau-link);
+  --focus: var(--cd-blau-link);
+  --success: var(--cd-success);
+  --success-soft: var(--cd-success-soft);
+  --success-ink: var(--cd-schwarz);
+  --warning: var(--cd-warning);
+  --warning-soft: var(--cd-warning-soft);
+  --warning-ink: var(--cd-schwarz);
+  --danger: var(--cd-danger);
+  --danger-soft: var(--cd-danger-soft);
+  --danger-ink: var(--cd-danger);
+  --info: var(--cd-info);
+  --info-soft: var(--cd-info-soft);
+  --info-ink: var(--cd-info);
+  --chart-1: var(--cd-blau);
+  --chart-2: var(--cd-gruen);
+  --chart-3: var(--cd-blau-hell);
+  --chart-4: var(--cd-kontur);
+  --chart-5: var(--cd-schwarz);
+  --sidebar: var(--cd-grau);
+  --sidebar-foreground: var(--cd-schwarz);
+  --sidebar-primary: var(--cd-blau);
+  --sidebar-primary-foreground: var(--cd-weiss);
+  --sidebar-accent: var(--cd-info-soft);
+  --sidebar-accent-foreground: var(--cd-blau-link);
+  --sidebar-border: var(--cd-linie);
+  --sidebar-ring: var(--cd-blau-link);
+  --scrim: color-mix(in srgb, var(--cd-schwarz) 42%, transparent);
+}
+
+/* ── Dark roles (CI dark-ground rules) ────────────────────────────────────── */
+/* --cd-schwarz is the ground; quiet surfaces lift it with white. Text white,
+   links and accent text green, buttons stay blue with white text, focus
+   blau-hell, status in the -hell values WITHOUT tinted fills, quiet text
+   --cd-kontur. --cd-kontur keeps 4.5:1 only up to a 3 % lift, so the quiet
+   surfaces quiet text sits on (--muted, --sidebar) lift 3 %. The
+   hover/selected (--accent) and secondary surfaces lift 10 % to stay
+   visible; quiet text on them switches to their foreground (both pinned in
+   theme-css.test.ts). --popover stays on the ground: --cd-blau (a checked
+   Switch in a sheet) reaches 3:1 only there (3.08:1; 2.92:1 at a 2 % lift).
+   Overlays stand off the page by their border and a scrim that pushes the
+   page back harder than on light. A destructive action keeps the
+   --cd-danger fill: white on --cd-danger-hell is 2.79:1. */
+.dark,
+[data-theme="dark"],
+[data-theme-mode="dark"] {
+  --background: var(--cd-schwarz);
+  --foreground: var(--cd-weiss);
+  --card: var(--cd-schwarz);
+  --card-foreground: var(--cd-weiss);
+  --popover: var(--cd-schwarz);
+  --popover-foreground: var(--cd-weiss);
+  --primary: var(--cd-blau);
+  --primary-foreground: var(--cd-weiss);
+  --primary-hover: var(--cd-blau-link);
+  --secondary: color-mix(in srgb, var(--cd-weiss) 10%, var(--cd-schwarz));
+  --secondary-foreground: var(--cd-weiss);
+  --muted: color-mix(in srgb, var(--cd-weiss) 3%, var(--cd-schwarz));
+  --muted-foreground: var(--cd-kontur);
+  --accent: color-mix(in srgb, var(--cd-weiss) 10%, var(--cd-schwarz));
+  --accent-foreground: var(--cd-weiss);
+  --link: var(--cd-gruen);
+  --destructive: var(--cd-danger);
+  --destructive-foreground: var(--cd-weiss);
+  --border: color-mix(in srgb, var(--cd-weiss) 14%, transparent);
+  --input: var(--cd-kontur);
+  --ring: var(--cd-blau-hell);
+  --focus: var(--cd-blau-hell);
+  --success: var(--cd-success-hell);
+  --success-soft: transparent;
+  --success-ink: var(--cd-success-hell);
+  --warning: var(--cd-warning-hell);
+  --warning-soft: transparent;
+  --warning-ink: var(--cd-warning-hell);
+  --danger: var(--cd-danger-hell);
+  --danger-soft: transparent;
+  --danger-ink: var(--cd-danger-hell);
+  --info: var(--cd-info-hell);
+  --info-soft: transparent;
+  --info-ink: var(--cd-info-hell);
+  --chart-1: var(--cd-blau-hell);
+  --chart-2: var(--cd-gruen);
+  --chart-3: var(--cd-blau);
+  --chart-4: var(--cd-kontur);
+  --chart-5: var(--cd-weiss);
+  --sidebar: color-mix(in srgb, var(--cd-weiss) 3%, var(--cd-schwarz));
+  --sidebar-foreground: var(--cd-weiss);
+  --sidebar-primary: var(--cd-blau);
+  --sidebar-primary-foreground: var(--cd-weiss);
+  --sidebar-accent: color-mix(in srgb, var(--cd-weiss) 10%, var(--cd-schwarz));
+  --sidebar-accent-foreground: var(--cd-weiss);
+  --sidebar-border: color-mix(in srgb, var(--cd-weiss) 14%, transparent);
+  --sidebar-ring: var(--cd-blau-hell);
+  --scrim: color-mix(in srgb, var(--cd-schwarz) 72%, transparent);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    @apply border-border outline-focus;
+  }
+  html,
+  body {
+    @apply bg-background text-foreground;
+  }
+  /* An opaque focus ring (>= 3:1 in both modes) on every focusable element,
+     including raw <button>s. Components with their own ring (FOCUS_RING) win:
+     utilities are a later layer. */
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+  /* Native controls and scrollbars follow the mode. Declared on <body> and
+     the mode scopes, never on <html>: a root color-scheme that differs from
+     the host's iframe element makes the browser paint an opaque canvas
+     behind the view, which mcp-use keeps transparent on purpose. */
+  body,
+  :where(body) [data-theme-mode="light"] {
+    color-scheme: light;
+  }
+  :is(.dark, [data-theme="dark"]) body,
+  body:is(.dark, [data-theme="dark"], [data-theme-mode="dark"]),
+  :where(body) :is(.dark, [data-theme="dark"], [data-theme-mode="dark"]) {
+    color-scheme: dark;
+  }
+}
+
+/* Reduced motion, always (modeler-tool-design §7). */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}