@hashintel/ds-theme 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashintel/ds-theme
 
+## 0.1.2
+
+### Patch Changes
+
+- [#8590](https://github.com/hashintel/hash/pull/8590) [`4a60112`](https://github.com/hashintel/hash/commit/4a6011241720a9c5d8a7f0e7f49f15b50eaad228) Thanks [@CiaranMn](https://github.com/CiaranMn)! - provide theme scoping utility function
+
+## 0.1.1
+
+### Patch Changes
+
+- [#8570](https://github.com/hashintel/hash/pull/8570) [`2399453`](https://github.com/hashintel/hash/commit/23994530e745c153a2b926c89e9205b87630c236) Thanks [@CiaranMn](https://github.com/CiaranMn)! - Fix dependency references
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/main.d.ts

@@ -21813,17 +21813,61 @@ interface ExtendableOptions {
    */
   themes?: ExtendableThemeVariantsMap;
 }
-interface PresetOptions {
+interface PresetOptions$1 {
   /**
    * Used to create reusable config presets for your project or team.
    */
   presets?: (string | Preset | Promise<Preset>)[];
 }
-interface Preset extends ExtendableOptions, PresetOptions {
+interface Preset extends ExtendableOptions, PresetOptions$1 {
   name: string;
 }
 //#endregion
 //#region src/main.d.ts
+type PresetOptions = {
+  /**
+   * Scope the preset's global styles and light/dark conditions to a subtree
+   * instead of the document root. When set, globalCss targets this selector
+   * (instead of `html, body`) and includes `fontPipelineCssVars` so that
+   * preflight and token vars resolve correctly within the subtree.
+   *
+   * @example ".petrinaut-root"
+   */
+  scope?: string;
+};
+/**
+ * Create the `@hashintel/ds-theme` Panda CSS preset.
+ *
+ * Without arguments it behaves identically to the default export (document-level
+ * global styles). Pass `{ scope }` to target a subtree instead.
+ */
+declare function createPreset(options?: PresetOptions): Preset;
+/**
+ * Returns the Panda config properties needed to scope the design system to a
+ * CSS subtree. Spread the result into `defineConfig()`.
+ *
+ * Handles `preflight`, `cssVarRoot`, `presets`, and scoped `conditions` /
+ * `globalCss` inside the preset — the consumer only needs to add their own
+ * `include`, `theme.extend`, etc.
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from "@pandacss/dev";
+ * import { scopedThemeConfig } from "@hashintel/ds-theme";
+ *
+ * export default defineConfig({
+ *   ...scopedThemeConfig(".my-root"),
+ *   include: ["./src/**\/*.{ts,tsx}"],
+ * });
+ * ```
+ */
+declare function scopedThemeConfig(scope: string): {
+  preflight: {
+    readonly scope: string;
+  };
+  cssVarRoot: string;
+  presets: Preset[];
+};
 declare const preset: Preset;
 //#endregion
-export { preset as default, preset };
+export { PresetOptions, createPreset, preset as default, preset, scopedThemeConfig };

package/dist/main.js

@@ -615,6 +615,47 @@ var index_default = definePreset({
 	}
 });
 //#endregion
+//#region src/document-surface.ts
+/**
+* CSS variables that bridge Panda's preflight (which uses `--global-font-body`
+* / `--global-font-mono`) with the generated `--fonts-*` token vars.
+*
+* In a full-page app these live on `:root` (see ds-helpers Ladle CSS).
+* When the theme is scoped to a subtree, the preset places them on the scope
+* root so preflight can resolve them.
+*
+* `--global-font-body` and `--global-font-mono` reference the Panda token vars
+* (`--fonts-body`, `--fonts-mono`), so they automatically reflect whatever the
+* consumer sets for `fonts.body` / `fonts.mono` — no separate override needed.
+*
+* `--font-inter` / `--font-inter-tight` are the raw variable-font stacks that
+* the token definitions reference (`fonts.body` = `var(--font-inter), …`).
+* Consumers must import the corresponding `@fontsource-variable/*` packages
+* so the `@font-face` rules exist.
+*/
+const fontPipelineCssVars = {
+	"--font-inter": "\"Inter Variable\", \"Inter\", ui-sans-serif, system-ui, sans-serif",
+	"--font-inter-tight": "\"Inter Tight Variable\", \"Inter Tight\", ui-sans-serif, system-ui, sans-serif",
+	"--global-font-body": "var(--fonts-body)",
+	"--global-font-mono": "var(--fonts-mono)"
+};
+/**
+* Default document surface styles applied to `html, body` by the preset.
+*
+* Sets the default color palette, font family, background, text color, and
+* the density / roundness / leading factor custom properties.
+*/
+const documentSurfaceStyles = {
+	colorPalette: "neutral",
+	focusRingColor: "colorPalette.bd.solid",
+	fontFamily: "body",
+	bg: "neutral.s00",
+	color: "fg.heading",
+	"--roundness-factor": "1",
+	"--leading-factor": "1",
+	"--density-factor": "1"
+};
+//#endregion
 //#region src/theme/utils.ts
 /**
 * Returns the foreground color to use on a "solid" background (bg.solid / bgSolid.solid).
@@ -779,179 +820,213 @@ const scaleTokenValues = (tokens, factorVariable, { skipReferences = false } = {
 const scaledSpacing = scaleTokenValues(index_default.theme.tokens.spacing, "--density-factor");
 const scaledRadii = scaleTokenValues(index_default.theme.tokens.radii, "--roundness-factor");
 const scaledLineHeights = scaleTokenValues(index_default.theme.tokens.lineHeights, "--leading-factor");
-const preset = definePreset$1({
-	name: "@hashintel/ds-theme",
-	globalCss: defineGlobalStyles({ "html, body": {
-		colorPalette: "neutral",
-		focusRingColor: "colorPalette.bd.solid",
-		fontFamily: "body",
-		bg: "neutral.s00",
-		color: "fg.heading",
-		"--roundness-factor": "1",
-		"--leading-factor": "1",
-		"--density-factor": "1"
-	} }),
-	conditions: { extend: {
-		light: ":where(:root:not(.dark, [data-theme=\"dark\"])) &, .light &, [data-theme=light] &",
-		dark: ".dark &, [data-theme=\"dark\"] &",
-		supportHover: ["@media (hover: hover) and (pointer: fine)", "&:is(:hover, [data-support-hover])"],
-		focusVisibleWithin: "&:is(:has(:focus-visible), [data-focus-visible-within])",
-		inert: "&:is([inert], [inert] *, [data-inert])",
-		groupFocusVisibleWithin: ".group:is(:has(:focus-visible), [data-focus-visible-within]) &",
-		peerFocusVisibleWithin: ".peer:is(:has(:focus-visible), [data-focus-visible-within]) ~ &",
-		userValid: "&:is(:user-valid, [data-user-valid])",
-		userInvalid: "&:is(:user-invalid, [data-user-invalid])",
-		pointerFine: "@media (pointer: fine)",
-		pointerCoarse: "@media (pointer: coarse)",
-		pointerNone: "@media (pointer: none)",
-		anyPointerFine: "@media (any-pointer: fine)",
-		anyPointerCoarse: "@media (any-pointer: coarse)",
-		inHover: ":where(:is(*:hover, [data-in-hover])) &",
-		inFocus: ":where(:is(*:focus, [data-in-focus])) &",
-		inFocusVisible: ":where(:is(*:focus-visible, [data-in-focus-visible])) &",
-		inFocusWithin: ":where(:is(*:focus-within, [data-in-focus-within])) &",
-		hasHover: "&:is(:has(*:hover), [data-has-hover])",
-		hasFocus: "&:is(:has(*:focus), [data-has-focus])",
-		hasFocusVisible: "&:is(:has(*:focus-visible), [data-has-focus-visible])",
-		hasFocusWithin: "&:is(:has(*:focus-within), [data-has-focus-within])",
-		hasChecked: "&:is(:has(*:checked), [data-has-checked])"
-	} },
-	utilities: { extend: {
-		leading: {
-			className: "leading",
-			values: {
-				tight: "0.9",
-				normal: "1",
-				loose: "1.1"
-			},
-			transform(value) {
-				return { "--leading-factor": value };
-			}
-		},
-		density: {
-			className: "density",
-			values: {
-				compact: "0.75",
-				normal: "1",
-				comfortable: "1.25"
-			},
-			transform(value) {
-				return { "--density-factor": value };
-			}
-		},
-		roundness: {
-			className: "roundness",
-			values: {
-				none: "0",
-				sm: "0.75",
-				md: "1",
-				lg: "1.5",
-				xl: "2"
-			},
-			transform(value) {
-				return { "--roundness-factor": value };
-			}
-		}
-	} },
-	theme: { extend: {
-		tokens: {
-			fontSizes: fontSizes$1,
-			fontWeights: fontWeights$1,
-			fonts: {
-				display: { value: "var(--font-inter-tight), Inter Tight, ui-sans-serif, system-ui, sans-serif" },
-				body: { value: "var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif" },
-				mono: { value: "var(--font-geist-mono), Geist Mono, ui-monospace, SFMono-Regular, monospace" }
+/**
+* Create the `@hashintel/ds-theme` Panda CSS preset.
+*
+* Without arguments it behaves identically to the default export (document-level
+* global styles). Pass `{ scope }` to target a subtree instead.
+*/
+function createPreset(options) {
+	const scope = options?.scope;
+	const surfaceSelector = scope ?? "html, body";
+	const surfaceStyles = scope ? {
+		...fontPipelineCssVars,
+		...documentSurfaceStyles
+	} : documentSurfaceStyles;
+	const lightCondition = scope ? `${scope} &` : ":where(:root:not(.dark, [data-theme=\"dark\"])) &, .light &, [data-theme=light] &";
+	const darkCondition = scope ? `.dark ${scope} &, [data-theme='dark'] ${scope} &` : ".dark &, [data-theme=\"dark\"] &";
+	return definePreset$1({
+		name: "@hashintel/ds-theme",
+		globalCss: defineGlobalStyles({ [surfaceSelector]: surfaceStyles }),
+		conditions: { extend: {
+			light: lightCondition,
+			dark: darkCondition,
+			supportHover: ["@media (hover: hover) and (pointer: fine)", "&:is(:hover, [data-support-hover])"],
+			focusVisibleWithin: "&:is(:has(:focus-visible), [data-focus-visible-within])",
+			inert: "&:is([inert], [inert] *, [data-inert])",
+			groupFocusVisibleWithin: ".group:is(:has(:focus-visible), [data-focus-visible-within]) &",
+			peerFocusVisibleWithin: ".peer:is(:has(:focus-visible), [data-focus-visible-within]) ~ &",
+			userValid: "&:is(:user-valid, [data-user-valid])",
+			userInvalid: "&:is(:user-invalid, [data-user-invalid])",
+			pointerFine: "@media (pointer: fine)",
+			pointerCoarse: "@media (pointer: coarse)",
+			pointerNone: "@media (pointer: none)",
+			anyPointerFine: "@media (any-pointer: fine)",
+			anyPointerCoarse: "@media (any-pointer: coarse)",
+			inHover: ":where(:is(*:hover, [data-in-hover])) &",
+			inFocus: ":where(:is(*:focus, [data-in-focus])) &",
+			inFocusVisible: ":where(:is(*:focus-visible, [data-in-focus-visible])) &",
+			inFocusWithin: ":where(:is(*:focus-within, [data-in-focus-within])) &",
+			hasHover: "&:is(:has(*:hover), [data-has-hover])",
+			hasFocus: "&:is(:has(*:focus), [data-has-focus])",
+			hasFocusVisible: "&:is(:has(*:focus-visible), [data-has-focus-visible])",
+			hasFocusWithin: "&:is(:has(*:focus-within), [data-has-focus-within])",
+			hasChecked: "&:is(:has(*:checked), [data-has-checked])"
+		} },
+		utilities: { extend: {
+			leading: {
+				className: "leading",
+				values: {
+					tight: "0.9",
+					normal: "1",
+					loose: "1.1"
+				},
+				transform(value) {
+					return { "--leading-factor": value };
+				}
 			},
-			colors: staticColors,
-			sizes: index_default.theme.tokens.sizes,
-			shadows: index_default.theme.tokens.shadows,
-			spacing: scaledSpacing,
-			radii: scaledRadii,
-			lineHeights: scaledLineHeights
-		},
-		semanticTokens: {
-			colors: {
-				DEFAULT: createSemanticSet("colors.neutral", "neutral"),
-				...palettes,
-				status: {
-					info: blue,
-					success: green,
-					warning: orange,
-					error: red
+			density: {
+				className: "density",
+				values: {
+					compact: "0.75",
+					normal: "1",
+					comfortable: "1.25"
+				},
+				transform(value) {
+					return { "--density-factor": value };
 				}
 			},
-			shadows: { elevation: {
-				drop: {
-					macro: { value: "{shadows.xs}" },
-					micro: { value: "{shadows.2xs}" }
+			roundness: {
+				className: "roundness",
+				values: {
+					none: "0",
+					sm: "0.75",
+					md: "1",
+					lg: "1.5",
+					xl: "2"
 				},
-				lift: {
-					macro: { value: "{shadows.sm}" },
-					micro: { value: "{shadows.xs}" }
+				transform(value) {
+					return { "--roundness-factor": value };
+				}
+			}
+		} },
+		theme: { extend: {
+			tokens: {
+				fontSizes: fontSizes$1,
+				fontWeights: fontWeights$1,
+				fonts: {
+					display: { value: "var(--font-inter-tight), Inter Tight, ui-sans-serif, system-ui, sans-serif" },
+					body: { value: "var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif" },
+					mono: { value: "var(--font-geist-mono), Geist Mono, ui-monospace, SFMono-Regular, monospace" }
 				},
-				raise: {
-					macro: { value: "{shadows.md}" },
-					micro: { value: "{shadows.sm}" }
+				colors: staticColors,
+				sizes: index_default.theme.tokens.sizes,
+				shadows: index_default.theme.tokens.shadows,
+				spacing: scaledSpacing,
+				radii: scaledRadii,
+				lineHeights: scaledLineHeights
+			},
+			semanticTokens: {
+				colors: {
+					DEFAULT: createSemanticSet("colors.neutral", "neutral"),
+					...palettes,
+					status: {
+						info: blue,
+						success: green,
+						warning: orange,
+						error: red
+					}
 				},
-				float: {
-					macro: { value: "{shadows.lg}" },
-					micro: { value: "{shadows.md}" }
-				}
-			} }
-		},
-		textStyles: {
-			xs: { value: {
-				fontSize: "{fontSizes.xs}",
-				lineHeight: "calc(1em * 1.6 * var(--leading-factor, 1))",
-				letterSpacing: "0.01em"
-			} },
-			sm: { value: {
-				fontSize: "{fontSizes.sm}",
-				lineHeight: "calc(1em * 1.6 * var(--leading-factor, 1))",
-				letterSpacing: "0.005em"
-			} },
-			base: { value: {
-				fontSize: "{fontSizes.base}",
-				lineHeight: "calc(1em * 1.5 * var(--leading-factor, 1))",
-				letterSpacing: "0em"
-			} },
-			lg: { value: {
-				fontSize: "{fontSizes.lg}",
-				lineHeight: "calc(1em * 1.5 * var(--leading-factor, 1))",
-				letterSpacing: "-0.005em"
-			} },
-			xl: { value: {
-				fontSize: "{fontSizes.xl}",
-				lineHeight: "calc(1em * 1.4 * var(--leading-factor, 1))",
-				letterSpacing: "-0.01em"
-			} },
-			"2xl": { value: {
-				fontSize: "{fontSizes.2xl}",
-				lineHeight: "calc(1em * 1.4 * var(--leading-factor, 1))",
-				letterSpacing: "-0.015em"
-			} },
-			"3xl": { value: {
-				fontSize: "{fontSizes.3xl}",
-				lineHeight: "calc(1em * 1.3 * var(--leading-factor, 1))",
-				letterSpacing: "-0.02em"
-			} },
-			"4xl": { value: {
-				fontSize: "{fontSizes.4xl}",
-				lineHeight: "calc(1em * 1.3 * var(--leading-factor, 1))",
-				letterSpacing: "-0.025em"
-			} }
-		},
-		colorPalette: {
-			enabled: true,
-			include: [
-				"bg.*",
-				"bgSolid.*",
-				"fg.*",
-				"bd.*",
-				"status.*"
-			]
-		}
-	} }
-});
+				shadows: { elevation: {
+					drop: {
+						macro: { value: "{shadows.xs}" },
+						micro: { value: "{shadows.2xs}" }
+					},
+					lift: {
+						macro: { value: "{shadows.sm}" },
+						micro: { value: "{shadows.xs}" }
+					},
+					raise: {
+						macro: { value: "{shadows.md}" },
+						micro: { value: "{shadows.sm}" }
+					},
+					float: {
+						macro: { value: "{shadows.lg}" },
+						micro: { value: "{shadows.md}" }
+					}
+				} }
+			},
+			textStyles: {
+				xs: { value: {
+					fontSize: "{fontSizes.xs}",
+					lineHeight: "calc(1em * 1.6 * var(--leading-factor, 1))",
+					letterSpacing: "0.01em"
+				} },
+				sm: { value: {
+					fontSize: "{fontSizes.sm}",
+					lineHeight: "calc(1em * 1.6 * var(--leading-factor, 1))",
+					letterSpacing: "0.005em"
+				} },
+				base: { value: {
+					fontSize: "{fontSizes.base}",
+					lineHeight: "calc(1em * 1.5 * var(--leading-factor, 1))",
+					letterSpacing: "0em"
+				} },
+				lg: { value: {
+					fontSize: "{fontSizes.lg}",
+					lineHeight: "calc(1em * 1.5 * var(--leading-factor, 1))",
+					letterSpacing: "-0.005em"
+				} },
+				xl: { value: {
+					fontSize: "{fontSizes.xl}",
+					lineHeight: "calc(1em * 1.4 * var(--leading-factor, 1))",
+					letterSpacing: "-0.01em"
+				} },
+				"2xl": { value: {
+					fontSize: "{fontSizes.2xl}",
+					lineHeight: "calc(1em * 1.4 * var(--leading-factor, 1))",
+					letterSpacing: "-0.015em"
+				} },
+				"3xl": { value: {
+					fontSize: "{fontSizes.3xl}",
+					lineHeight: "calc(1em * 1.3 * var(--leading-factor, 1))",
+					letterSpacing: "-0.02em"
+				} },
+				"4xl": { value: {
+					fontSize: "{fontSizes.4xl}",
+					lineHeight: "calc(1em * 1.3 * var(--leading-factor, 1))",
+					letterSpacing: "-0.025em"
+				} }
+			},
+			colorPalette: {
+				enabled: true,
+				include: [
+					"bg.*",
+					"bgSolid.*",
+					"fg.*",
+					"bd.*",
+					"status.*"
+				]
+			}
+		} }
+	});
+}
+/**
+* Returns the Panda config properties needed to scope the design system to a
+* CSS subtree. Spread the result into `defineConfig()`.
+*
+* Handles `preflight`, `cssVarRoot`, `presets`, and scoped `conditions` /
+* `globalCss` inside the preset — the consumer only needs to add their own
+* `include`, `theme.extend`, etc.
+*
+* @example
+* ```ts
+* import { defineConfig } from "@pandacss/dev";
+* import { scopedThemeConfig } from "@hashintel/ds-theme";
+*
+* export default defineConfig({
+*   ...scopedThemeConfig(".my-root"),
+*   include: ["./src/**\/*.{ts,tsx}"],
+* });
+* ```
+*/
+function scopedThemeConfig(scope) {
+	return {
+		preflight: { scope },
+		cssVarRoot: scope,
+		presets: [createPreset({ scope })]
+	};
+}
+const preset = createPreset();
 //#endregion
-export { preset as default, preset };
+export { createPreset, preset as default, preset, scopedThemeConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashintel/ds-theme",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "HASH PandaCSS Preset",
   "license": "(MIT OR Apache-2.0)",
   "repository": {
@@ -45,7 +45,7 @@
     "fix:format": "biome format --write",
     "lint": "npm-run-all --continue-on-error \"lint:*\"",
     "lint:tsc": "tsc --noEmit && tsc --noEmit -p scripts/tsconfig.json",
-    "prepare": "turbo run build",
+    "prepublishOnly": "turbo run build",
     "test:unit": "vitest run"
   },
   "devDependencies": {