@qilin-agent/client-ui-theme-brand 3.1.6 → 3.1.7

package/lib/client.js

@@ -4,13 +4,12 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		//#region lib/types/client/tokens.js
+		//#region lib/types/packs/qilin.js
 		/**
-		* QiLin alias-token overrides, applied as one layer over the active palette.
+		* The dark-gold color pack: the "玄金" landing VI extended to both schemes.
 		*
-		* The palette is the "玄金麒麟" (dark-gold) landing VI extended to both
-		* schemes: the dark values transplant the landing page's tokens verbatim
-		* (apps/web/src/landing/landing.css), the light values derive the matching
+		* The dark values transplant the landing page's tokens verbatim
+		* (apps/web/src/landing/landing.css); the light values derive the matching
 		* warm-paper variant because the landing VI ships no light mode. Accent
 		* contrast is WCAG AA verified: the deep link gold #7d6126 clears 5.3:1 on
 		* paper #f8f5ee where the VI's gold-700 #8f6f2e reaches only 4.3:1, and
@@ -22,15 +21,7 @@ window.__ModuleLoader__.load({
 		* convention: dark schemes brighten (landing CTA gold-500 -> gold-300),
 		* light schemes darken (gold-700 -> #7d6126).
 		*/
-		/**
-		* The layer source id. One layer per source, so this names the origin in
-		* `ctx.theme` inspection and makes re-application replace rather than stack.
-		*/
-		const QILIN_THEME_SOURCE = "@qilin-agent/client-ui-theme-brand";
-		/**
-		* QiLin's brand tokens over the platform palettes. Every value states both
-		* schemes (the ThemeTokenModes contract), grouped by surface family.
-		*/
+		/** Dark-gold tokens over the platform palettes. Every value states both schemes. */
 		const QILIN_TOKENS = Object.freeze({
 			"--qilin-alias-brand-primary": {
 				light: "#8f6f2e",
@@ -261,18 +252,562 @@ window.__ModuleLoader__.load({
 				dark: "#c94a40"
 			}
 		});
+		/** The dark-gold pack as one selectable skin. */
+		const QILIN_PACK = Object.freeze({
+			id: "qilin",
+			label: Object.freeze({
+				zh: "玄金",
+				en: "Xuanjin"
+			}),
+			boot: Object.freeze({
+				light: "#f8f5ee",
+				dark: "#0d0b09"
+			}),
+			tokens: QILIN_TOKENS
+		});
+		//#endregion
+		//#region lib/types/packs/mono.js
+		/**
+		* The monochrome color pack: one neutral ramp from pure white to pure black,
+		* with no hue. Accent, canvas, and ink are all greys; the light scheme uses a
+		* near-black accent so white on-accent text and focus rings clear AA, and the
+		* dark scheme mirrors it with an off-white accent on black.
+		*
+		* State colors, masks, and the ongoing blue stay with the base palettes, the
+		* same omission rule as every pack. Hover darkens the light accent and
+		* brightens the dark one, matching each platform's convention.
+		*/
+		/** Monochrome tokens over the platform palettes. Every value states both schemes. */
+		const MONO_TOKENS = Object.freeze({
+			"--qilin-alias-brand-primary": {
+				light: "#1a1a1a",
+				dark: "#f2f2f2"
+			},
+			"--qilin-alias-button-primary-hover": {
+				light: "#000000",
+				dark: "#ffffff"
+			},
+			"--qilin-alias-link": {
+				light: "#1f1f1f",
+				dark: "#ededed"
+			},
+			"--qilin-alias-bg-base": {
+				light: "#f4f4f4",
+				dark: "#000000"
+			},
+			"--qilin-alias-bg-layer-1": {
+				light: "#ffffff",
+				dark: "#0d0d0d"
+			},
+			"--qilin-alias-bg-layer-2": {
+				light: "#ffffff",
+				dark: "#141414"
+			},
+			"--qilin-alias-bg-layer-3": {
+				light: "#ffffff",
+				dark: "#1c1c1c"
+			},
+			"--qilin-alias-bg-overlay": {
+				light: "#e6e6e6",
+				dark: "#3f3f3f"
+			},
+			"--qilin-alias-bg-skeleton": {
+				light: "rgba(20, 20, 20, 0.06)",
+				dark: "rgba(242, 242, 242, 0.08)"
+			},
+			"--qilin-specific-sidebar-fill": {
+				light: "#ececec",
+				dark: "#000000"
+			},
+			"--qilin-specific-sidebar-nav-item-hover": {
+				light: "#e6e6e6",
+				dark: "#141414"
+			},
+			"--qilin-specific-sidebar-nav-item-active": {
+				light: "#dedede",
+				dark: "#1c1c1c"
+			},
+			"--qilin-specific-sidebar-nav-item-active-accent": {
+				light: "#1a1a1a",
+				dark: "#f2f2f2"
+			},
+			"--qilin-specific-bubble": {
+				light: "#ededed",
+				dark: "#1a1a1a"
+			},
+			"--qilin-specific-input-major": {
+				light: "#ffffff",
+				dark: "#141414"
+			},
+			"--qilin-specific-selector": {
+				light: "#f0f0f0",
+				dark: "#1c1c1c"
+			},
+			"--qilin-specific-tip": {
+				light: "#f0f0f0",
+				dark: "#1c1c1c"
+			},
+			"--qilin-alias-toast-bg": {
+				light: "#262626",
+				dark: "#2b2b2b"
+			},
+			"--qilin-alias-tooltip-bg": {
+				light: "#1f1f1f",
+				dark: "#262626"
+			},
+			"--qilin-alias-label-primary": {
+				light: "#141414",
+				dark: "#f2f2f2"
+			},
+			"--qilin-alias-label-primary-dimmed": {
+				light: "#262626",
+				dark: "#dcdcdc"
+			},
+			"--qilin-alias-label-secondary": {
+				light: "#5a5a5a",
+				dark: "#a6a6a6"
+			},
+			"--qilin-alias-label-tertiary": {
+				light: "#808080",
+				dark: "#8a8a8a"
+			},
+			"--qilin-alias-label-caption": {
+				light: "#969696",
+				dark: "#707070"
+			},
+			"--qilin-alias-label-dimmed": {
+				light: "#cfcfcf",
+				dark: "#4a4a4a"
+			},
+			"--qilin-alias-label-primary-inverted": {
+				light: "#ffffff",
+				dark: "#141414"
+			},
+			"--qilin-alias-border-l1": {
+				light: "rgba(20, 20, 20, 0.07)",
+				dark: "rgba(242, 242, 242, 0.07)"
+			},
+			"--qilin-alias-border-l2": {
+				light: "rgba(20, 20, 20, 0.11)",
+				dark: "rgba(242, 242, 242, 0.12)"
+			},
+			"--qilin-alias-border-l2-darkmode-thin": {
+				light: "rgba(20, 20, 20, 0.11)",
+				dark: "rgba(242, 242, 242, 0.07)"
+			},
+			"--qilin-alias-border-l3": {
+				light: "rgba(20, 20, 20, 0.13)",
+				dark: "rgba(242, 242, 242, 0.16)"
+			},
+			"--qilin-alias-border-l4": {
+				light: "rgba(20, 20, 20, 0.17)",
+				dark: "rgba(242, 242, 242, 0.20)"
+			},
+			"--qilin-alias-border-inverted": {
+				light: "rgba(20, 20, 20, 0)",
+				dark: "rgba(242, 242, 242, 0.06)"
+			},
+			"--qilin-alias-border-inverted2": {
+				light: "rgba(20, 20, 20, 0)",
+				dark: "rgba(242, 242, 242, 0.08)"
+			},
+			"--qilin-alias-interactive-bg-hover": {
+				light: "rgba(20, 20, 20, 0.07)",
+				dark: "rgba(242, 242, 242, 0.08)"
+			},
+			"--qilin-alias-interactive-bg-active": {
+				light: "rgba(20, 20, 20, 0.12)",
+				dark: "rgba(242, 242, 242, 0.14)"
+			},
+			"--qilin-alias-interactive-bg-hover-accent": {
+				light: "rgba(20, 20, 20, 0.14)",
+				dark: "rgba(242, 242, 242, 0.24)"
+			},
+			"--qilin-alias-interactive-bg-hover-solid": {
+				light: "#ededed",
+				dark: "#1c1c1c"
+			},
+			"--qilin-alias-button-contrast-fill": {
+				light: "#5a5a5a",
+				dark: "#f2f2f2"
+			},
+			"--qilin-alias-button-elevated-fill": {
+				light: "#ffffff",
+				dark: "#1f1f1f"
+			},
+			"--qilin-alias-button-floating-fill": {
+				light: "#ffffff",
+				dark: "#141414"
+			},
+			"--qilin-alias-button-floating-hover": {
+				light: "#ededed",
+				dark: "#1c1c1c"
+			},
+			"--qilin-alias-button-ghost-active-fill": {
+				light: "#ededed",
+				dark: "#1f1f1f"
+			},
+			"--qilin-alias-button-ghost-active-hover": {
+				light: "#e4e4e4",
+				dark: "#2a2a2a"
+			},
+			"--qilin-alias-button-ghost-active-border": {
+				light: "#9a9a9a",
+				dark: "#6f6f6f"
+			},
+			"--qilin-alias-button-tool-bar-fill": {
+				light: "rgba(90, 90, 90, 0.5)",
+				dark: "rgba(160, 160, 160, 0.4)"
+			},
+			"--qilin-alias-button-tool-bar-hover": {
+				light: "rgba(90, 90, 90, 0.6)",
+				dark: "rgba(160, 160, 160, 0.5)"
+			},
+			"--qilin-alias-button-tool-bar-fill-invisible": {
+				light: "rgba(20, 20, 20, 0.36)",
+				dark: "rgba(30, 30, 30, 0.36)"
+			},
+			"--qilin-alias-markdown-code-block": {
+				light: "#efefef",
+				dark: "#101010"
+			},
+			"--qilin-alias-markdown-code-block-banner": {
+				light: "#e8e8e8",
+				dark: "#171717"
+			},
+			"--qilin-alias-markdown-inline-code": {
+				light: "#eeeeee",
+				dark: "#1a1a1a"
+			},
+			"--qilin-alias-markdown-citation": {
+				light: "#eaeaea",
+				dark: "#1a1a1a"
+			},
+			"--qilin-alias-markdown-tag": {
+				light: "#ededed",
+				dark: "#141414"
+			},
+			"--qilin-alias-scrollbar-bg-l1": {
+				light: "#dcdcdc",
+				dark: "#3a3a3a"
+			},
+			"--qilin-alias-scrollbar-bg-l2": {
+				light: "#dcdcdc",
+				dark: "#4a4a4a"
+			},
+			"--qilin-alias-scrollbar-hover-l1": {
+				light: "#cfcfcf",
+				dark: "#4a4a4a"
+			},
+			"--qilin-alias-scrollbar-hover-l2": {
+				light: "#cfcfcf",
+				dark: "#5a5a5a"
+			}
+		});
+		/** The monochrome pack as one selectable skin. */
+		const MONO_PACK = Object.freeze({
+			id: "mono",
+			label: Object.freeze({
+				zh: "黑白",
+				en: "Mono"
+			}),
+			boot: Object.freeze({
+				light: "#f4f4f4",
+				dark: "#000000"
+			}),
+			tokens: MONO_TOKENS
+		});
+		//#endregion
+		//#region lib/types/packs/verdant.js
+		/**
+		* The green color pack: light-green paper with a deep green accent in the
+		* light scheme, and a deep ink-green canvas with a light green accent in the
+		* dark scheme. Accent contrast is WCAG AA verified: white on #2f6b4b clears
+		* 6.4:1, the light link #2a5a40 clears 6.5:1 on #f1f6f2, and the dark accent
+		* #8fd0a8 clears 11:1 on the #0a120e canvas.
+		*
+		* State colors, masks, and the ongoing blue stay with the base palettes, the
+		* same omission rule as every pack. Hover darkens the light accent and
+		* brightens the dark one, matching each platform's convention.
+		*/
+		/** Green tokens over the platform palettes. Every value states both schemes. */
+		const VERDANT_TOKENS = Object.freeze({
+			"--qilin-alias-brand-primary": {
+				light: "#2f6b4b",
+				dark: "#8fd0a8"
+			},
+			"--qilin-alias-button-primary-hover": {
+				light: "#24553b",
+				dark: "#aee3c1"
+			},
+			"--qilin-alias-link": {
+				light: "#2a5a40",
+				dark: "#b7e6c8"
+			},
+			"--qilin-alias-bg-base": {
+				light: "#f1f6f2",
+				dark: "#0a120e"
+			},
+			"--qilin-alias-bg-layer-1": {
+				light: "#fbfdfb",
+				dark: "#101a14"
+			},
+			"--qilin-alias-bg-layer-2": {
+				light: "#fbfdfb",
+				dark: "#16221a"
+			},
+			"--qilin-alias-bg-layer-3": {
+				light: "#fbfdfb",
+				dark: "#1d2b21"
+			},
+			"--qilin-alias-bg-overlay": {
+				light: "#e2ebe4",
+				dark: "#3c4f43"
+			},
+			"--qilin-alias-bg-skeleton": {
+				light: "rgba(20, 60, 40, 0.06)",
+				dark: "rgba(210, 235, 220, 0.08)"
+			},
+			"--qilin-specific-sidebar-fill": {
+				light: "#e9f1ea",
+				dark: "#0a120e"
+			},
+			"--qilin-specific-sidebar-nav-item-hover": {
+				light: "#e2ece4",
+				dark: "#152018"
+			},
+			"--qilin-specific-sidebar-nav-item-active": {
+				light: "#d9e7dc",
+				dark: "#1d2b21"
+			},
+			"--qilin-specific-sidebar-nav-item-active-accent": {
+				light: "#2f6b4b",
+				dark: "#8fd0a8"
+			},
+			"--qilin-specific-bubble": {
+				light: "#eaf2ec",
+				dark: "#18251c"
+			},
+			"--qilin-specific-input-major": {
+				light: "#fcfefc",
+				dark: "#14201a"
+			},
+			"--qilin-specific-selector": {
+				light: "#eef4ef",
+				dark: "#1d2b21"
+			},
+			"--qilin-specific-tip": {
+				light: "#eef4ef",
+				dark: "#1d2b21"
+			},
+			"--qilin-alias-toast-bg": {
+				light: "#1f2a24",
+				dark: "#1f2c24"
+			},
+			"--qilin-alias-tooltip-bg": {
+				light: "#1a241f",
+				dark: "#1f2c24"
+			},
+			"--qilin-alias-label-primary": {
+				light: "#16211b",
+				dark: "#e4f0e7"
+			},
+			"--qilin-alias-label-primary-dimmed": {
+				light: "#24322a",
+				dark: "#cfe0d4"
+			},
+			"--qilin-alias-label-secondary": {
+				light: "#4f6157",
+				dark: "#9db3a4"
+			},
+			"--qilin-alias-label-tertiary": {
+				light: "#76877c",
+				dark: "#7f9487"
+			},
+			"--qilin-alias-label-caption": {
+				light: "#8a998f",
+				dark: "#64796b"
+			},
+			"--qilin-alias-label-dimmed": {
+				light: "#c8d5cb",
+				dark: "#42544a"
+			},
+			"--qilin-alias-label-primary-inverted": {
+				light: "#fbfdfb",
+				dark: "#14201a"
+			},
+			"--qilin-alias-border-l1": {
+				light: "rgba(28, 58, 42, 0.07)",
+				dark: "rgba(210, 235, 220, 0.07)"
+			},
+			"--qilin-alias-border-l2": {
+				light: "rgba(28, 58, 42, 0.11)",
+				dark: "rgba(210, 235, 220, 0.12)"
+			},
+			"--qilin-alias-border-l2-darkmode-thin": {
+				light: "rgba(28, 58, 42, 0.11)",
+				dark: "rgba(210, 235, 220, 0.07)"
+			},
+			"--qilin-alias-border-l3": {
+				light: "rgba(28, 58, 42, 0.13)",
+				dark: "rgba(210, 235, 220, 0.16)"
+			},
+			"--qilin-alias-border-l4": {
+				light: "rgba(28, 58, 42, 0.17)",
+				dark: "rgba(210, 235, 220, 0.20)"
+			},
+			"--qilin-alias-border-inverted": {
+				light: "rgba(28, 58, 42, 0)",
+				dark: "rgba(210, 235, 220, 0.06)"
+			},
+			"--qilin-alias-border-inverted2": {
+				light: "rgba(28, 58, 42, 0)",
+				dark: "rgba(210, 235, 220, 0.08)"
+			},
+			"--qilin-alias-interactive-bg-hover": {
+				light: "rgba(28, 58, 42, 0.08)",
+				dark: "rgba(210, 235, 220, 0.08)"
+			},
+			"--qilin-alias-interactive-bg-active": {
+				light: "rgba(28, 58, 42, 0.13)",
+				dark: "rgba(210, 235, 220, 0.14)"
+			},
+			"--qilin-alias-interactive-bg-hover-accent": {
+				light: "rgba(28, 58, 42, 0.14)",
+				dark: "rgba(210, 235, 220, 0.24)"
+			},
+			"--qilin-alias-interactive-bg-hover-solid": {
+				light: "#eaf2ec",
+				dark: "#1d2b21"
+			},
+			"--qilin-alias-button-contrast-fill": {
+				light: "#4f6157",
+				dark: "#e4f0e7"
+			},
+			"--qilin-alias-button-elevated-fill": {
+				light: "#fcfefc",
+				dark: "#1f2c24"
+			},
+			"--qilin-alias-button-floating-fill": {
+				light: "#fcfefc",
+				dark: "#18251c"
+			},
+			"--qilin-alias-button-floating-hover": {
+				light: "#eef4ef",
+				dark: "#1d2b21"
+			},
+			"--qilin-alias-button-ghost-active-fill": {
+				light: "#eaf2ec",
+				dark: "#1f2c24"
+			},
+			"--qilin-alias-button-ghost-active-hover": {
+				light: "#e2ece4",
+				dark: "#27362c"
+			},
+			"--qilin-alias-button-ghost-active-border": {
+				light: "#8fa096",
+				dark: "#5f7466"
+			},
+			"--qilin-alias-button-tool-bar-fill": {
+				light: "rgba(90, 110, 98, 0.5)",
+				dark: "rgba(140, 165, 150, 0.4)"
+			},
+			"--qilin-alias-button-tool-bar-hover": {
+				light: "rgba(90, 110, 98, 0.6)",
+				dark: "rgba(140, 165, 150, 0.5)"
+			},
+			"--qilin-alias-button-tool-bar-fill-invisible": {
+				light: "rgba(28, 58, 42, 0.36)",
+				dark: "rgba(35, 50, 42, 0.36)"
+			},
+			"--qilin-alias-markdown-code-block": {
+				light: "#e9f1ea",
+				dark: "#0f1a13"
+			},
+			"--qilin-alias-markdown-code-block-banner": {
+				light: "#e2ece4",
+				dark: "#16221a"
+			},
+			"--qilin-alias-markdown-inline-code": {
+				light: "#e8f0e9",
+				dark: "#18251c"
+			},
+			"--qilin-alias-markdown-citation": {
+				light: "#e4eee6",
+				dark: "#18251c"
+			},
+			"--qilin-alias-markdown-tag": {
+				light: "#e8f0e9",
+				dark: "#14201a"
+			},
+			"--qilin-alias-scrollbar-bg-l1": {
+				light: "#d3e0d6",
+				dark: "#39493f"
+			},
+			"--qilin-alias-scrollbar-bg-l2": {
+				light: "#c5d5c9",
+				dark: "#4a5c50"
+			},
+			"--qilin-alias-scrollbar-hover-l1": {
+				light: "#c5d5c9",
+				dark: "#4a5c50"
+			},
+			"--qilin-alias-scrollbar-hover-l2": {
+				light: "#b7cabd",
+				dark: "#5a6d60"
+			}
+		});
+		/** The green pack as one selectable skin. */
+		const VERDANT_PACK = Object.freeze({
+			id: "verdant",
+			label: Object.freeze({
+				zh: "墨绿",
+				en: "Verdant"
+			}),
+			boot: Object.freeze({
+				light: "#f1f6f2",
+				dark: "#0a120e"
+			}),
+			tokens: VERDANT_TOKENS
+		});
+		//#endregion
+		//#region lib/types/skin.js
+		/**
+		* The shipped color packs, shared by the node and browser halves.
+		*
+		* A pack is one selectable skin: an id, a provider-owned label, the canvas
+		* colors the pre-plugin index render paints, and the alias-token overrides for
+		* both base palettes. Packs are identified by their palette, never by a
+		* product name, so a composition can pick any of them without exposing who
+		* uses it.
+		*/
+		/** Every shipped pack, in appearance-row order. */
+		const SKIN_PACKS = Object.freeze([
+			QILIN_PACK,
+			MONO_PACK,
+			VERDANT_PACK
+		]);
+		QILIN_PACK.id;
+		QILIN_PACK.label;
+		QILIN_PACK.boot;
 		//#endregion
 		//#region lib/types/client/index.js
-		/** QiLin brand color layer for the Web client theme. */
-		/** Required service: the theme registry and override stack. */
+		/** Color packs for the Web client theme: every shipped pack registers as one selectable skin. */
+		/** Required service: the theme registry and its skin registry. */
 		const inject = ["theme"];
 		/**
-		* Stack the QiLin brand layer over whatever palette the user selected. The
-		* layer is an effect, so unloading the plugin restores the covered tokens.
+		* Register every shipped color pack as a selectable skin. Light/dark selection
+		* stays the user's; a skin only replaces the alias tokens it names. Registration
+		* is an effect, so unloading the plugin removes every skin and restores the
+		* platform palette while the durable selection survives for a later load.
 		* @param ctx - Client root context.
 		*/
 		function apply(ctx) {
-			ctx.effect(() => ctx.theme.overrideTokens(QILIN_THEME_SOURCE, QILIN_TOKENS), "qilin: brand tokens");
+			for (const pack of SKIN_PACKS) ctx.effect(() => ctx.theme.registerSkin({
+				id: pack.id,
+				label: pack.label,
+				tokens: pack.tokens
+			}), `ui-theme-brand: ${pack.id} skin`);
 		}
 		//#endregion
 		exports.apply = apply;