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

package/lib/index.js

@@ -1,9 +1,804 @@
+//#region lib/types/packs/qilin.js
+/**
+* The dark-gold color pack: the "玄金" 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
+* 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
+* white on gold-700 (light primary buttons) holds 4.7:1.
+*
+* Omitted on purpose: state colors (error/success/warn/info), the ongoing
+* blue state-business family (kept distinct from warn amber), masks, and
+* tokens with no current component consumer. Hover follows each platform's
+* convention: dark schemes brighten (landing CTA gold-500 -> gold-300),
+* light schemes darken (gold-700 -> #7d6126).
+*/
+/** Dark-gold tokens over the platform palettes. Every value states both schemes. */
+const QILIN_TOKENS = Object.freeze({
+	"--qilin-alias-brand-primary": {
+		light: "#8f6f2e",
+		dark: "#c9a24a"
+	},
+	"--qilin-alias-button-primary-hover": {
+		light: "#7d6126",
+		dark: "#f3dc9e"
+	},
+	"--qilin-alias-link": {
+		light: "#7d6126",
+		dark: "#f3dc9e"
+	},
+	"--qilin-alias-bg-base": {
+		light: "#f8f5ee",
+		dark: "#0d0b09"
+	},
+	"--qilin-alias-bg-layer-1": {
+		light: "#fdfbf5",
+		dark: "#16130f"
+	},
+	"--qilin-alias-bg-layer-2": {
+		light: "#fdfbf5",
+		dark: "#1d1915"
+	},
+	"--qilin-alias-bg-layer-3": {
+		light: "#fdfbf5",
+		dark: "#26211c"
+	},
+	"--qilin-alias-bg-overlay": {
+		light: "#e9e3d6",
+		dark: "#4f4939"
+	},
+	"--qilin-alias-bg-skeleton": {
+		light: "rgba(64, 52, 30, 0.06)",
+		dark: "rgba(239, 233, 223, 0.08)"
+	},
+	"--qilin-specific-sidebar-fill": {
+		light: "#f1ece0",
+		dark: "#0d0b09"
+	},
+	"--qilin-specific-sidebar-nav-item-hover": {
+		light: "#ede7d9",
+		dark: "#1a1611"
+	},
+	"--qilin-specific-sidebar-nav-item-active": {
+		light: "#e8e1d0",
+		dark: "#221d16"
+	},
+	"--qilin-specific-sidebar-nav-item-active-accent": {
+		light: "#8f6f2e",
+		dark: "#c9a24a"
+	},
+	"--qilin-specific-bubble": {
+		light: "#f3edde",
+		dark: "#221d17"
+	},
+	"--qilin-specific-input-major": {
+		light: "#fffdf8",
+		dark: "#211c16"
+	},
+	"--qilin-specific-selector": {
+		light: "#f4f0e6",
+		dark: "#26211c"
+	},
+	"--qilin-specific-tip": {
+		light: "#f4f0e6",
+		dark: "#26211c"
+	},
+	"--qilin-alias-toast-bg": {
+		light: "#2c261d",
+		dark: "#2b251d"
+	},
+	"--qilin-alias-tooltip-bg": {
+		light: "#241f17",
+		dark: "#2b251d"
+	},
+	"--qilin-alias-label-primary": {
+		light: "#221d15",
+		dark: "#efe9df"
+	},
+	"--qilin-alias-label-primary-dimmed": {
+		light: "#332c21",
+		dark: "#ded6c8"
+	},
+	"--qilin-alias-label-secondary": {
+		light: "#5f5749",
+		dark: "#a89f90"
+	},
+	"--qilin-alias-label-tertiary": {
+		light: "#857c6c",
+		dark: "#8a8172"
+	},
+	"--qilin-alias-label-caption": {
+		light: "#988e7c",
+		dark: "#75705f"
+	},
+	"--qilin-alias-label-dimmed": {
+		light: "#d3ccbc",
+		dark: "#4f4a3f"
+	},
+	"--qilin-alias-label-primary-inverted": {
+		light: "#fdfbf5",
+		dark: "#221d15"
+	},
+	"--qilin-alias-border-l1": {
+		light: "rgba(60, 48, 26, 0.07)",
+		dark: "rgba(239, 233, 223, 0.07)"
+	},
+	"--qilin-alias-border-l2": {
+		light: "rgba(60, 48, 26, 0.11)",
+		dark: "rgba(239, 233, 223, 0.12)"
+	},
+	"--qilin-alias-border-l2-darkmode-thin": {
+		light: "rgba(60, 48, 26, 0.11)",
+		dark: "rgba(239, 233, 223, 0.07)"
+	},
+	"--qilin-alias-border-l3": {
+		light: "rgba(60, 48, 26, 0.13)",
+		dark: "rgba(239, 233, 223, 0.16)"
+	},
+	"--qilin-alias-border-l4": {
+		light: "rgba(60, 48, 26, 0.17)",
+		dark: "rgba(239, 233, 223, 0.20)"
+	},
+	"--qilin-alias-border-inverted": {
+		light: "rgba(60, 48, 26, 0)",
+		dark: "rgba(239, 233, 223, 0.06)"
+	},
+	"--qilin-alias-border-inverted2": {
+		light: "rgba(60, 48, 26, 0)",
+		dark: "rgba(239, 233, 223, 0.08)"
+	},
+	"--qilin-alias-interactive-bg-hover": {
+		light: "rgba(101, 82, 40, 0.08)",
+		dark: "rgba(239, 233, 223, 0.08)"
+	},
+	"--qilin-alias-interactive-bg-active": {
+		light: "rgba(101, 82, 40, 0.13)",
+		dark: "rgba(239, 233, 223, 0.14)"
+	},
+	"--qilin-alias-interactive-bg-hover-accent": {
+		light: "rgba(101, 82, 40, 0.14)",
+		dark: "rgba(239, 233, 223, 0.24)"
+	},
+	"--qilin-alias-interactive-bg-hover-solid": {
+		light: "#f0ebdf",
+		dark: "#26211c"
+	},
+	"--qilin-alias-button-contrast-fill": {
+		light: "#5f5749",
+		dark: "#efe9df"
+	},
+	"--qilin-alias-button-elevated-fill": {
+		light: "#fffdf8",
+		dark: "#2b251c"
+	},
+	"--qilin-alias-button-floating-fill": {
+		light: "#fffdf8",
+		dark: "#211c16"
+	},
+	"--qilin-alias-button-floating-hover": {
+		light: "#f0ebdf",
+		dark: "#26211c"
+	},
+	"--qilin-alias-button-ghost-active-fill": {
+		light: "#f0ebdf",
+		dark: "#2b251c"
+	},
+	"--qilin-alias-button-ghost-active-hover": {
+		light: "#e9e3d4",
+		dark: "#332c22"
+	},
+	"--qilin-alias-button-ghost-active-border": {
+		light: "#9a9080",
+		dark: "#77705f"
+	},
+	"--qilin-alias-button-tool-bar-fill": {
+		light: "rgba(96, 88, 70, 0.5)",
+		dark: "rgba(140, 128, 100, 0.4)"
+	},
+	"--qilin-alias-button-tool-bar-hover": {
+		light: "rgba(96, 88, 70, 0.6)",
+		dark: "rgba(140, 128, 100, 0.5)"
+	},
+	"--qilin-alias-button-tool-bar-fill-invisible": {
+		light: "rgba(60, 48, 26, 0.36)",
+		dark: "rgba(45, 40, 31, 0.36)"
+	},
+	"--qilin-alias-markdown-code-block": {
+		light: "#f4efe3",
+		dark: "#191511"
+	},
+	"--qilin-alias-markdown-code-block-banner": {
+		light: "#efe9da",
+		dark: "#211c16"
+	},
+	"--qilin-alias-markdown-inline-code": {
+		light: "#f3eee0",
+		dark: "#221d17"
+	},
+	"--qilin-alias-markdown-citation": {
+		light: "#efe9db",
+		dark: "#221d17"
+	},
+	"--qilin-alias-markdown-tag": {
+		light: "#f1ecdf",
+		dark: "#211c16"
+	},
+	"--qilin-alias-scrollbar-bg-l1": {
+		light: "#e3dccb",
+		dark: "#4a4336"
+	},
+	"--qilin-alias-scrollbar-bg-l2": {
+		light: "#e3dccb",
+		dark: "#57503f"
+	},
+	"--qilin-alias-scrollbar-hover-l1": {
+		light: "#d5ccb6",
+		dark: "#57503f"
+	},
+	"--qilin-alias-scrollbar-hover-l2": {
+		light: "#d5ccb6",
+		dark: "#665f4c"
+	},
+	"--qilin-specific-brand-seal-fill": {
+		light: "#b7352c",
+		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/index.js
 /**
-* QiLin brand color plugin, node half. The empty apply gives Loader a host-side
-* row while the browser half ships through `exports["./client"]`.
+* Color packs, node half: contributes each pack's canvas colors so the
+* pre-plugin index render paints the user's palette before any browser plugin
+* runs. The browser half ships through `exports["./client"]`.
+*/
+/** Required Host services: the boot registry the index render reads. */
+const inject = ["themeBoot"];
+/**
+* Register every shipped pack's canvas colors for the pre-plugin interval.
+* @param ctx - Host plugin context.
 */
-/** Host plugin body — this package contributes browser presentation only. */
-function apply() {}
+function apply(ctx) {
+	for (const pack of SKIN_PACKS) ctx.effect(() => ctx.themeBoot.register(pack.id, pack.boot), `ui-theme-brand: ${pack.id} boot colors`);
+}
 //#endregion
-export { apply };
+export { apply, inject };