/**
 * Design token CSS custom properties for the Lit DevTools, as plain text.
 *
 * Kept free of Lit: the page runtime injects these into every page it runs
 * on, and importing Lit there would bundle lit-html, whose `lit-html`
 * Trusted Types policy would then exist before the page's own Lit asks for
 * it. `tokens.ts` adds the panel's Lit `css` template on top.
 *
 * Two entry points:
 *  - **`tokens`** — Lit `css` template that defines the theme-agnostic base
 *    tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,
 *    etc.) are inherited from `:root`, where {@link injectTokens} installs them.
 *    Use as `static styles = [tokens, css`…`]`.
 *  - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.
 *    This makes semantic aliases available to every devtools surface, both
 *    runtime elements (indicator, source-overlay) that build their shadow DOM
 *    via `innerHTML` and Lit panel components that inherit from `:root`.
 *    The injected stylesheet reacts to `prefers-color-scheme` and to
 *    `.color-scheme-light` / `.color-scheme-dark` classes on `:root`. A page
 *    that shows panel views among its own content (the docs) passes a
 *    {@link InjectTokensOptions.scope} instead, so only that wrapper gets them.
 *
 * The values come from packages/webawesome-theme-lit through the generated
 * `design-tokens.ts`; this file only adds the DevTools' own sizes, fonts and
 * corners. Defaults to the dark DevTools theme; the light lit.dev website
 * palette is applied when the OS/browser requests a light color scheme or
 * when `:root` has the matching theme class.
 */
export declare const baseTokenCSS = "\n  /* ---- Brand \u00B7 the Lit flame ---- */\n  --lit-devtools-lit-blue: #324fff;\n  --lit-devtools-lit-blue-bright: #4d63ff;\n  --lit-devtools-lit-indigo: #2a2c9d;\n  --lit-devtools-lit-dark-blue: #283198;\n  --lit-devtools-lit-cyan: #00ffff;\n  --lit-devtools-lit-cyan-soft: #91ffff;\n  --lit-devtools-lit-dark-cyan: #00e8ff;\n\n  /* Lit blue as an 11-step ramp, 50 = --lit-devtools-lit-blue, hue held at 268. */\n  --lit-devtools-lit-blue-95: oklch(0.96 0.02 268);\n  --lit-devtools-lit-blue-90: oklch(0.92 0.045 268);\n  --lit-devtools-lit-blue-80: oklch(0.84 0.09 268);\n  --lit-devtools-lit-blue-70: oklch(0.74 0.15 268);\n  --lit-devtools-lit-blue-60: oklch(0.64 0.21 268);\n  --lit-devtools-lit-blue-50: var(--lit-devtools-lit-blue);\n  --lit-devtools-lit-blue-40: oklch(0.44 0.23 268);\n  --lit-devtools-lit-blue-30: oklch(0.36 0.19 268);\n  --lit-devtools-lit-blue-20: oklch(0.28 0.13 268);\n  --lit-devtools-lit-blue-10: oklch(0.2 0.08 268);\n  --lit-devtools-lit-blue-05: oklch(0.15 0.05 268);\n\n  /* ---- Neutral ink scale (0 = near-black, 13 = white) ---- */\n  --lit-devtools-ink-0: hsl(0 0% 1%);\n  --lit-devtools-ink-1: hsl(0 0% 5%);\n  --lit-devtools-ink-2: hsl(0 0% 7%);\n  --lit-devtools-ink-3: hsl(0 0% 11%);\n  --lit-devtools-ink-4: hsl(0 0% 13%);\n  --lit-devtools-ink-5: hsl(0 0% 16%);\n  --lit-devtools-ink-6: hsl(0 0% 21%);\n  --lit-devtools-ink-7: hsl(0 0% 28%);\n  --lit-devtools-ink-8: hsl(0 0% 38%);\n  --lit-devtools-ink-9: hsl(0 0% 57%);\n  --lit-devtools-ink-10: hsl(0 0% 63%);\n  --lit-devtools-ink-11: hsl(0 0% 78%);\n  --lit-devtools-ink-12: hsl(0 0% 89%);\n  --lit-devtools-ink-13: hsl(0 0% 100%);\n\n  /* ---- Typography ---- */\n  --lit-devtools-font-sans:\n    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  --lit-devtools-font-mono:\n    'Lilex Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n\n  --lit-devtools-weight-regular: 400;\n  --lit-devtools-weight-medium: 500;\n  --lit-devtools-weight-semibold: 600;\n  --lit-devtools-weight-bold: 700;\n  --lit-devtools-weight-extrabold: 800;\n\n  --lit-devtools-text-2xs: 11px;\n  --lit-devtools-text-xs: 12px;\n  --lit-devtools-text-sm: 13px;\n  --lit-devtools-text-md: 14px;\n  --lit-devtools-text-base: 16px;\n  --lit-devtools-text-lg: 18px;\n  --lit-devtools-text-xl: 22px;\n  --lit-devtools-text-2xl: 28px;\n  --lit-devtools-text-3xl: 36px;\n  --lit-devtools-text-4xl: 48px;\n  --lit-devtools-text-5xl: 64px;\n\n  --lit-devtools-leading-tight: 1.15;\n  --lit-devtools-leading-snug: 1.3;\n  --lit-devtools-leading-normal: 1.5;\n  --lit-devtools-leading-relaxed: 1.65;\n\n  --lit-devtools-tracking-tight: -0.02em;\n  --lit-devtools-tracking-snug: -0.01em;\n  --lit-devtools-tracking-normal: 0;\n  --lit-devtools-tracking-wide: 0.02em;\n  --lit-devtools-tracking-caps: 0.06em;\n\n  /* ---- Spacing (4px base, fine-grained for dense tooling) ---- */\n  --lit-devtools-space-0: 0;\n  --lit-devtools-space-1: 2px;\n  --lit-devtools-space-2: 4px;\n  --lit-devtools-space-3: 6px;\n  --lit-devtools-space-4: 8px;\n  --lit-devtools-space-5: 12px;\n  --lit-devtools-space-6: 16px;\n  --lit-devtools-space-7: 20px;\n  --lit-devtools-space-8: 24px;\n  --lit-devtools-space-9: 32px;\n  --lit-devtools-space-10: 40px;\n  --lit-devtools-space-11: 48px;\n  --lit-devtools-space-12: 64px;\n  --lit-devtools-space-14: 80px;\n  --lit-devtools-space-16: 96px;\n\n  /* ---- Density ---- */\n  /* Tree and list rows: WCAG 2.5.8's 24px minimum target, since a row is\n     what gets clicked. */\n  --lit-devtools-row-height: 24px;\n\n  /* ---- Radius \u00B7 square corners; pills are the one round shape ---- */\n  --lit-devtools-radius-xs: 0;\n  --lit-devtools-radius-sm: 0;\n  --lit-devtools-radius-md: 0; /* default control / card */\n  --lit-devtools-radius-lg: 0; /* panels, active nav pill */\n  --lit-devtools-radius-xl: 0;\n  --lit-devtools-radius-2xl: 0; /* DevTools window shell */\n  --lit-devtools-radius-pill: 9999px; /* the one round shape: pills and dots */\n\n  --lit-devtools-border-width: 1px;\n  --lit-devtools-border-width-thick: 2px;\n\n  /* ---- Elevation (tuned for dark) ---- */\n  --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.3);\n  --lit-devtools-shadow-sm: 0 1px 5px hsl(0 0% 0% / 0.35);\n  --lit-devtools-shadow-md: 0 4px 14px hsl(0 0% 0% / 0.4);\n  --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.5);\n  --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n  --lit-devtools-shadow-window:\n    0 24px 80px hsl(0 0% 0% / 0.6), 0 0 0 1px hsl(0 0% 100% / 0.06);\n  --lit-devtools-ring: 0 0 0 2px var(--lit-devtools-accent-ring);\n\n  /* ---- Motion ---- */\n  --lit-devtools-ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --lit-devtools-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);\n  --lit-devtools-ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --lit-devtools-dur-instant: 80ms;\n  --lit-devtools-dur-fast: 140ms;\n  --lit-devtools-dur-normal: 220ms;\n  --lit-devtools-dur-slow: 360ms;\n\n  /* ---- Shared sizing: toolbar controls ---- */\n  --lit-devtools-control-height:  28px;\n";
/**
 * Options for {@link injectTokens} / {@link tokenStyleText}.
 */
