@oddsquad/vite-plugin-lit 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/runtime/css.d.ts +0 -14
- package/lib/runtime/css.d.ts.map +1 -1
- package/lib/runtime/css.js +11 -4
- package/lib/runtime/css.js.map +1 -1
- package/lib/tokens.d.ts +26 -2
- package/lib/tokens.d.ts.map +1 -1
- package/lib/tokens.js +39 -22
- package/lib/tokens.js.map +1 -1
- package/package.json +1 -1
- package/panel/lit-devtools-panel.d.ts.map +1 -1
- package/panel/lit-devtools-panel.js +3 -1
- package/panel/lit-devtools-panel.js.map +1 -1
package/lib/runtime/css.d.ts
CHANGED
|
@@ -3,20 +3,6 @@
|
|
|
3
3
|
* Copyright 2026 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
/**
|
|
7
|
-
* Browser helpers for referencing CSS files from shadow roots via Vite's
|
|
8
|
-
* `?url` imports.
|
|
9
|
-
*
|
|
10
|
-
* A `?url` import yields a real stylesheet URL — the dev server serves the
|
|
11
|
-
* file as CSS, and `vite build` emits it as a hashed `.css` asset. That
|
|
12
|
-
* makes it the right base for `<link>` hrefs and `@import url()`s inside
|
|
13
|
-
* shadow roots. The one gap is dev HMR: the imported URL string is identical
|
|
14
|
-
* across module re-executions, so the browser would keep the stale
|
|
15
|
-
* stylesheet. These helpers close that gap.
|
|
16
|
-
*
|
|
17
|
-
* This module is dependency-free and must stay safe to load in any
|
|
18
|
-
* environment.
|
|
19
|
-
*/
|
|
20
6
|
/**
|
|
21
7
|
* Appends a cache-busting query to a `?url`-imported CSS file URL in dev.
|
|
22
8
|
*
|
package/lib/runtime/css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../packages/labs/vite-plugin-lit/src/lib/runtime/css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../packages/labs/vite-plugin-lit/src/lib/runtime/css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4BH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,MAE1C,CAAC;AAqBF;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB;;;;;;;;;OASG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG,QA2BtC,CAAC"}
|
package/lib/runtime/css.js
CHANGED
|
@@ -17,6 +17,15 @@
|
|
|
17
17
|
* This module is dependency-free and must stay safe to load in any
|
|
18
18
|
* environment.
|
|
19
19
|
*/
|
|
20
|
+
/**
|
|
21
|
+
* Vite's dev flag. Accessed as a direct member expression (`import.meta.env.DEV`)
|
|
22
|
+
* so the bundler can statically replace it per key. Aliasing the whole object
|
|
23
|
+
* (`const env = import.meta.env`) instead defeats that replacement and makes
|
|
24
|
+
* Vite inline the ENTIRE serialized `import.meta.env` — every env var — into the
|
|
25
|
+
* consumer bundle. Optional chaining keeps this safe where `import.meta.env` is
|
|
26
|
+
* absent (non-Vite runtimes).
|
|
27
|
+
*/
|
|
28
|
+
const isDev = () => import.meta.env?.DEV === true;
|
|
20
29
|
/**
|
|
21
30
|
* Appends a cache-busting query to a `?url`-imported CSS file URL in dev.
|
|
22
31
|
*
|
|
@@ -37,8 +46,7 @@
|
|
|
37
46
|
* ```
|
|
38
47
|
*/
|
|
39
48
|
export const devCacheBust = (url) => {
|
|
40
|
-
|
|
41
|
-
return env?.DEV ? `${url}?t=${Date.now()}` : url;
|
|
49
|
+
return isDev() ? `${url}?t=${Date.now()}` : url;
|
|
42
50
|
};
|
|
43
51
|
/**
|
|
44
52
|
* In dev, turns a `?url`-imported CSS path into one that fetches the
|
|
@@ -53,8 +61,7 @@ export const devCacheBust = (url) => {
|
|
|
53
61
|
* it carries `?t=…`).
|
|
54
62
|
*/
|
|
55
63
|
const devDirect = (url) => {
|
|
56
|
-
|
|
57
|
-
if (!env?.DEV) {
|
|
64
|
+
if (!isDev()) {
|
|
58
65
|
return url;
|
|
59
66
|
}
|
|
60
67
|
return `${url}${url.includes('?') ? '&' : '?'}direct`;
|
package/lib/runtime/css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../../packages/labs/vite-plugin-lit/src/lib/runtime/css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../../packages/labs/vite-plugin-lit/src/lib/runtime/css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH;;;;;;;GAOG;AACH,MAAM,KAAK,GAAG,GAAY,EAAE,CACzB,MAAM,CAAC,IAAgC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE;IAClD,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AAClD,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAG,CAAC,GAAW,EAAU,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;QACb,OAAO,GAAG,CAAC;IACb,CAAC;IACD,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC;AACxD,CAAC,CAAC;AAkCF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAY,EAAE;IAChD,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;IAClC,qEAAqE;IACrE,yEAAyE;IACzE,uEAAuE;IACvE,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,MAAM,MAAM,GAAG,CAAC,IAAY,EAAiB,EAAE;QAC7C,MAAM,KAAK,GAAG,EAAE,MAAM,CAAC;QACvB,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;aAC1B,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;aACrB,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;gBACrB,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,CAAC,GAAG,CAAC,CAAC;IACZ,OAAO;QACL,KAAK;QACL,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE;YACnB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC7B,MAAM,CAAC,IAAI,CAAC,CAAC;YACf,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Browser helpers for referencing CSS files from shadow roots via Vite's\n * `?url` imports.\n *\n * A `?url` import yields a real stylesheet URL — the dev server serves the\n * file as CSS, and `vite build` emits it as a hashed `.css` asset. That\n * makes it the right base for `<link>` hrefs and `@import url()`s inside\n * shadow roots. The one gap is dev HMR: the imported URL string is identical\n * across module re-executions, so the browser would keep the stale\n * stylesheet. These helpers close that gap.\n *\n * This module is dependency-free and must stay safe to load in any\n * environment.\n */\n\n/**\n * Vite's dev flag. Accessed as a direct member expression (`import.meta.env.DEV`)\n * so the bundler can statically replace it per key. Aliasing the whole object\n * (`const env = import.meta.env`) instead defeats that replacement and makes\n * Vite inline the ENTIRE serialized `import.meta.env` — every env var — into the\n * consumer bundle. Optional chaining keeps this safe where `import.meta.env` is\n * absent (non-Vite runtimes).\n */\nconst isDev = (): boolean =>\n (import.meta as {env?: {DEV?: boolean}}).env?.DEV === true;\n\n/**\n * Appends a cache-busting query to a `?url`-imported CSS file URL in dev.\n *\n * Call this at *module scope* (not in `render()`, where every render would\n * refetch): each HMR re-execution then yields a fresh href and the browser\n * refetches the changed stylesheet.\n *\n * In production builds the URL is a content-hashed asset, so the input is\n * returned unchanged.\n *\n * @example\n * ```ts\n * import cssUrl from './my-element.css?url';\n * import {devCacheBust} from '@lit-labs/vite-plugin-lit/css.js';\n *\n * const href = devCacheBust(cssUrl); // module scope\n * html`<link rel=\"stylesheet\" href=\"${href}\" />`;\n * ```\n */\nexport const devCacheBust = (url: string): string => {\n return isDev() ? `${url}?t=${Date.now()}` : url;\n};\n\n/**\n * In dev, turns a `?url`-imported CSS path into one that fetches the\n * *compiled CSS bytes* (`text/css`). Vite serves a `?url` CSS path as a JS\n * module (`__vite__updateStyle(…)`), so a plain `fetch().text()` returns\n * JavaScript; the `direct` query makes it return the stylesheet instead,\n * pipeline-processed the same way the build asset is. In production the URL\n * is already a real `.css` asset, so it's returned unchanged.\n *\n * Joined with `?` or `&` depending on whether the URL already carries a query\n * (a freshly started dev server yields a bare path; after an HMR cache-bust\n * it carries `?t=…`).\n */\nconst devDirect = (url: string): string => {\n if (!isDev()) {\n return url;\n }\n return `${url}${url.includes('?') ? '&' : '?'}direct`;\n};\n\n/**\n * A shared `CSSStyleSheet` backed by a `?url` CSS asset, plus the callback to\n * hot-swap it in place. Returned by {@link urlSheet}.\n */\nexport interface UrlSheet {\n /**\n * The constructed stylesheet. Adopt it from any number of components\n * (`static styles = [sheet]`); an edit to the source CSS re-fetches and\n * `replaceSync()`s it, updating every shadow root that adopted it without\n * re-rendering a component or reloading the page.\n *\n * It is empty until the first fetch resolves, so expect a brief flash of\n * unstyled content on initial load — the cost of keeping the CSS as a real\n * asset rather than inlining it into the JS bundle.\n */\n sheet: CSSStyleSheet;\n /**\n * Vite HMR accept callback for the `?url` dependency. Wire it up with the\n * *same literal specifier* you imported — Vite resolves accepted deps by\n * static analysis, so the string has to appear in your module:\n *\n * ```ts\n * import.meta.hot?.accept('./utils.css?url', onHotUpdate);\n * ```\n *\n * Typed to match Vite's accept callback (`ModuleNamespace | undefined`) so\n * it drops straight in; the new module's `default` export is the updated\n * `?url` string.\n */\n onHotUpdate: (mod: Record<string, unknown> | undefined) => void;\n}\n\n/**\n * Builds a {@link UrlSheet} from a `?url`-imported CSS asset: a single\n * constructed `CSSStyleSheet`, shareable across shadow roots via\n * `adoptedStyleSheets`, that hot-swaps in place on edits — no component\n * re-render, no full-page reload.\n *\n * `?url` keeps the stylesheet as a standalone, pipeline-processed `.css` file\n * in the build output (unlike `?inline`/`?raw`, which inline it into the JS\n * chunk). The file is read into the sheet at runtime via `fetch()`, with the\n * dev/build path difference handled internally.\n *\n * @example\n * ```ts\n * import {urlSheet} from '@lit-labs/vite-plugin-lit/css.js';\n * import sheetUrl from './utils.css?url';\n *\n * const {sheet, onHotUpdate} = urlSheet(sheetUrl);\n * export default sheet; // `static styles = [sheet]` in components\n *\n * import.meta.hot?.accept('./utils.css?url', onHotUpdate);\n * ```\n */\nexport const urlSheet = (url: string): UrlSheet => {\n const sheet = new CSSStyleSheet();\n // Guards against out-of-order fetch resolution: two rapid edits fire\n // overlapping fetches, and a slower earlier one must not land after (and\n // clobber) a newer one. Only the most recently issued request applies.\n let latest = 0;\n const update = (next: string): Promise<void> => {\n const token = ++latest;\n return fetch(devDirect(next))\n .then((r) => r.text())\n .then((css) => {\n if (token === latest) {\n sheet.replaceSync(css);\n }\n })\n .catch(() => {});\n };\n update(url);\n return {\n sheet,\n onHotUpdate: (mod) => {\n const next = mod?.['default'];\n if (typeof next === 'string') {\n update(next);\n }\n },\n };\n};\n"]}
|
package/lib/tokens.d.ts
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* {@link injectTokens}. Prefer importing `tokens` for Lit components so the
|
|
9
9
|
* semantic aliases are inherited from `:root`.
|
|
10
10
|
*/
|
|
11
|
-
export declare const tokenCSS = "\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-dark-cyan: #00e8ff;\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: system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lit-devtools-font-mono: 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\n --lit-devtools-leading-tight: 1.15;\n --lit-devtools-leading-snug: 1.3;\n --lit-devtools-leading-normal: 1.5;\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) ---- */\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\n /* ---- Radius ---- */\n --lit-devtools-radius-xs: 3px;\n --lit-devtools-radius-sm: 5px;\n --lit-devtools-radius-md: 8px;\n --lit-devtools-radius-lg: 12px;\n --lit-devtools-radius-xl: 16px;\n --lit-devtools-radius-pill: 999px;\n\n /* ---- Elevation ---- */\n --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\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.40);\n --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n 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-dur-fast: 140ms;\n --lit-devtools-dur-normal: 220ms;\n\n\n /* ---- DARK \u00B7 DevTools theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue-bright);\n --lit-devtools-accent-hover: #6478ff;\n --lit-devtools-accent-pressed: #3d54f0;\n --lit-devtools-accent-soft: hsla(232 100% 65% / 0.16);\n --lit-devtools-accent-ring: hsla(232 100% 65% / 0.45);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: var(--lit-devtools-ink-0);\n --lit-devtools-surface: var(--lit-devtools-ink-2);\n --lit-devtools-surface-low: var(--lit-devtools-ink-1);\n --lit-devtools-surface-container: var(--lit-devtools-ink-4);\n --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n --lit-devtools-surface-elevated: var(--lit-devtools-ink-6);\n --lit-devtools-surface-hover: hsl(0 0% 100% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 100% / 0.07);\n\n --lit-devtools-text: var(--lit-devtools-ink-12);\n --lit-devtools-text-strong: var(--lit-devtools-ink-13);\n --lit-devtools-text-secondary: var(--lit-devtools-ink-10);\n --lit-devtools-text-muted: var(--lit-devtools-ink-8);\n --lit-devtools-text-link: var(--lit-devtools-lit-blue-bright);\n\n --lit-devtools-border: var(--lit-devtools-ink-6);\n --lit-devtools-border-strong: var(--lit-devtools-ink-7);\n --lit-devtools-border-subtle: hsl(0 0% 100% / 0.06);\n\n --lit-devtools-success: hsl(158 74% 53%);\n --lit-devtools-success-soft: hsl(158 74% 53% / 0.15);\n --lit-devtools-warning: #f4bf4f;\n --lit-devtools-warning-soft: hsl(43 88% 63% / 0.15);\n --lit-devtools-error: #ff6b6b;\n --lit-devtools-error-soft: hsl(0 100% 71% / 0.15);\n --lit-devtools-info: var(--lit-devtools-lit-dark-cyan);\n --lit-devtools-info-soft: hsl(187 100% 47% / 0.15);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n
|
|
11
|
+
export declare const tokenCSS = "\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-dark-cyan: #00e8ff;\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: system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lit-devtools-font-mono: 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\n --lit-devtools-leading-tight: 1.15;\n --lit-devtools-leading-snug: 1.3;\n --lit-devtools-leading-normal: 1.5;\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) ---- */\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\n /* ---- Radius ---- */\n --lit-devtools-radius-xs: 3px;\n --lit-devtools-radius-sm: 5px;\n --lit-devtools-radius-md: 8px;\n --lit-devtools-radius-lg: 12px;\n --lit-devtools-radius-xl: 16px;\n --lit-devtools-radius-pill: 999px;\n\n /* ---- Elevation ---- */\n --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\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.40);\n --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n 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-dur-fast: 140ms;\n --lit-devtools-dur-normal: 220ms;\n\n\n /* ---- DARK \u00B7 DevTools theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue-bright);\n --lit-devtools-accent-hover: #6478ff;\n --lit-devtools-accent-pressed: #3d54f0;\n --lit-devtools-accent-soft: hsla(232 100% 65% / 0.16);\n --lit-devtools-accent-ring: hsla(232 100% 65% / 0.45);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: var(--lit-devtools-ink-0);\n --lit-devtools-surface: var(--lit-devtools-ink-2);\n --lit-devtools-surface-low: var(--lit-devtools-ink-1);\n --lit-devtools-surface-container: var(--lit-devtools-ink-4);\n --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n --lit-devtools-surface-elevated: var(--lit-devtools-ink-6);\n --lit-devtools-surface-hover: hsl(0 0% 100% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 100% / 0.07);\n\n --lit-devtools-text: var(--lit-devtools-ink-12);\n --lit-devtools-text-strong: var(--lit-devtools-ink-13);\n --lit-devtools-text-secondary: var(--lit-devtools-ink-10);\n --lit-devtools-text-muted: var(--lit-devtools-ink-8);\n --lit-devtools-text-link: var(--lit-devtools-lit-blue-bright);\n\n --lit-devtools-border: var(--lit-devtools-ink-6);\n --lit-devtools-border-strong: var(--lit-devtools-ink-7);\n --lit-devtools-border-subtle: hsl(0 0% 100% / 0.06);\n\n --lit-devtools-success: hsl(158 74% 53%);\n --lit-devtools-success-soft: hsl(158 74% 53% / 0.15);\n --lit-devtools-warning: #f4bf4f;\n --lit-devtools-warning-soft: hsl(43 88% 63% / 0.15);\n --lit-devtools-error: #ff6b6b;\n --lit-devtools-error-soft: hsl(0 100% 71% / 0.15);\n --lit-devtools-info: var(--lit-devtools-lit-dark-cyan);\n --lit-devtools-info-soft: hsl(187 100% 47% / 0.15);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n";
|
|
12
12
|
/**
|
|
13
13
|
* Lit `css` template for use in panel component shadow roots.
|
|
14
14
|
*
|
|
@@ -24,6 +24,28 @@ export declare const tokenCSS = "\n /* ---- Brand \u00B7 the Lit flame ---- */\
|
|
|
24
24
|
* \`lit-devtools-panel.ts\` so all components inherit the same dark/light theme.
|
|
25
25
|
*/
|
|
26
26
|
export declare const tokens: import("lit").CSSResult;
|
|
27
|
+
/**
|
|
28
|
+
* Options for {@link injectTokens} / {@link tokenStyleText}.
|
|
29
|
+
*/
|
|
30
|
+
export interface InjectTokensOptions {
|
|
31
|
+
/**
|
|
32
|
+
* Also declare `color-scheme` on `:root`. Only safe when the devtools OWN
|
|
33
|
+
* the target document (the panel iframe / standalone panel page). Never set
|
|
34
|
+
* this when injecting into the host page: `color-scheme` on the embedder's
|
|
35
|
+
* `:root` makes the UA repaint the canvas dark for apps that don't declare
|
|
36
|
+
* an opaque background. Defaults to `false`.
|
|
37
|
+
*/
|
|
38
|
+
colorScheme?: boolean;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Builds the token stylesheet text injected by {@link injectTokens}.
|
|
42
|
+
*
|
|
43
|
+
* By default the sheet defines custom properties only — inert for the host
|
|
44
|
+
* page. With `colorScheme: true` it additionally declares `color-scheme` so
|
|
45
|
+
* the owning document's UA surfaces (canvas, form controls, scrollbars)
|
|
46
|
+
* follow the devtools theme.
|
|
47
|
+
*/
|
|
48
|
+
export declare const tokenStyleText: ({ colorScheme, }?: InjectTokensOptions) => string;
|
|
27
49
|
/**
|
|
28
50
|
* Injects `:root { … }` into the page `<head>` once.
|
|
29
51
|
*
|
|
@@ -33,6 +55,8 @@ export declare const tokens: import("lit").CSSResult;
|
|
|
33
55
|
*
|
|
34
56
|
* The injected stylesheet reacts to `prefers-color-scheme` and to
|
|
35
57
|
* `.color-scheme-light` / `.color-scheme-dark` classes on the document root.
|
|
58
|
+
* It never sets `color-scheme` on the host page; the panel opts in via
|
|
59
|
+
* {@link InjectTokensOptions.colorScheme} for its own document.
|
|
36
60
|
*/
|
|
37
|
-
export declare const injectTokens: () => void;
|
|
61
|
+
export declare const injectTokens: (options?: InjectTokensOptions) => void;
|
|
38
62
|
//# sourceMappingURL=tokens.d.ts.map
|
package/lib/tokens.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA2MH;;;;GAIG;AACH,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA2MH;;;;GAIG;AACH,eAAO,MAAM,QAAQ,stKAAqC,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,yBAIlB,CAAC;AAIF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,mBAE5B,mBAAwB,KAAG,MAwB7B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,mBAAmB,KAAG,IAO5D,CAAC"}
|
package/lib/tokens.js
CHANGED
|
@@ -153,9 +153,8 @@ const darkThemeCSS = `
|
|
|
153
153
|
|
|
154
154
|
--lit-devtools-selection-bg: var(--lit-devtools-accent);
|
|
155
155
|
--lit-devtools-on-selection: #ffffff;
|
|
156
|
-
|
|
157
|
-
color-scheme: dark;
|
|
158
156
|
`;
|
|
157
|
+
const darkSchemeCSS = `color-scheme: dark;`;
|
|
159
158
|
const lightThemeCSS = `
|
|
160
159
|
/* ---- LIGHT · lit.dev website theme ---- */
|
|
161
160
|
--lit-devtools-accent: var(--lit-devtools-lit-blue);
|
|
@@ -196,9 +195,8 @@ const lightThemeCSS = `
|
|
|
196
195
|
|
|
197
196
|
--lit-devtools-selection-bg: var(--lit-devtools-accent);
|
|
198
197
|
--lit-devtools-on-selection: #ffffff;
|
|
199
|
-
|
|
200
|
-
color-scheme: light;
|
|
201
198
|
`;
|
|
199
|
+
const lightSchemeCSS = `color-scheme: light;`;
|
|
202
200
|
/**
|
|
203
201
|
* Default dark theme tokens as a flat string, primarily for use by
|
|
204
202
|
* {@link injectTokens}. Prefer importing `tokens` for Lit components so the
|
|
@@ -226,38 +224,57 @@ export const tokens = css `
|
|
|
226
224
|
`;
|
|
227
225
|
let _injected = false;
|
|
228
226
|
/**
|
|
229
|
-
*
|
|
230
|
-
*
|
|
231
|
-
* CSS custom properties defined on `:root` cascade through shadow DOM
|
|
232
|
-
* boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both
|
|
233
|
-
* runtime elements (indicator, source-overlay) and Lit panel components.
|
|
227
|
+
* Builds the token stylesheet text injected by {@link injectTokens}.
|
|
234
228
|
*
|
|
235
|
-
*
|
|
236
|
-
*
|
|
229
|
+
* By default the sheet defines custom properties only — inert for the host
|
|
230
|
+
* page. With `colorScheme: true` it additionally declares `color-scheme` so
|
|
231
|
+
* the owning document's UA surfaces (canvas, form controls, scrollbars)
|
|
232
|
+
* follow the devtools theme.
|
|
237
233
|
*/
|
|
238
|
-
export const
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
-
|
|
234
|
+
export const tokenStyleText = ({ colorScheme = false, } = {}) => {
|
|
235
|
+
const dark = colorScheme
|
|
236
|
+
? `${darkThemeCSS}\n ${darkSchemeCSS}`
|
|
237
|
+
: darkThemeCSS;
|
|
238
|
+
const light = colorScheme
|
|
239
|
+
? `${lightThemeCSS}\n ${lightSchemeCSS}`
|
|
240
|
+
: lightThemeCSS;
|
|
241
|
+
return `
|
|
245
242
|
:root {
|
|
246
243
|
${baseTokenCSS}
|
|
247
|
-
${
|
|
244
|
+
${dark}
|
|
248
245
|
}
|
|
249
246
|
@media (prefers-color-scheme: light) {
|
|
250
247
|
:root {
|
|
251
|
-
${
|
|
248
|
+
${light}
|
|
252
249
|
}
|
|
253
250
|
}
|
|
254
251
|
:root.color-scheme-light {
|
|
255
|
-
${
|
|
252
|
+
${light}
|
|
256
253
|
}
|
|
257
254
|
:root.color-scheme-dark {
|
|
258
|
-
${
|
|
255
|
+
${dark}
|
|
259
256
|
}
|
|
260
257
|
`;
|
|
258
|
+
};
|
|
259
|
+
/**
|
|
260
|
+
* Injects `:root { … }` into the page `<head>` once.
|
|
261
|
+
*
|
|
262
|
+
* CSS custom properties defined on `:root` cascade through shadow DOM
|
|
263
|
+
* boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both
|
|
264
|
+
* runtime elements (indicator, source-overlay) and Lit panel components.
|
|
265
|
+
*
|
|
266
|
+
* The injected stylesheet reacts to `prefers-color-scheme` and to
|
|
267
|
+
* `.color-scheme-light` / `.color-scheme-dark` classes on the document root.
|
|
268
|
+
* It never sets `color-scheme` on the host page; the panel opts in via
|
|
269
|
+
* {@link InjectTokensOptions.colorScheme} for its own document.
|
|
270
|
+
*/
|
|
271
|
+
export const injectTokens = (options) => {
|
|
272
|
+
if (_injected)
|
|
273
|
+
return;
|
|
274
|
+
_injected = true;
|
|
275
|
+
const style = document.createElement('style');
|
|
276
|
+
style.setAttribute('data-lit-devtools-tokens', '');
|
|
277
|
+
style.textContent = tokenStyleText(options);
|
|
261
278
|
document.head.prepend(style);
|
|
262
279
|
};
|
|
263
280
|
//# sourceMappingURL=tokens.js.map
|
package/lib/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFpB,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CpB,CAAC;AAEF,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CrB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,KAAK,YAAY,EAAE,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;MAEnB,SAAS,CAAC,YAAY,CAAC;;CAE5B,CAAC;AAEF,IAAI,SAAS,GAAG,KAAK,CAAC;AAEtB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAS,EAAE;IACrC,IAAI,SAAS;QAAE,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACnD,KAAK,CAAC,WAAW,GAAG;;QAEd,YAAY;QACZ,YAAY;;;;UAIV,aAAa;;;;QAIf,aAAa;;;QAGb,YAAY;;GAEjB,CAAC;IACF,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {css, unsafeCSS} from 'lit';\n\n/**\n * Design token CSS custom properties for the Lit DevTools.\n *\n * Two entry points:\n * - **`tokens`** — Lit `css` template that defines the theme-agnostic base\n * tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,\n * etc.) are inherited from `:root`, where {@link injectTokens} installs them.\n * Use as `static styles = [tokens, css`…`]`.\n * - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.\n * This makes semantic aliases available to every devtools surface, both\n * runtime elements (indicator, source-overlay) that build their shadow DOM\n * via `innerHTML` and Lit panel components that inherit from `:root`.\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on `:root`.\n *\n * Sourced from the lit-design skill (`tokens/colors.css`). Defaults to the\n * dark DevTools theme; the light lit.dev website palette is applied when the\n * OS/browser requests a light color scheme or when `:root` has the matching\n * theme class.\n *\n * Fonts are system stacks (no webfonts). For the branded Manrope + Roboto Mono\n * see the lit-design skill's `fonts/` directory.\n */\n\nconst baseTokenCSS = `\n /* ---- Brand · 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-dark-cyan: #00e8ff;\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: system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lit-devtools-font-mono: 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\n --lit-devtools-leading-tight: 1.15;\n --lit-devtools-leading-snug: 1.3;\n --lit-devtools-leading-normal: 1.5;\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) ---- */\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\n /* ---- Radius ---- */\n --lit-devtools-radius-xs: 3px;\n --lit-devtools-radius-sm: 5px;\n --lit-devtools-radius-md: 8px;\n --lit-devtools-radius-lg: 12px;\n --lit-devtools-radius-xl: 16px;\n --lit-devtools-radius-pill: 999px;\n\n /* ---- Elevation ---- */\n --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\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.40);\n --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n 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-dur-fast: 140ms;\n --lit-devtools-dur-normal: 220ms;\n`;\n\nconst darkThemeCSS = `\n /* ---- DARK · DevTools theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue-bright);\n --lit-devtools-accent-hover: #6478ff;\n --lit-devtools-accent-pressed: #3d54f0;\n --lit-devtools-accent-soft: hsla(232 100% 65% / 0.16);\n --lit-devtools-accent-ring: hsla(232 100% 65% / 0.45);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: var(--lit-devtools-ink-0);\n --lit-devtools-surface: var(--lit-devtools-ink-2);\n --lit-devtools-surface-low: var(--lit-devtools-ink-1);\n --lit-devtools-surface-container: var(--lit-devtools-ink-4);\n --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n --lit-devtools-surface-elevated: var(--lit-devtools-ink-6);\n --lit-devtools-surface-hover: hsl(0 0% 100% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 100% / 0.07);\n\n --lit-devtools-text: var(--lit-devtools-ink-12);\n --lit-devtools-text-strong: var(--lit-devtools-ink-13);\n --lit-devtools-text-secondary: var(--lit-devtools-ink-10);\n --lit-devtools-text-muted: var(--lit-devtools-ink-8);\n --lit-devtools-text-link: var(--lit-devtools-lit-blue-bright);\n\n --lit-devtools-border: var(--lit-devtools-ink-6);\n --lit-devtools-border-strong: var(--lit-devtools-ink-7);\n --lit-devtools-border-subtle: hsl(0 0% 100% / 0.06);\n\n --lit-devtools-success: hsl(158 74% 53%);\n --lit-devtools-success-soft: hsl(158 74% 53% / 0.15);\n --lit-devtools-warning: #f4bf4f;\n --lit-devtools-warning-soft: hsl(43 88% 63% / 0.15);\n --lit-devtools-error: #ff6b6b;\n --lit-devtools-error-soft: hsl(0 100% 71% / 0.15);\n --lit-devtools-info: var(--lit-devtools-lit-dark-cyan);\n --lit-devtools-info-soft: hsl(187 100% 47% / 0.15);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n\n color-scheme: dark;\n`;\n\nconst lightThemeCSS = `\n /* ---- LIGHT · lit.dev website theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue);\n --lit-devtools-accent-hover: #1f3bff;\n --lit-devtools-accent-pressed: #2a2c9d;\n --lit-devtools-accent-soft: hsla(232 100% 60% / 0.12);\n --lit-devtools-accent-ring: hsla(232 100% 60% / 0.40);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: #f4f4f4;\n --lit-devtools-surface: #ffffff;\n --lit-devtools-surface-low: #f3f3f3;\n --lit-devtools-surface-container: #ffffff;\n --lit-devtools-surface-container-high: #e8e8e8;\n --lit-devtools-surface-elevated: #ffffff;\n --lit-devtools-surface-hover: hsl(0 0% 0% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 0% / 0.07);\n\n --lit-devtools-text: #242424;\n --lit-devtools-text-strong: #000000;\n --lit-devtools-text-secondary: #6e6e6e;\n --lit-devtools-text-muted: #949494;\n --lit-devtools-text-link: #005dc7;\n\n --lit-devtools-border: #e2e2e2;\n --lit-devtools-border-strong: #c6c6c6;\n --lit-devtools-border-subtle: hsl(0 0% 0% / 0.07);\n\n --lit-devtools-success: #00865b;\n --lit-devtools-success-soft: hsl(158 100% 26% / 0.10);\n --lit-devtools-warning: #b26a00;\n --lit-devtools-warning-soft: hsl(40 100% 35% / 0.10);\n --lit-devtools-error: #ba1a1a;\n --lit-devtools-error-soft: hsl(0 75% 42% / 0.10);\n --lit-devtools-info: #005dc7;\n --lit-devtools-info-soft: hsl(210 100% 39% / 0.10);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n\n color-scheme: light;\n`;\n\n/**\n * Default dark theme tokens as a flat string, primarily for use by\n * {@link injectTokens}. Prefer importing `tokens` for Lit components so the\n * semantic aliases are inherited from `:root`.\n */\nexport const tokenCSS = `${baseTokenCSS}\\n${darkThemeCSS}`;\n\n/**\n * Lit `css` template for use in panel component shadow roots.\n *\n * ```ts\n * import {tokens} from '../lib/tokens.js';\n * // ...\n * static override styles = [tokens, css`…`];\n * ```\n *\n * This installs the theme-agnostic base tokens on `:host`. Semantic aliases\n * (`--lit-devtools-bg`, `--lit-devtools-text`, etc.) are inherited from `:root`, where they are installed\n * by {@link injectTokens}. The panel iframe calls `injectTokens()` from\n * \\`lit-devtools-panel.ts\\` so all components inherit the same dark/light theme.\n */\nexport const tokens = css`\n :host {\n ${unsafeCSS(baseTokenCSS)}\n }\n`;\n\nlet _injected = false;\n\n/**\n * Injects `:root { … }` into the page `<head>` once.\n *\n * CSS custom properties defined on `:root` cascade through shadow DOM\n * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both\n * runtime elements (indicator, source-overlay) and Lit panel components.\n *\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.\n */\nexport const injectTokens = (): void => {\n if (_injected) return;\n _injected = true;\n const style = document.createElement('style');\n style.setAttribute('data-lit-devtools-tokens', '');\n style.textContent = `\n :root {\n ${baseTokenCSS}\n ${darkThemeCSS}\n }\n @media (prefers-color-scheme: light) {\n :root {\n ${lightThemeCSS}\n }\n }\n :root.color-scheme-light {\n ${lightThemeCSS}\n }\n :root.color-scheme-dark {\n ${darkThemeCSS}\n }\n `;\n document.head.prepend(style);\n};\n"]}
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFpB,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpB,CAAC;AAEF,MAAM,aAAa,GAAG,qBAAqB,CAAC;AAE5C,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAC;AAEF,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,KAAK,YAAY,EAAE,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;MAEnB,SAAS,CAAC,YAAY,CAAC;;CAE5B,CAAC;AAEF,IAAI,SAAS,GAAG,KAAK,CAAC;AAgBtB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,GAAG,KAAK,MACI,EAAE,EAAU,EAAE;IACrC,MAAM,IAAI,GAAG,WAAW;QACtB,CAAC,CAAC,GAAG,YAAY,OAAO,aAAa,EAAE;QACvC,CAAC,CAAC,YAAY,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW;QACvB,CAAC,CAAC,GAAG,aAAa,OAAO,cAAc,EAAE;QACzC,CAAC,CAAC,aAAa,CAAC;IAClB,OAAO;;QAED,YAAY;QACZ,IAAI;;;;UAIF,KAAK;;;;QAIP,KAAK;;;QAGL,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAA6B,EAAQ,EAAE;IAClE,IAAI,SAAS;QAAE,OAAO;IACtB,SAAS,GAAG,IAAI,CAAC;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;IACnD,KAAK,CAAC,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {css, unsafeCSS} from 'lit';\n\n/**\n * Design token CSS custom properties for the Lit DevTools.\n *\n * Two entry points:\n * - **`tokens`** — Lit `css` template that defines the theme-agnostic base\n * tokens on `:host`. Semantic color aliases (`--lit-devtools-bg`, `--lit-devtools-surface`, `--lit-devtools-text`,\n * etc.) are inherited from `:root`, where {@link injectTokens} installs them.\n * Use as `static styles = [tokens, css`…`]`.\n * - **`injectTokens()`** — injects `:root { … }` into the page `<head>` once.\n * This makes semantic aliases available to every devtools surface, both\n * runtime elements (indicator, source-overlay) that build their shadow DOM\n * via `innerHTML` and Lit panel components that inherit from `:root`.\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on `:root`.\n *\n * Sourced from the lit-design skill (`tokens/colors.css`). Defaults to the\n * dark DevTools theme; the light lit.dev website palette is applied when the\n * OS/browser requests a light color scheme or when `:root` has the matching\n * theme class.\n *\n * Fonts are system stacks (no webfonts). For the branded Manrope + Roboto Mono\n * see the lit-design skill's `fonts/` directory.\n */\n\nconst baseTokenCSS = `\n /* ---- Brand · 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-dark-cyan: #00e8ff;\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: system-ui, -apple-system, 'Segoe UI', sans-serif;\n --lit-devtools-font-mono: 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\n --lit-devtools-leading-tight: 1.15;\n --lit-devtools-leading-snug: 1.3;\n --lit-devtools-leading-normal: 1.5;\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) ---- */\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\n /* ---- Radius ---- */\n --lit-devtools-radius-xs: 3px;\n --lit-devtools-radius-sm: 5px;\n --lit-devtools-radius-md: 8px;\n --lit-devtools-radius-lg: 12px;\n --lit-devtools-radius-xl: 16px;\n --lit-devtools-radius-pill: 999px;\n\n /* ---- Elevation ---- */\n --lit-devtools-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);\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.40);\n --lit-devtools-shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.50);\n --lit-devtools-shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);\n --lit-devtools-shadow-window: 0 24px 80px hsl(0 0% 0% / 0.6),\n 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-dur-fast: 140ms;\n --lit-devtools-dur-normal: 220ms;\n`;\n\nconst darkThemeCSS = `\n /* ---- DARK · DevTools theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue-bright);\n --lit-devtools-accent-hover: #6478ff;\n --lit-devtools-accent-pressed: #3d54f0;\n --lit-devtools-accent-soft: hsla(232 100% 65% / 0.16);\n --lit-devtools-accent-ring: hsla(232 100% 65% / 0.45);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: var(--lit-devtools-ink-0);\n --lit-devtools-surface: var(--lit-devtools-ink-2);\n --lit-devtools-surface-low: var(--lit-devtools-ink-1);\n --lit-devtools-surface-container: var(--lit-devtools-ink-4);\n --lit-devtools-surface-container-high: var(--lit-devtools-ink-5);\n --lit-devtools-surface-elevated: var(--lit-devtools-ink-6);\n --lit-devtools-surface-hover: hsl(0 0% 100% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 100% / 0.07);\n\n --lit-devtools-text: var(--lit-devtools-ink-12);\n --lit-devtools-text-strong: var(--lit-devtools-ink-13);\n --lit-devtools-text-secondary: var(--lit-devtools-ink-10);\n --lit-devtools-text-muted: var(--lit-devtools-ink-8);\n --lit-devtools-text-link: var(--lit-devtools-lit-blue-bright);\n\n --lit-devtools-border: var(--lit-devtools-ink-6);\n --lit-devtools-border-strong: var(--lit-devtools-ink-7);\n --lit-devtools-border-subtle: hsl(0 0% 100% / 0.06);\n\n --lit-devtools-success: hsl(158 74% 53%);\n --lit-devtools-success-soft: hsl(158 74% 53% / 0.15);\n --lit-devtools-warning: #f4bf4f;\n --lit-devtools-warning-soft: hsl(43 88% 63% / 0.15);\n --lit-devtools-error: #ff6b6b;\n --lit-devtools-error-soft: hsl(0 100% 71% / 0.15);\n --lit-devtools-info: var(--lit-devtools-lit-dark-cyan);\n --lit-devtools-info-soft: hsl(187 100% 47% / 0.15);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n`;\n\nconst darkSchemeCSS = `color-scheme: dark;`;\n\nconst lightThemeCSS = `\n /* ---- LIGHT · lit.dev website theme ---- */\n --lit-devtools-accent: var(--lit-devtools-lit-blue);\n --lit-devtools-accent-hover: #1f3bff;\n --lit-devtools-accent-pressed: #2a2c9d;\n --lit-devtools-accent-soft: hsla(232 100% 60% / 0.12);\n --lit-devtools-accent-ring: hsla(232 100% 60% / 0.40);\n --lit-devtools-on-accent: #ffffff;\n --lit-devtools-accent-cyan: var(--lit-devtools-lit-dark-cyan);\n\n --lit-devtools-bg: #f4f4f4;\n --lit-devtools-surface: #ffffff;\n --lit-devtools-surface-low: #f3f3f3;\n --lit-devtools-surface-container: #ffffff;\n --lit-devtools-surface-container-high: #e8e8e8;\n --lit-devtools-surface-elevated: #ffffff;\n --lit-devtools-surface-hover: hsl(0 0% 0% / 0.04);\n --lit-devtools-surface-active: hsl(0 0% 0% / 0.07);\n\n --lit-devtools-text: #242424;\n --lit-devtools-text-strong: #000000;\n --lit-devtools-text-secondary: #6e6e6e;\n --lit-devtools-text-muted: #949494;\n --lit-devtools-text-link: #005dc7;\n\n --lit-devtools-border: #e2e2e2;\n --lit-devtools-border-strong: #c6c6c6;\n --lit-devtools-border-subtle: hsl(0 0% 0% / 0.07);\n\n --lit-devtools-success: #00865b;\n --lit-devtools-success-soft: hsl(158 100% 26% / 0.10);\n --lit-devtools-warning: #b26a00;\n --lit-devtools-warning-soft: hsl(40 100% 35% / 0.10);\n --lit-devtools-error: #ba1a1a;\n --lit-devtools-error-soft: hsl(0 75% 42% / 0.10);\n --lit-devtools-info: #005dc7;\n --lit-devtools-info-soft: hsl(210 100% 39% / 0.10);\n\n --lit-devtools-selection-bg: var(--lit-devtools-accent);\n --lit-devtools-on-selection: #ffffff;\n`;\n\nconst lightSchemeCSS = `color-scheme: light;`;\n\n/**\n * Default dark theme tokens as a flat string, primarily for use by\n * {@link injectTokens}. Prefer importing `tokens` for Lit components so the\n * semantic aliases are inherited from `:root`.\n */\nexport const tokenCSS = `${baseTokenCSS}\\n${darkThemeCSS}`;\n\n/**\n * Lit `css` template for use in panel component shadow roots.\n *\n * ```ts\n * import {tokens} from '../lib/tokens.js';\n * // ...\n * static override styles = [tokens, css`…`];\n * ```\n *\n * This installs the theme-agnostic base tokens on `:host`. Semantic aliases\n * (`--lit-devtools-bg`, `--lit-devtools-text`, etc.) are inherited from `:root`, where they are installed\n * by {@link injectTokens}. The panel iframe calls `injectTokens()` from\n * \\`lit-devtools-panel.ts\\` so all components inherit the same dark/light theme.\n */\nexport const tokens = css`\n :host {\n ${unsafeCSS(baseTokenCSS)}\n }\n`;\n\nlet _injected = false;\n\n/**\n * Options for {@link injectTokens} / {@link tokenStyleText}.\n */\nexport interface InjectTokensOptions {\n /**\n * Also declare `color-scheme` on `:root`. Only safe when the devtools OWN\n * the target document (the panel iframe / standalone panel page). Never set\n * this when injecting into the host page: `color-scheme` on the embedder's\n * `:root` makes the UA repaint the canvas dark for apps that don't declare\n * an opaque background. Defaults to `false`.\n */\n colorScheme?: boolean;\n}\n\n/**\n * Builds the token stylesheet text injected by {@link injectTokens}.\n *\n * By default the sheet defines custom properties only — inert for the host\n * page. With `colorScheme: true` it additionally declares `color-scheme` so\n * the owning document's UA surfaces (canvas, form controls, scrollbars)\n * follow the devtools theme.\n */\nexport const tokenStyleText = ({\n colorScheme = false,\n}: InjectTokensOptions = {}): string => {\n const dark = colorScheme\n ? `${darkThemeCSS}\\n ${darkSchemeCSS}`\n : darkThemeCSS;\n const light = colorScheme\n ? `${lightThemeCSS}\\n ${lightSchemeCSS}`\n : lightThemeCSS;\n return `\n :root {\n ${baseTokenCSS}\n ${dark}\n }\n @media (prefers-color-scheme: light) {\n :root {\n ${light}\n }\n }\n :root.color-scheme-light {\n ${light}\n }\n :root.color-scheme-dark {\n ${dark}\n }\n `;\n};\n\n/**\n * Injects `:root { … }` into the page `<head>` once.\n *\n * CSS custom properties defined on `:root` cascade through shadow DOM\n * boundaries, so this makes every `var(--lit-devtools-accent)` etc. resolve inside both\n * runtime elements (indicator, source-overlay) and Lit panel components.\n *\n * The injected stylesheet reacts to `prefers-color-scheme` and to\n * `.color-scheme-light` / `.color-scheme-dark` classes on the document root.\n * It never sets `color-scheme` on the host page; the panel opts in via\n * {@link InjectTokensOptions.colorScheme} for its own document.\n */\nexport const injectTokens = (options?: InjectTokensOptions): void => {\n if (_injected) return;\n _injected = true;\n const style = document.createElement('style');\n style.setAttribute('data-lit-devtools-tokens', '');\n style.textContent = tokenStyleText(options);\n document.head.prepend(style);\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oddsquad/vite-plugin-lit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Vite plugin providing true HMR for Lit components, plus CSS helpers and a DevTools panel",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"author": "Oddsquad (based on @lit-labs/vite-hmr by Google LLC)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lit-devtools-panel.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAOnD,OAAO,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"lit-devtools-panel.d.ts","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAOnD,OAAO,oBAAoB,CAAC;AAW5B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAqClC;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA2CpB;IAEO,OAAO,CAAC,IAAI,CAAgB;IAEX,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEnE,OAAO,CAAC,YAAY;IAIpB,yEAAyE;IACzE,OAAO,CAAC,iBAAiB;IAMzB;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IA4BnB,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
|
|
@@ -16,7 +16,9 @@ import { applyColorScheme, readColorSchemePreference, } from '../lib/color-schem
|
|
|
16
16
|
import './timeline-view.js';
|
|
17
17
|
// Install the shared design tokens on the panel iframe's :root before the
|
|
18
18
|
// views render. Panel components inherit the semantic aliases from :root.
|
|
19
|
-
|
|
19
|
+
// The panel owns this document, so it also declares `color-scheme` (host-page
|
|
20
|
+
// injections must not — see `injectTokens`).
|
|
21
|
+
injectTokens({ colorScheme: true });
|
|
20
22
|
// Own the color-scheme class once the panel module is live: re-assert the
|
|
21
23
|
// saved preference (the Settings tab mounts lazily, so it can't). `auto` needs
|
|
22
24
|
// no JS — the tokens' `prefers-color-scheme` @media rule resolves it live.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lit-devtools-panel.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAE5B,0EAA0E;AAC1E,0EAA0E;AAC1E,YAAY,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"lit-devtools-panel.js","sourceRoot":"","sources":["../../../packages/labs/vite-plugin-lit/src/panel/lit-devtools-panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAE5B,0EAA0E;AAC1E,0EAA0E;AAC1E,8EAA8E;AAC9E,6CAA6C;AAC7C,YAAY,CAAC,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,CAAC;AAClC,0EAA0E;AAC1E,+EAA+E;AAC/E,2EAA2E;AAC3E,gBAAgB,CAAC,yBAAyB,EAAE,CAAC,CAAC;AAC9C,OAAO,sBAAsB,CAAC;AAE9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAEjE;;;GAGG;AACH,MAAM,IAAI,GAAuB;IAC/B,EAAC,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAC;IACxD,EAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAC;IACrD,EAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAC;CACrD,CAAC;AAEF,4BAA4B;AAC5B,MAAM,YAAY,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;OAoBlB,CAAC;AAER;;;;GAIG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QA8CY,SAAI,GAAG,YAAY,CAAC;IAyEvC,CAAC;aAtHiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA3CqB,CA2CpB;IAMM,YAAY,CAAC,CAA+B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B,CAAC;IAED,yEAAyE;IACjE,iBAAiB,CAAC,CAA4B;QACpD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;QACzB,2EAA2E;QAC3E,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACK,oBAAoB;QAC1B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;QACzB,qEAAqE;QACrE,gDAAgD;QAChD,qEAAqE;QACrE,uEAAuE;QACvE,WAAW;QACX,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;YAC7B,IACE,MAAM;gBACN,MAAM,KAAK,MAAM;gBACjB,kCAAkC,IAAI,MAAM,EAC5C,CAAC;gBACD,MAAM,GAAG,GACP,MAKD,CAAC,gCAAgC,CAAC;gBACnC,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,kEAAkE;QACpE,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;8BAEe,YAAY;;mBAEvB,IAAI;mBACJ,IAAI,CAAC,IAAI;oBACR,IAAI,CAAC,YAAY;;;2CAGM,IAAI,CAAC,iBAAiB;iCAChC,IAAI,CAAC,IAAI,KAAK,UAAU;;;;oBAIrC,IAAI,CAAC,IAAI,KAAK,YAAY;gCACd,IAAI,CAAC,oBAAoB;;UAE/C,IAAI,CAAC,IAAI,KAAK,UAAU;YACxB,CAAC,CAAC,IAAI,CAAA,yCAAyC;YAC/C,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAxEgB;IAAhB,KAAK,EAAE;8CAA6B;AAEH;IAAjC,KAAK,CAAC,iBAAiB,CAAC;yDAA0C;AAhDxD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuH5B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {LitElement, html, css, nothing} from 'lit';\nimport {customElement, query, state} from 'lit/decorators.js';\nimport {tokens, injectTokens} from '../lib/tokens.js';\nimport {\n applyColorScheme,\n readColorSchemePreference,\n} from '../lib/color-scheme.js';\nimport './timeline-view.js';\n\n// Install the shared design tokens on the panel iframe's :root before the\n// views render. Panel components inherit the semantic aliases from :root.\n// The panel owns this document, so it also declares `color-scheme` (host-page\n// injections must not — see `injectTokens`).\ninjectTokens({colorScheme: true});\n// Own the color-scheme class once the panel module is live: re-assert the\n// saved preference (the Settings tab mounts lazily, so it can't). `auto` needs\n// no JS — the tokens' `prefers-color-scheme` @media rule resolves it live.\napplyColorScheme(readColorSchemePreference());\nimport './components-view.js';\nimport type {ComponentsView} from './components-view.js';\nimport './devtools-settings.js';\nimport '../lib/segmented-tabs.js';\nimport type {TabItem} from '../lib/segmented-tabs.js';\nimport {CUBE_ICON, CLOCK_ICON, GEAR_ICON} from '../lib/icons.js';\n\n/**\n * Tabs hosted by the panel. The Timeline is the first; this list is the\n * extension point for future Lit DevTools views.\n */\nconst TABS: readonly TabItem[] = [\n {id: 'components', label: 'Components', icon: CUBE_ICON},\n {id: 'timeline', label: 'Timeline', icon: CLOCK_ICON},\n {id: 'settings', label: 'Settings', icon: GEAR_ICON},\n];\n\n/** Inline Lit logo mark. */\nconst LIT_LOGO_SVG = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-32 0 320 320\"\n width=\"20\"\n height=\"20\"\n aria-hidden=\"true\"\n>\n <path\n fill=\"#00e8ff\"\n d=\"m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z\"\n />\n <path\n fill=\"#283198\"\n d=\"M128 256V128l64-64v128zM0 256l64 64l9.202-60.602L64 192l-37.542 23.71z\"\n />\n <path\n fill=\"#324fff\"\n d=\"M64 192V64l64-64v128zm128 128V192l64-64v128zM0 256V128l64 64z\"\n />\n <path fill=\"#0ff\" d=\"M64 320V192l64 64z\" />\n</svg>`;\n\n/**\n * Root of the Lit DevTools panel — a tabbed shell. Each tab's view is kept\n * mounted and merely hidden when inactive, so the Timeline keeps recording\n * (and holds its events) while another tab is in front.\n */\n@customElement('lit-devtools-panel')\nexport class LitDevtoolsPanel extends LitElement {\n static override styles = [\n tokens,\n css`\n :host {\n display: flex;\n flex-direction: column;\n height: 100vh;\n font-family: var(--lit-devtools-font-sans);\n font-size: var(--lit-devtools-text-sm);\n background: var(--lit-devtools-bg);\n color: var(--lit-devtools-text);\n overflow: hidden;\n }\n header {\n display: flex;\n align-items: center;\n gap: var(--lit-devtools-space-6);\n padding: 0 var(--lit-devtools-space-5);\n border-bottom: 1px solid var(--lit-devtools-border);\n background: var(--lit-devtools-surface-low);\n flex-shrink: 0;\n }\n .brand {\n display: flex;\n align-items: center;\n gap: var(--lit-devtools-space-4);\n color: var(--lit-devtools-text-strong);\n font-weight: var(--lit-devtools-weight-bold);\n font-size: var(--lit-devtools-text-xs);\n letter-spacing: var(--lit-devtools-tracking-caps);\n text-transform: uppercase;\n padding: var(--lit-devtools-space-5) 0;\n }\n .brand svg {\n display: block;\n }\n .view {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n }\n `,\n ];\n\n @state() private _tab = 'components';\n\n @query('components-view') private _componentsView?: ComponentsView;\n\n private _onTabChange(e: CustomEvent<{value: string}>) {\n this._tab = e.detail.value;\n }\n\n /** A timeline event's \"inspect\" link — open the Components tab on it. */\n private _onInspectElement(e: CustomEvent<{id: number}>) {\n this._tab = 'components';\n // The view is always mounted, so it can select without waiting for render.\n this._componentsView?.selectById(e.detail.id);\n }\n\n /**\n * A component was picked via the overlay inspector — switch to the Components\n * tab and request the parent DevTools shell to bring this dock entry to the\n * front, so the user can see the picked element without having to manually\n * open the Lit panel first.\n */\n private _onInspectorActivate() {\n this._tab = 'components';\n // The panel iframe is same-origin with the Vite DevTools shell — the\n // parent exposes its DevTools client context on\n // window.__VITE_DEVTOOLS_CLIENT_CONTEXT__ (set by @vitejs/devtools's\n // inject.ts). Ask it to select the Lit dock entry so the panel becomes\n // visible.\n try {\n const parent = window.parent;\n if (\n parent &&\n parent !== window &&\n '__VITE_DEVTOOLS_CLIENT_CONTEXT__' in parent\n ) {\n const ctx = (\n parent as unknown as Record<\n string,\n | undefined\n | {docks?: {switchEntry?: (id: string) => Promise<boolean>}}\n >\n ).__VITE_DEVTOOLS_CLIENT_CONTEXT__;\n ctx?.docks?.switchEntry?.('lit-devtools');\n }\n } catch {\n // Cross-origin or not running inside the DevTools shell — ignore.\n }\n }\n\n override render() {\n return html`\n <header>\n <span class=\"brand\">${LIT_LOGO_SVG} Lit DevTools</span>\n <segmented-tabs\n .items=${TABS}\n .value=${this._tab}\n @change=${this._onTabChange}\n ></segmented-tabs>\n </header>\n <div class=\"view\" @inspect-element=${this._onInspectElement}>\n <timeline-view ?hidden=${this._tab !== 'timeline'}></timeline-view>\n <!-- Kept mounted (like the timeline) so an overlay inspect-pick can\n arrive and switch us here even while another tab is in front. -->\n <components-view\n ?hidden=${this._tab !== 'components'}\n @inspector-activate=${this._onInspectorActivate}\n ></components-view>\n ${this._tab === 'settings'\n ? html`<devtools-settings></devtools-settings>`\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'lit-devtools-panel': LitDevtoolsPanel;\n }\n}\n"]}
|