@nebutra/tokens 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nebutra/tokens
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nebutra/design-tokens@3.0.0
+  - @nebutra/fonts@3.0.0
+
 ## 2.0.0
 
 ### Patch Changes

package/dist/brand-package/index.d.ts

@@ -43,19 +43,25 @@ type EmitBrandCssMode =
  | "scoped";
 interface EmitBrandCssOptions {
     /**
-     * `global` (default): `:root` + `html[data-brand]` — one import recolors the app.
+     * `global` (default): `:root` + `<root>[data-brand]` — one import recolors the app.
      * Single-mode dark packs also include `.dark`.
      * Dual-mode packs (`modes.light` + `modes.dark`) emit separate light/dark color blocks.
-     * `scoped`: only `html[data-brand]` (+ `html.dark[data-brand]` when dual).
+     * `scoped`: only `<root>[data-brand]` (+ `<root>.dark[data-brand]` when dual).
      */
     mode?: EmitBrandCssMode;
+    /**
+     * Element the carrier attaches to. Defaults to `html` — the app-level swap.
+     * A subtree preview passes its own root (e.g. `.theme-preview-artboard`) so
+     * the emitted CSS cannot leak out of the preview.
+     */
+    root?: string;
 }
 /** Global single-skin selector list — single-mode packs only. */
-declare function emitGlobalSkinSelector(brandId: string, darkDefault: boolean): string;
+declare function emitGlobalSkinSelector(brandId: string, darkDefault: boolean, root?: string): string;
 /** Light mode selector (dual-mode). */
-declare function emitLightModeSelector(brandId: string, mode: EmitBrandCssMode): string;
+declare function emitLightModeSelector(brandId: string, mode: EmitBrandCssMode, root?: string): string;
 /** Dark mode selector (dual-mode) — never paints light colors under .dark. */
-declare function emitDarkModeSelector(brandId: string, mode: EmitBrandCssMode): string;
+declare function emitDarkModeSelector(brandId: string, mode: EmitBrandCssMode, root?: string): string;
 /**
  * Emit a single opt-in skin CSS file from a Brand Package.
  */

package/dist/brand-package/index.js

@@ -327,8 +327,8 @@ var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
 function withCjkTail(stack) {
   const families = stack.split(",").map((f) => f.trim());
   const cut = families.findIndex((f) => GENERIC_FAMILIES.has(f.replace(/"/g, "")));
-  if (cut === -1 || families.some((f) => f.includes("Noto Sans SC"))) return stack;
-  const cjk = ['var(--font-noto-sans-sc, "Noto Sans SC")', '"PingFang SC"'];
+  if (cut === -1 || families.some((f) => f.includes("MiSans"))) return stack;
+  const cjk = ['var(--font-misans, "MiSans")', '"PingFang SC"'];
   return [...families.slice(0, cut), ...cjk, ...families.slice(cut)].join(", ");
 }
 function motionVars(motion) {
@@ -538,24 +538,24 @@ function emitFontFaces(faces) {
   }
   return out;
 }
-function emitGlobalSkinSelector(brandId, darkDefault) {
+function emitGlobalSkinSelector(brandId, darkDefault, root = "html") {
   if (darkDefault) {
     return `:root,
 .dark,
-html[data-brand="${brandId}"] {`;
+${root}[data-brand="${brandId}"] {`;
   }
   return `:root,
-html[data-brand="${brandId}"] {`;
+${root}[data-brand="${brandId}"] {`;
 }
-function emitLightModeSelector(brandId, mode) {
-  if (mode === "scoped") return `html[data-brand="${brandId}"] {`;
+function emitLightModeSelector(brandId, mode, root = "html") {
+  if (mode === "scoped") return `${root}[data-brand="${brandId}"] {`;
   return `:root,
-html[data-brand="${brandId}"] {`;
+${root}[data-brand="${brandId}"] {`;
 }
-function emitDarkModeSelector(brandId, mode) {
-  if (mode === "scoped") return `html.dark[data-brand="${brandId}"] {`;
+function emitDarkModeSelector(brandId, mode, root = "html") {
+  if (mode === "scoped") return `${root}.dark[data-brand="${brandId}"] {`;
   return `.dark,
-html.dark[data-brand="${brandId}"] {`;
+${root}.dark[data-brand="${brandId}"] {`;
 }
 function neutralRamp(s, r) {
   const hsl = (triple) => `hsl(${triple})`;
@@ -690,6 +690,7 @@ function emitColorVars(s, r) {
 }
 function emitBrandCss(brand, options = {}) {
   const mode = options.mode ?? "global";
+  const root = options.root ?? "html";
   const b = normalizeBrandPackage(brand);
   const t = b.typography;
   const dual = isDualModeBrand(b);
@@ -747,17 +748,17 @@ function emitBrandCss(brand, options = {}) {
     ...extLines.length ? ["", "  /* Taxonomy / decorative (not product CTA) */", ...extLines] : []
   ];
   if (dual && b.modes?.light?.semantic && b.modes?.dark?.semantic) {
-    parts.push(emitLightModeSelector(b.id, mode));
+    parts.push(emitLightModeSelector(b.id, mode, root));
     parts.push(
       ...emitColorVars(b.modes.light.semantic, b.modes.light.roles),
       ...sharedChrome,
       `}`,
       ``
     );
-    parts.push(emitDarkModeSelector(b.id, mode));
+    parts.push(emitDarkModeSelector(b.id, mode, root));
     parts.push(...emitColorVars(b.modes.dark.semantic, b.modes.dark.roles), `}`, ``);
   } else {
-    const selector = mode === "scoped" ? `html[data-brand="${b.id}"] {` : emitGlobalSkinSelector(b.id, b.darkDefault);
+    const selector = mode === "scoped" ? `${root}[data-brand="${b.id}"] {` : emitGlobalSkinSelector(b.id, b.darkDefault, root);
     parts.push(selector);
     parts.push(...emitColorVars(b.semantic, b.roles), ...sharedChrome, `}`, ``);
   }