export interface InjectTokensOptions {
    /**
     * Also declare `color-scheme` on `:root`. Only safe when the devtools OWN
     * the target document (the panel iframe / standalone panel page). Never set
     * this when injecting into the host page: `color-scheme` on the embedder's
     * `:root` makes the UA repaint the canvas dark for apps that don't declare
     * an opaque background. Defaults to `false`.
     */
    colorScheme?: boolean;
    /**
     * The selector that gets the tokens. Defaults to `:root`. Anything else
     * (say `.lit-devtools-root`) confines them to that element, for a page
     * that shows panel views among its own content. A scoped sheet follows
     * the page's scheme from `.color-scheme-*` classes or `data-theme` on
     * `:root`, or from a `.wa-dark` / `.wa-light` ancestor (the kitchen
     * sink's halves), falling back to `prefers-color-scheme`.
     */
    scope?: string;
    /**
     * Also set Web Awesome's tokens to the panel's density. Only where the
     * panel's controls are the `wa-*` on the page (the panel document) or
     * under a {@link scope}: the in-page UI must not touch an app's own WA.
     */
    webAwesome?: boolean;
}
/**
 * Builds the token stylesheet text injected by {@link injectTokens}.
 *
 * By default the sheet defines custom properties only — inert for the host
 * page. With `colorScheme: true` it additionally declares `color-scheme` so
 * the owning document's UA surfaces (canvas, form controls, scrollbars)
 * follow the devtools theme.
 */
export declare const tokenStyleText: ({ colorScheme, scope, webAwesome, }?: InjectTokensOptions) => string;
/**
 * Injects `:root { … }` (or the {@link InjectTokensOptions.scope}) into the
 * page `<head>`, once per scope.
 *
 * CSS custom properties defined on `:root` cascade through shadow DOM
 * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both
 * runtime elements (indicator, source-overlay) and Lit panel components.
 *
 * The injected stylesheet reacts to `prefers-color-scheme` and to
 * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.
 * It never sets `color-scheme` on the host page; the panel opts in via
 * {@link InjectTokensOptions.colorScheme} for its own document.
 */
export declare const injectTokens: (options?: InjectTokensOptions) => void;
//# sourceMappingURL=token-text.d.ts.map