@qilin-agent/client-ui-theme-brand 0.0.0-stage → 3.1.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/LICENSE +21 -0
- package/README.i18n.yaml +31 -0
- package/README.md +58 -2
- package/README.zh.md +59 -0
- package/lib/client.js +284 -0
- package/lib/index.js +9 -0
- package/lib/types/client/index.d.ts +11 -0
- package/lib/types/client/tokens.d.ts +29 -0
- package/lib/types/index.d.ts +7 -0
- package/package.json +54 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 kkutysllb
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.i18n.yaml
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Bilingual-pair consistency record for README.md (docs/i18n/README.md): per heading
|
|
2
|
+
# section, a hash of its English and Chinese blocks outside code blocks and generated regions.
|
|
3
|
+
# After editing either side, bring the other along and re-record with:
|
|
4
|
+
# pnpm run verify-translation-pairing --write packages/client/ui-theme-brand/README.md
|
|
5
|
+
/:
|
|
6
|
+
en: 6e9bd51222d0dc75
|
|
7
|
+
zh: e0d8fcb968e24d8c
|
|
8
|
+
/qilin-client-ui-theme-brand:
|
|
9
|
+
en: f2f70faeba42aaf1
|
|
10
|
+
zh: 1e2a0cb78aa1d261
|
|
11
|
+
/qilin-client-ui-theme-brand/summary:
|
|
12
|
+
en: eb3a4cf2b15b5ad5
|
|
13
|
+
zh: 6d773ac60447620c
|
|
14
|
+
/qilin-client-ui-theme-brand/table-of-contents:
|
|
15
|
+
en: 4e53164159b5ce41
|
|
16
|
+
zh: 024420bdbdd3e0ac
|
|
17
|
+
/qilin-client-ui-theme-brand/use-this-package:
|
|
18
|
+
en: c2af5a84d31b6e79
|
|
19
|
+
zh: 842ee12706f09677
|
|
20
|
+
/qilin-client-ui-theme-brand/dev-note:
|
|
21
|
+
en: f3c698886ef928a7
|
|
22
|
+
zh: eaac63c14c20b932
|
|
23
|
+
/qilin-client-ui-theme-brand/model-experience:
|
|
24
|
+
en: 387945fb175a89ea
|
|
25
|
+
zh: f4ba5dcf2b061ba9
|
|
26
|
+
/qilin-client-ui-theme-brand/model-experience/kv-cache-effect:
|
|
27
|
+
en: d47c23dd182c8c5a
|
|
28
|
+
zh: db61ce21c1c13a37
|
|
29
|
+
/qilin-client-ui-theme-brand/known-limitations-and-deferred-work:
|
|
30
|
+
en: 1150cee32a1c48b8
|
|
31
|
+
zh: 4c96c5b1e497637d
|
package/README.md
CHANGED
|
@@ -1,3 +1,59 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
description: "QiLin brand color layer for the Web client: alias-token overrides stacked over the user's active light or dark palette."
|
|
3
|
+
kind: "package-reference"
|
|
4
|
+
---
|
|
2
5
|
|
|
3
|
-
|
|
6
|
+
# @qilin-agent/client-ui-theme-brand
|
|
7
|
+
|
|
8
|
+
English | [中文](README.zh.md)
|
|
9
|
+
|
|
10
|
+
## Summary
|
|
11
|
+
|
|
12
|
+
Mount this plugin beside [`ui-theme`](../ui-theme/README.md) to give the QiLin Web surface its own brand colors. The plugin registers one `ctx.theme` override layer: the user's `light`, `dark`, or `system` preference and every base token stay untouched, and only the tokens QiLin owns are replaced. Unloading the plugin restores the covered tokens because the layer is a Kylin effect.
|
|
13
|
+
|
|
14
|
+
## Table of Contents
|
|
15
|
+
|
|
16
|
+
- [Use this package](#use-this-package)
|
|
17
|
+
- [Model Experience](#model-experience)
|
|
18
|
+
- [Known Limitations and Deferred Work](#known-limitations-and-deferred-work)
|
|
19
|
+
- [Dev Note](#dev-note)
|
|
20
|
+
|
|
21
|
+
-----
|
|
22
|
+
|
|
23
|
+
<a id="use-this-package"></a>
|
|
24
|
+
## Use this package
|
|
25
|
+
|
|
26
|
+
The `qilin` profile mounts this package through its bundle patch, so no configuration is required. A deployment that wants the QiLin palette with a different base theme keeps its own `ui-theme` preference; this layer composes on top of it.
|
|
27
|
+
|
|
28
|
+
The palette is the "Xuanjin" dark-gold landing VI in both schemes: the dark values transplant the landing tokens verbatim, the light values derive the warm-paper counterpart ([decision note](../../../.agents/notes/implemented/architecture/2026-09-14-xuanjin-dual-scheme-palette.md)). Fifty-five tokens are grouped by family in [tokens.ts](src/client/tokens.ts): brand gold, surfaces and sidebar, ink labels, hairlines and hovers, the secondary button family, and the code/scrollbar reading surfaces.
|
|
29
|
+
|
|
30
|
+
| Role | Token | Light | Dark |
|
|
31
|
+
|---|---|---|---|
|
|
32
|
+
| Accent | `--qilin-alias-brand-primary` | `#8f6f2e` (gold-700) | `#c9a24a` (gold-500) |
|
|
33
|
+
| Canvas | `--qilin-alias-bg-base` | `#f8f5ee` (paper) | `#0d0b09` (landing bg) |
|
|
34
|
+
| Sidebar | `--qilin-specific-sidebar-fill` | `#f1ece0` | `#0d0b09` |
|
|
35
|
+
| Link | `--qilin-alias-link` | `#7d6126` (5.3:1 on paper) | `#f3dc9e` (14.5:1) |
|
|
36
|
+
| Seal | `--qilin-specific-brand-seal-fill` | `#c3402f` | `#d4503d` |
|
|
37
|
+
|
|
38
|
+
Feature components consume these through the `--qilin-alias-*` aliases they already use, so the palette reaches the sidebar, composer, conversation, and deliverables without any component being aware of QiLin. Hover keeps each platform's convention (dark brightens toward gold-300, light deepens toward the link gold), state colors and the ongoing blue stay with the base palettes, and `--qilin-specific-brand-seal-fill` carries the seal's own cinnabar for surfaces that must match the stamp; its two values are stops of the seal gradient in `ui-brand`.
|
|
39
|
+
|
|
40
|
+
<a id="dev-note"></a>
|
|
41
|
+
## Dev Note
|
|
42
|
+
|
|
43
|
+
None.
|
|
44
|
+
|
|
45
|
+
<a id="model-experience"></a>
|
|
46
|
+
## Model Experience
|
|
47
|
+
|
|
48
|
+
None, as colors are browser presentation and never enter a model request or the session log.
|
|
49
|
+
|
|
50
|
+
#### KV Cache effect
|
|
51
|
+
|
|
52
|
+
None; the theme contributes no prompt text.
|
|
53
|
+
|
|
54
|
+
## Known Limitations and Deferred Work
|
|
55
|
+
|
|
56
|
+
<a id="known-limitations-and-deferred-work"></a>
|
|
57
|
+
|
|
58
|
+
- Tokens without a current component consumer stay with the base palettes; a future consumer that needs the warm values joins this layer rather than re-deriving them.
|
|
59
|
+
- The shipped spec exercises the production theme runtime and its override stack. A booted-Web-surface assertion for this layer is not in place yet; the assembled-surface check is manual.
|
package/README.zh.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "QiLin 在 Web 客户端上的品牌配色层:以别名令牌覆盖叠加在用户当前浅色或深色配色之上。"
|
|
3
|
+
kind: "package-reference"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# @qilin-agent/client-ui-theme-brand
|
|
7
|
+
|
|
8
|
+
[English](README.md) | 中文
|
|
9
|
+
|
|
10
|
+
## 概述
|
|
11
|
+
|
|
12
|
+
把本插件挂在 [`ui-theme`](../ui-theme/README.zh.md) 旁边,即可让 QiLin Web 表面拥有自己的品牌配色。插件注册一个 `ctx.theme` 覆盖层:用户的 `light`、`dark` 或 `system` 偏好与全部基础令牌保持不变,只替换 QiLin 拥有的令牌。由于该层是 Kylin effect,卸载插件即恢复被覆盖的令牌。
|
|
13
|
+
|
|
14
|
+
## 目录
|
|
15
|
+
|
|
16
|
+
- [使用本包](#use-this-package)
|
|
17
|
+
- [模型体验](#model-experience)
|
|
18
|
+
- [已知限制与待办](#known-limitations-and-deferred-work)
|
|
19
|
+
- [开发说明](#dev-note)
|
|
20
|
+
|
|
21
|
+
-----
|
|
22
|
+
|
|
23
|
+
<a id="use-this-package"></a>
|
|
24
|
+
## 使用本包
|
|
25
|
+
|
|
26
|
+
`qilin` profile 通过其 bundle 补丁挂载本包,无需配置。若部署方希望保留其他基础主题并使用 QiLin 配色,保留自己的 `ui-theme` 偏好即可;本层叠加在其上。
|
|
27
|
+
|
|
28
|
+
配色为「玄金」暗金 landing VI 的双 scheme 版本:深色值逐字移植 landing 令牌,浅色值推导暖纸对应版([决策笔记](../../../.agents/notes/implemented/architecture/2026-09-14-xuanjin-dual-scheme-palette.zh.md))。[tokens.ts](src/client/tokens.ts) 按族分组覆盖五十五个令牌:品牌金、表面与侧栏、墨阶文字、细线与悬停、次级按钮族、代码与滚动条阅读面。
|
|
29
|
+
|
|
30
|
+
| 角色 | 令牌 | 浅色 | 深色 |
|
|
31
|
+
|---|---|---|---|
|
|
32
|
+
| 强调色 | `--qilin-alias-brand-primary` | `#8f6f2e`(gold-700) | `#c9a24a`(gold-500) |
|
|
33
|
+
| 画布 | `--qilin-alias-bg-base` | `#f8f5ee`(纸白) | `#0d0b09`(landing 底色) |
|
|
34
|
+
| 侧栏 | `--qilin-specific-sidebar-fill` | `#f1ece0` | `#0d0b09` |
|
|
35
|
+
| 链接 | `--qilin-alias-link` | `#7d6126`(纸面 5.3:1) | `#f3dc9e`(14.5:1) |
|
|
36
|
+
| 印章 | `--qilin-specific-brand-seal-fill` | `#c3402f` | `#d4503d` |
|
|
37
|
+
|
|
38
|
+
功能组件通过既有的 `--qilin-alias-*` 别名消费这些令牌,因此配色可到达侧边栏、输入框、会话与交付物,而任何组件都无需感知 QiLin。悬停遵循各平台惯例(深色向 gold-300 变亮,浅色向链接金加深),状态色与进行中蓝保留基础配色,`--qilin-specific-brand-seal-fill` 则为需要与印记一致的表面携带印章自身的朱砂;它的两个取值都是 `ui-brand` 中印章渐变的色标。
|
|
39
|
+
|
|
40
|
+
<a id="dev-note"></a>
|
|
41
|
+
## 开发备注
|
|
42
|
+
|
|
43
|
+
无。
|
|
44
|
+
|
|
45
|
+
<a id="model-experience"></a>
|
|
46
|
+
## 模型体验
|
|
47
|
+
|
|
48
|
+
无;颜色属于浏览器呈现,不进入模型请求或会话日志。
|
|
49
|
+
|
|
50
|
+
#### KV Cache 影响
|
|
51
|
+
|
|
52
|
+
无;主题不贡献任何提示文本。
|
|
53
|
+
|
|
54
|
+
## 已知限制与待办
|
|
55
|
+
|
|
56
|
+
<a id="known-limitations-and-deferred-work"></a>
|
|
57
|
+
|
|
58
|
+
- 无当前组件消费者的令牌留在基础配色;未来需要暖色值的消费者应并入本层,而不是重新推导。
|
|
59
|
+
- 随附规格跑在生产主题运行时及其覆盖栈上。针对本层的启动后 Web 表面断言尚未建立,组装面的检查目前为手工执行。
|
package/lib/client.js
ADDED
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
window.__ModuleLoader__.load({
|
|
2
|
+
id: "@qilin-agent/client-ui-theme-brand",
|
|
3
|
+
factory: (require) => {
|
|
4
|
+
var module = { exports: {} };
|
|
5
|
+
var exports = module.exports;
|
|
6
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
7
|
+
//#region lib/types/client/tokens.js
|
|
8
|
+
/**
|
|
9
|
+
* QiLin alias-token overrides, applied as one layer over the active palette.
|
|
10
|
+
*
|
|
11
|
+
* The palette is the "玄金麒麟" (dark-gold) landing VI extended to both
|
|
12
|
+
* schemes: the dark values transplant the landing page's tokens verbatim
|
|
13
|
+
* (apps/web/src/landing/landing.css), the light values derive the matching
|
|
14
|
+
* warm-paper variant because the landing VI ships no light mode. Accent
|
|
15
|
+
* contrast is WCAG AA verified: the deep link gold #7d6126 clears 5.3:1 on
|
|
16
|
+
* paper #f8f5ee where the VI's gold-700 #8f6f2e reaches only 4.3:1, and
|
|
17
|
+
* white on gold-700 (light primary buttons) holds 4.7:1.
|
|
18
|
+
*
|
|
19
|
+
* Omitted on purpose: state colors (error/success/warn/info), the ongoing
|
|
20
|
+
* blue state-business family (kept distinct from warn amber), masks, and
|
|
21
|
+
* tokens with no current component consumer. Hover follows each platform's
|
|
22
|
+
* convention: dark schemes brighten (landing CTA gold-500 -> gold-300),
|
|
23
|
+
* light schemes darken (gold-700 -> #7d6126).
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* The layer source id. One layer per source, so this names the origin in
|
|
27
|
+
* `ctx.theme` inspection and makes re-application replace rather than stack.
|
|
28
|
+
*/
|
|
29
|
+
const QILIN_THEME_SOURCE = "@qilin-agent/client-ui-theme-brand";
|
|
30
|
+
/**
|
|
31
|
+
* QiLin's brand tokens over the platform palettes. Every value states both
|
|
32
|
+
* schemes (the ThemeTokenModes contract), grouped by surface family.
|
|
33
|
+
*/
|
|
34
|
+
const QILIN_TOKENS = Object.freeze({
|
|
35
|
+
"--qilin-alias-brand-primary": {
|
|
36
|
+
light: "#8f6f2e",
|
|
37
|
+
dark: "#c9a24a"
|
|
38
|
+
},
|
|
39
|
+
"--qilin-alias-button-primary-hover": {
|
|
40
|
+
light: "#7d6126",
|
|
41
|
+
dark: "#f3dc9e"
|
|
42
|
+
},
|
|
43
|
+
"--qilin-alias-link": {
|
|
44
|
+
light: "#7d6126",
|
|
45
|
+
dark: "#f3dc9e"
|
|
46
|
+
},
|
|
47
|
+
"--qilin-alias-bg-base": {
|
|
48
|
+
light: "#f8f5ee",
|
|
49
|
+
dark: "#0d0b09"
|
|
50
|
+
},
|
|
51
|
+
"--qilin-alias-bg-layer-1": {
|
|
52
|
+
light: "#fdfbf5",
|
|
53
|
+
dark: "#16130f"
|
|
54
|
+
},
|
|
55
|
+
"--qilin-alias-bg-layer-2": {
|
|
56
|
+
light: "#fdfbf5",
|
|
57
|
+
dark: "#1d1915"
|
|
58
|
+
},
|
|
59
|
+
"--qilin-alias-bg-layer-3": {
|
|
60
|
+
light: "#fdfbf5",
|
|
61
|
+
dark: "#26211c"
|
|
62
|
+
},
|
|
63
|
+
"--qilin-alias-bg-overlay": {
|
|
64
|
+
light: "#e9e3d6",
|
|
65
|
+
dark: "#4f4939"
|
|
66
|
+
},
|
|
67
|
+
"--qilin-alias-bg-skeleton": {
|
|
68
|
+
light: "rgba(64, 52, 30, 0.06)",
|
|
69
|
+
dark: "rgba(239, 233, 223, 0.08)"
|
|
70
|
+
},
|
|
71
|
+
"--qilin-specific-sidebar-fill": {
|
|
72
|
+
light: "#f1ece0",
|
|
73
|
+
dark: "#0d0b09"
|
|
74
|
+
},
|
|
75
|
+
"--qilin-specific-sidebar-nav-item-hover": {
|
|
76
|
+
light: "#ede7d9",
|
|
77
|
+
dark: "#1a1611"
|
|
78
|
+
},
|
|
79
|
+
"--qilin-specific-sidebar-nav-item-active": {
|
|
80
|
+
light: "#e8e1d0",
|
|
81
|
+
dark: "#221d16"
|
|
82
|
+
},
|
|
83
|
+
"--qilin-specific-sidebar-nav-item-active-accent": {
|
|
84
|
+
light: "#8f6f2e",
|
|
85
|
+
dark: "#c9a24a"
|
|
86
|
+
},
|
|
87
|
+
"--qilin-specific-bubble": {
|
|
88
|
+
light: "#f3edde",
|
|
89
|
+
dark: "#221d17"
|
|
90
|
+
},
|
|
91
|
+
"--qilin-specific-input-major": {
|
|
92
|
+
light: "#fffdf8",
|
|
93
|
+
dark: "#211c16"
|
|
94
|
+
},
|
|
95
|
+
"--qilin-specific-selector": {
|
|
96
|
+
light: "#f4f0e6",
|
|
97
|
+
dark: "#26211c"
|
|
98
|
+
},
|
|
99
|
+
"--qilin-specific-tip": {
|
|
100
|
+
light: "#f4f0e6",
|
|
101
|
+
dark: "#26211c"
|
|
102
|
+
},
|
|
103
|
+
"--qilin-alias-toast-bg": {
|
|
104
|
+
light: "#2c261d",
|
|
105
|
+
dark: "#2b251d"
|
|
106
|
+
},
|
|
107
|
+
"--qilin-alias-tooltip-bg": {
|
|
108
|
+
light: "#241f17",
|
|
109
|
+
dark: "#2b251d"
|
|
110
|
+
},
|
|
111
|
+
"--qilin-alias-label-primary": {
|
|
112
|
+
light: "#221d15",
|
|
113
|
+
dark: "#efe9df"
|
|
114
|
+
},
|
|
115
|
+
"--qilin-alias-label-primary-dimmed": {
|
|
116
|
+
light: "#332c21",
|
|
117
|
+
dark: "#ded6c8"
|
|
118
|
+
},
|
|
119
|
+
"--qilin-alias-label-secondary": {
|
|
120
|
+
light: "#5f5749",
|
|
121
|
+
dark: "#a89f90"
|
|
122
|
+
},
|
|
123
|
+
"--qilin-alias-label-tertiary": {
|
|
124
|
+
light: "#857c6c",
|
|
125
|
+
dark: "#8a8172"
|
|
126
|
+
},
|
|
127
|
+
"--qilin-alias-label-caption": {
|
|
128
|
+
light: "#988e7c",
|
|
129
|
+
dark: "#75705f"
|
|
130
|
+
},
|
|
131
|
+
"--qilin-alias-label-dimmed": {
|
|
132
|
+
light: "#d3ccbc",
|
|
133
|
+
dark: "#4f4a3f"
|
|
134
|
+
},
|
|
135
|
+
"--qilin-alias-label-primary-inverted": {
|
|
136
|
+
light: "#fdfbf5",
|
|
137
|
+
dark: "#221d15"
|
|
138
|
+
},
|
|
139
|
+
"--qilin-alias-border-l1": {
|
|
140
|
+
light: "rgba(60, 48, 26, 0.07)",
|
|
141
|
+
dark: "rgba(239, 233, 223, 0.07)"
|
|
142
|
+
},
|
|
143
|
+
"--qilin-alias-border-l2": {
|
|
144
|
+
light: "rgba(60, 48, 26, 0.11)",
|
|
145
|
+
dark: "rgba(239, 233, 223, 0.12)"
|
|
146
|
+
},
|
|
147
|
+
"--qilin-alias-border-l2-darkmode-thin": {
|
|
148
|
+
light: "rgba(60, 48, 26, 0.11)",
|
|
149
|
+
dark: "rgba(239, 233, 223, 0.07)"
|
|
150
|
+
},
|
|
151
|
+
"--qilin-alias-border-l3": {
|
|
152
|
+
light: "rgba(60, 48, 26, 0.13)",
|
|
153
|
+
dark: "rgba(239, 233, 223, 0.16)"
|
|
154
|
+
},
|
|
155
|
+
"--qilin-alias-border-l4": {
|
|
156
|
+
light: "rgba(60, 48, 26, 0.17)",
|
|
157
|
+
dark: "rgba(239, 233, 223, 0.20)"
|
|
158
|
+
},
|
|
159
|
+
"--qilin-alias-border-inverted": {
|
|
160
|
+
light: "rgba(60, 48, 26, 0)",
|
|
161
|
+
dark: "rgba(239, 233, 223, 0.06)"
|
|
162
|
+
},
|
|
163
|
+
"--qilin-alias-border-inverted2": {
|
|
164
|
+
light: "rgba(60, 48, 26, 0)",
|
|
165
|
+
dark: "rgba(239, 233, 223, 0.08)"
|
|
166
|
+
},
|
|
167
|
+
"--qilin-alias-interactive-bg-hover": {
|
|
168
|
+
light: "rgba(101, 82, 40, 0.08)",
|
|
169
|
+
dark: "rgba(239, 233, 223, 0.08)"
|
|
170
|
+
},
|
|
171
|
+
"--qilin-alias-interactive-bg-active": {
|
|
172
|
+
light: "rgba(101, 82, 40, 0.13)",
|
|
173
|
+
dark: "rgba(239, 233, 223, 0.14)"
|
|
174
|
+
},
|
|
175
|
+
"--qilin-alias-interactive-bg-hover-accent": {
|
|
176
|
+
light: "rgba(101, 82, 40, 0.14)",
|
|
177
|
+
dark: "rgba(239, 233, 223, 0.24)"
|
|
178
|
+
},
|
|
179
|
+
"--qilin-alias-interactive-bg-hover-solid": {
|
|
180
|
+
light: "#f0ebdf",
|
|
181
|
+
dark: "#26211c"
|
|
182
|
+
},
|
|
183
|
+
"--qilin-alias-button-contrast-fill": {
|
|
184
|
+
light: "#5f5749",
|
|
185
|
+
dark: "#efe9df"
|
|
186
|
+
},
|
|
187
|
+
"--qilin-alias-button-elevated-fill": {
|
|
188
|
+
light: "#fffdf8",
|
|
189
|
+
dark: "#2b251c"
|
|
190
|
+
},
|
|
191
|
+
"--qilin-alias-button-floating-fill": {
|
|
192
|
+
light: "#fffdf8",
|
|
193
|
+
dark: "#211c16"
|
|
194
|
+
},
|
|
195
|
+
"--qilin-alias-button-floating-hover": {
|
|
196
|
+
light: "#f0ebdf",
|
|
197
|
+
dark: "#26211c"
|
|
198
|
+
},
|
|
199
|
+
"--qilin-alias-button-ghost-active-fill": {
|
|
200
|
+
light: "#f0ebdf",
|
|
201
|
+
dark: "#2b251c"
|
|
202
|
+
},
|
|
203
|
+
"--qilin-alias-button-ghost-active-hover": {
|
|
204
|
+
light: "#e9e3d4",
|
|
205
|
+
dark: "#332c22"
|
|
206
|
+
},
|
|
207
|
+
"--qilin-alias-button-ghost-active-border": {
|
|
208
|
+
light: "#9a9080",
|
|
209
|
+
dark: "#77705f"
|
|
210
|
+
},
|
|
211
|
+
"--qilin-alias-button-tool-bar-fill": {
|
|
212
|
+
light: "rgba(96, 88, 70, 0.5)",
|
|
213
|
+
dark: "rgba(140, 128, 100, 0.4)"
|
|
214
|
+
},
|
|
215
|
+
"--qilin-alias-button-tool-bar-hover": {
|
|
216
|
+
light: "rgba(96, 88, 70, 0.6)",
|
|
217
|
+
dark: "rgba(140, 128, 100, 0.5)"
|
|
218
|
+
},
|
|
219
|
+
"--qilin-alias-button-tool-bar-fill-invisible": {
|
|
220
|
+
light: "rgba(60, 48, 26, 0.36)",
|
|
221
|
+
dark: "rgba(45, 40, 31, 0.36)"
|
|
222
|
+
},
|
|
223
|
+
"--qilin-alias-markdown-code-block": {
|
|
224
|
+
light: "#f4efe3",
|
|
225
|
+
dark: "#191511"
|
|
226
|
+
},
|
|
227
|
+
"--qilin-alias-markdown-code-block-banner": {
|
|
228
|
+
light: "#efe9da",
|
|
229
|
+
dark: "#211c16"
|
|
230
|
+
},
|
|
231
|
+
"--qilin-alias-markdown-inline-code": {
|
|
232
|
+
light: "#f3eee0",
|
|
233
|
+
dark: "#221d17"
|
|
234
|
+
},
|
|
235
|
+
"--qilin-alias-markdown-citation": {
|
|
236
|
+
light: "#efe9db",
|
|
237
|
+
dark: "#221d17"
|
|
238
|
+
},
|
|
239
|
+
"--qilin-alias-markdown-tag": {
|
|
240
|
+
light: "#f1ecdf",
|
|
241
|
+
dark: "#211c16"
|
|
242
|
+
},
|
|
243
|
+
"--qilin-alias-scrollbar-bg-l1": {
|
|
244
|
+
light: "#e3dccb",
|
|
245
|
+
dark: "#4a4336"
|
|
246
|
+
},
|
|
247
|
+
"--qilin-alias-scrollbar-bg-l2": {
|
|
248
|
+
light: "#e3dccb",
|
|
249
|
+
dark: "#57503f"
|
|
250
|
+
},
|
|
251
|
+
"--qilin-alias-scrollbar-hover-l1": {
|
|
252
|
+
light: "#d5ccb6",
|
|
253
|
+
dark: "#57503f"
|
|
254
|
+
},
|
|
255
|
+
"--qilin-alias-scrollbar-hover-l2": {
|
|
256
|
+
light: "#d5ccb6",
|
|
257
|
+
dark: "#665f4c"
|
|
258
|
+
},
|
|
259
|
+
"--qilin-specific-brand-seal-fill": {
|
|
260
|
+
light: "#c3402f",
|
|
261
|
+
dark: "#d4503d"
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
//#endregion
|
|
265
|
+
//#region lib/types/client/index.js
|
|
266
|
+
/** QiLin brand color layer for the Web client theme. */
|
|
267
|
+
/** Required service: the theme registry and override stack. */
|
|
268
|
+
const inject = ["theme"];
|
|
269
|
+
/**
|
|
270
|
+
* Stack the QiLin brand layer over whatever palette the user selected. The
|
|
271
|
+
* layer is an effect, so unloading the plugin restores the covered tokens.
|
|
272
|
+
* @param ctx - Client root context.
|
|
273
|
+
*/
|
|
274
|
+
function apply(ctx) {
|
|
275
|
+
ctx.effect(() => ctx.theme.overrideTokens(QILIN_THEME_SOURCE, QILIN_TOKENS), "qilin: brand tokens");
|
|
276
|
+
}
|
|
277
|
+
//#endregion
|
|
278
|
+
exports.apply = apply;
|
|
279
|
+
exports.inject = inject;
|
|
280
|
+
return module.exports;
|
|
281
|
+
}
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
//# sourceMappingURL=client.js.map
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//#region lib/types/index.js
|
|
2
|
+
/**
|
|
3
|
+
* QiLin brand color plugin, node half. The empty apply gives Loader a host-side
|
|
4
|
+
* row while the browser half ships through `exports["./client"]`.
|
|
5
|
+
*/
|
|
6
|
+
/** Host plugin body — this package contributes browser presentation only. */
|
|
7
|
+
function apply() {}
|
|
8
|
+
//#endregion
|
|
9
|
+
export { apply };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** QiLin brand color layer for the Web client theme. */
|
|
2
|
+
import type { Context as ClientContext } from '@qilin-agent/kylin';
|
|
3
|
+
/** Required service: the theme registry and override stack. */
|
|
4
|
+
export declare const inject: string[];
|
|
5
|
+
/**
|
|
6
|
+
* Stack the QiLin brand layer over whatever palette the user selected. The
|
|
7
|
+
* layer is an effect, so unloading the plugin restores the covered tokens.
|
|
8
|
+
* @param ctx - Client root context.
|
|
9
|
+
*/
|
|
10
|
+
export declare function apply(ctx: ClientContext): void;
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* QiLin alias-token overrides, applied as one layer over the active palette.
|
|
3
|
+
*
|
|
4
|
+
* The palette is the "玄金麒麟" (dark-gold) landing VI extended to both
|
|
5
|
+
* schemes: the dark values transplant the landing page's tokens verbatim
|
|
6
|
+
* (apps/web/src/landing/landing.css), the light values derive the matching
|
|
7
|
+
* warm-paper variant because the landing VI ships no light mode. Accent
|
|
8
|
+
* contrast is WCAG AA verified: the deep link gold #7d6126 clears 5.3:1 on
|
|
9
|
+
* paper #f8f5ee where the VI's gold-700 #8f6f2e reaches only 4.3:1, and
|
|
10
|
+
* white on gold-700 (light primary buttons) holds 4.7:1.
|
|
11
|
+
*
|
|
12
|
+
* Omitted on purpose: state colors (error/success/warn/info), the ongoing
|
|
13
|
+
* blue state-business family (kept distinct from warn amber), masks, and
|
|
14
|
+
* tokens with no current component consumer. Hover follows each platform's
|
|
15
|
+
* convention: dark schemes brighten (landing CTA gold-500 -> gold-300),
|
|
16
|
+
* light schemes darken (gold-700 -> #7d6126).
|
|
17
|
+
*/
|
|
18
|
+
import type { ThemeTokenOverrides } from '@qilin-agent/client-ui-theme/client';
|
|
19
|
+
/**
|
|
20
|
+
* The layer source id. One layer per source, so this names the origin in
|
|
21
|
+
* `ctx.theme` inspection and makes re-application replace rather than stack.
|
|
22
|
+
*/
|
|
23
|
+
export declare const QILIN_THEME_SOURCE = "@qilin-agent/client-ui-theme-brand";
|
|
24
|
+
/**
|
|
25
|
+
* QiLin's brand tokens over the platform palettes. Every value states both
|
|
26
|
+
* schemes (the ThemeTokenModes contract), grouped by surface family.
|
|
27
|
+
*/
|
|
28
|
+
export declare const QILIN_TOKENS: ThemeTokenOverrides;
|
|
29
|
+
//# sourceMappingURL=tokens.d.ts.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* QiLin brand color plugin, node half. The empty apply gives Loader a host-side
|
|
3
|
+
* row while the browser half ships through `exports["./client"]`.
|
|
4
|
+
*/
|
|
5
|
+
/** Host plugin body — this package contributes browser presentation only. */
|
|
6
|
+
export declare function apply(): void;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,57 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qilin-agent/client-ui-theme-brand",
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"description": "QiLin brand color layer for the Web client theme: alias-token overrides stacked over the user's active palette",
|
|
4
|
+
"version": "3.1.3",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/kkutysllb/QiLin.git",
|
|
11
|
+
"directory": "packages/client/ui-theme-brand"
|
|
12
|
+
},
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": "^22.19.0 || >=24.0.0"
|
|
15
|
+
},
|
|
16
|
+
"type": "module",
|
|
17
|
+
"main": "lib/index.js",
|
|
18
|
+
"types": "lib/types/index.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"types": "./lib/types/index.d.ts",
|
|
22
|
+
"default": "./lib/index.js"
|
|
23
|
+
},
|
|
24
|
+
"./client": {
|
|
25
|
+
"types": "./lib/types/client/index.d.ts",
|
|
26
|
+
"default": "./lib/client.js"
|
|
27
|
+
},
|
|
28
|
+
"./src/*": "./src/*",
|
|
29
|
+
"./package.json": "./package.json"
|
|
30
|
+
},
|
|
31
|
+
"qilin": {
|
|
32
|
+
"client": {
|
|
33
|
+
"inject": [
|
|
34
|
+
"@qilin-agent/client-ui-theme"
|
|
35
|
+
],
|
|
36
|
+
"platform": "web"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"license": "MIT",
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"@qilin-agent/kylin": "~4.0.3"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@qilin-agent/kylin": "~4.0.3",
|
|
45
|
+
"@qilin-agent/client-test-runtime": "3.1.3",
|
|
46
|
+
"@qilin-agent/client-ui-theme": "3.1.3"
|
|
47
|
+
},
|
|
48
|
+
"files": [
|
|
49
|
+
"lib/index.js",
|
|
50
|
+
"lib/client.js",
|
|
51
|
+
"lib/types/**/*.d.ts"
|
|
52
|
+
],
|
|
53
|
+
"scripts": {
|
|
54
|
+
"bundle": "tsdown",
|
|
55
|
+
"watch": "tsdown --watch"
|
|
56
|
+
}
|
|
6
57
|
}
|