@lemoncat7/dsh-theme-xiaohei 0.3.3 → 0.3.5
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/README.md +5 -5
- package/docs/releases/0.3.5.md +7 -0
- package/lib/chrome/conversation-messages.js +22 -0
- package/lib/chrome/sidebar.d.ts +1 -1
- package/lib/chrome/sidebar.js +22 -15
- package/lib/chrome/tokens.d.ts +1 -1
- package/lib/chrome/tokens.js +4 -4
- package/lib/client.js +411 -55
- package/lib/metallic-brand-mark.js +2 -2
- package/lib/scene/character-expression.d.ts +4 -0
- package/lib/scene/character-expression.js +15 -0
- package/lib/scene/character-eye-material.d.ts +13 -0
- package/lib/scene/character-eye-material.js +88 -0
- package/lib/scene/character-eye-renderer.d.ts +5 -0
- package/lib/scene/character-eye-renderer.js +80 -0
- package/lib/scene/character-eye-rig.d.ts +20 -0
- package/lib/scene/character-eye-rig.js +35 -0
- package/lib/scene/character-gaze.d.ts +16 -0
- package/lib/scene/character-gaze.js +36 -0
- package/lib/scene/character-motion-clock.d.ts +1 -1
- package/lib/scene/character-motion-clock.js +17 -4
- package/lib/scene/character-motion.js +66 -12
- package/lib/scene/character-rig-renderer.d.ts +3 -2
- package/lib/scene/character-rig-renderer.js +28 -18
- package/lib/scene/character-rig.d.ts +2 -0
- package/lib/scene/character-rig.js +9 -1
- package/lib/sidebar-reveal.js +11 -3
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## 兼容性
|
|
6
6
|
|
|
7
|
-
正式版 `0.3.
|
|
7
|
+
正式版 `0.3.5` 延续 `0.3.4` 在 DeepSeek Harness `0.1.5-rc.1` 的部署兼容基线,需要 Node.js `^22.19.0` 或 `>=24.0.0`。开发依赖仍锁定 `0.1.2-rc.1` 接口;其他 DSH 版本尚未完成同等验证。本版修复原生侧栏收起按钮被主题隐藏,以及仅思考节点形成空气泡的问题,不修改官方核心代码。“跟随系统”读取当前设备/浏览器的配色偏好,不按服务器时间切换。
|
|
8
8
|
|
|
9
9
|
## 当前范围
|
|
10
10
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
- 背景与人物分层:保留日间/夜间的柔和天空;人物使用独立高清、无损 WebP,不随整张壁纸放大。坐姿、托腮和打盹统一为 720×1019,探头素材宽 360;最大显示尺寸仍有约 3 倍像素密度。姿势按需解码后再显示,保留轮廓与五官细节。
|
|
15
15
|
- 根据真实剩余空间决定姿势:右侧宽裕时坐在小平台上,中等窗口扶着侧栏探头;细侧栏空位使用更窄的半脸偷看。没有安全空间时暂时隐藏,不覆盖消息、头像或侧栏按钮,不修改业务布局。
|
|
16
16
|
- 坐姿下,用户空闲 30 秒后托腮、3 分钟后闭眼打盹;鼠标、键盘、触摸点击或滚轮操作后恢复。页面隐藏或不再使用坐姿时暂停计时,返回后重新开始。最多一个空闲计时器,睡着后不继续轮询,不绑定 AI 状态,不读取输入内容。姿势以 220ms 淡化过渡,不是连续骨骼动画。
|
|
17
|
-
-
|
|
17
|
+
- 耳根固定、耳尖连续摆动,坐姿和托腮的尾巴通过 7 个关节点与网格蒙皮连续变形,鼠标靠近可触发联动。眨眼提取原图睫毛笔触并连续变形,瞳孔平滑跟随鼠标;身体与四肢没有完整骨骼绑定,并非完整 Live2D。短暂动作最高 60 帧,视线停稳后停止绘制,后台与减少动态模式暂停。
|
|
18
18
|
- 装饰背景使用稳定的大视口高度;姿势切换不横穿会话,不读取会话内容或执行状态;流式文本高度变化不触发布局重测。软键盘兼容性仍需 iOS / Android 真机验收。
|
|
19
19
|
- bloub 嘿咻保留 alpha.171 略宽于高的小黑团轮廓和圆润奶白眼圈。单击依次眨眼回应、轻跳、歪头、感叹号惊讶;双击或键盘 Shift+Enter 轮换散开重聚、蛋形、环绕、六边形、单眼眨眼、睁大眼、感叹号、警觉、休眠、思考、通知。每隔随机 20–40 秒自动选择一种待机动作(含眨眼、休眠,不含思考、通知、感叹号),不连续重复;打字、飞行或其他动作尚未结束时顺延。后台/离屏/减少动态时取消调度,恢复后重新等待,不补播。
|
|
20
20
|
- 嘿咻通过可选的官方 `sessions.list` / `binding().session` 只读订阅当前会话:运行中显示三点思考(代表本轮处理中,不细分推理/输出/工具),观察到本轮结束时提醒一次,新执行错误显示感叹号。提醒表示本轮结束,不承诺任务成功,手动停止也可能触发。初次加载历史、切换会话、重新加载历史不会补发完成提醒。通知徽点采用暖金色和真正透明的缺口;不申请浏览器通知权限、不发送消息、不操作会话、不关联壁纸。
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
通过 npm 安装正式版:
|
|
34
34
|
|
|
35
35
|
```bash
|
|
36
|
-
dsh plugin --profile web add @lemoncat7/dsh-theme-xiaohei@0.3.
|
|
36
|
+
dsh plugin --profile web add @lemoncat7/dsh-theme-xiaohei@0.3.5
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
也可在源码目录运行 `npm pack` 生成完整包后安装:
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
|
-
dsh plugin --profile web add ./lemoncat7-dsh-theme-xiaohei-0.3.
|
|
42
|
+
dsh plugin --profile web add ./lemoncat7-dsh-theme-xiaohei-0.3.5.tgz
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
卸载:
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
# 0.3.5 · 侧栏按钮与思考气泡修复
|
|
2
|
+
|
|
3
|
+
延续 0.3.4 的 DSH 0.1.5-rc.1 兼容基线,Node.js ^22.19.0 或 >=24.0.0。本次浏览器回归使用桌面及移动端模拟 DOM,未重新完成其他宿主版本的端到端验证。
|
|
4
|
+
|
|
5
|
+
- 按中英文 aria-label 定位原生收起侧栏按钮,恢复显示和点击,不依赖按钮排列位置,不覆盖宿主明确隐藏或禁用的控件。
|
|
6
|
+
- 仅思考内容的助手节点移除气泡背景、边框、留白与头像,恢复普通过程行;混合正文仍保留聊天气泡。
|
|
7
|
+
- 不修改 DSH 官方核心代码,不增加运行时轮询。
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { XIAOHEI_AVATAR_2D_FRONT } from '../generated-keyart.js';
|
|
2
|
+
// AssistantMarkdown > body > ProcessReasoning > ReasoningRow. Require the
|
|
3
|
+
// reasoning wrapper to be the only body child: mixed replies/images/interrupted
|
|
4
|
+
// messages keep their bubble. No hashed classes or nested :has selectors.
|
|
5
|
+
const thinkingOnlyRow = `#root [data-chat-flow-kind='assistant-step']:has(> [data-slot='conversation.chat.node'] > div:first-child > div:only-child > div:only-child > [data-variant='think']:only-child)`;
|
|
2
6
|
/** Native conversation messages restyled without changing their DOM contract. */
|
|
3
7
|
export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
|
|
4
8
|
/* Keep DSH's native max width; only tune vertical reading rhythm. */
|
|
@@ -10,6 +14,24 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
|
|
|
10
14
|
color: var(--xiaohei-conversation-text);
|
|
11
15
|
}
|
|
12
16
|
|
|
17
|
+
${thinkingOnlyRow} {
|
|
18
|
+
padding-inline: 0 !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
${thinkingOnlyRow}::before {
|
|
22
|
+
content: none !important;
|
|
23
|
+
display: none !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
${thinkingOnlyRow} > [data-slot='conversation.chat.node'] > div:first-child {
|
|
27
|
+
inline-size: 100% !important;
|
|
28
|
+
padding: 0 !important;
|
|
29
|
+
border: 0 !important;
|
|
30
|
+
border-radius: 0 !important;
|
|
31
|
+
background: transparent !important;
|
|
32
|
+
box-shadow: none !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
13
35
|
/* Message portraits are deliberately static and only identify the speaker. */
|
|
14
36
|
#root [data-chat-flow-kind='assistant-step'],
|
|
15
37
|
#root [data-chat-flow-kind='user'] {
|
package/lib/chrome/sidebar.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** One glass surface over DSH's native sidebar geometry and controls. */
|
|
2
|
-
export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n background: transparent !important;\n border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n position: relative;\n}\n\n/* Reveal wide navigation only after its column has reached the target width.\n * Keep the toggle itself native. Opacity is applied to content, never the shell\n * (which also hosts fixed-position settings dialogs). */\n@media (prefers-reduced-motion: no-preference) {\n #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > :not(:first-child),\n #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {\n transition: opacity 100ms ease-out;\n }\n #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > :not(:first-child),\n #root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {\n opacity: 0 !important;\n visibility: hidden;\n transition: none;\n }\n}\n\n/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow\n * into the glass edge. Wheel, touch and keyboard remain native; dialogs and\n * other plugin panels keep their normal scrollbar affordance. */\n#root [data-slot='sidebar.workspaces'] [role='tree'] {\n scrollbar-color: transparent transparent !important;\n}\n\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {\n background: transparent !important;\n border-color: transparent !important;\n box-shadow: none !important;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n --dsh-sidebar-inline-padding: 18px;\n position: relative;\n background: transparent !important;\n border-right: 0;\n box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n position: absolute;\n box-sizing: border-box;\n left: var(--xiaohei-sidebar-glass-left, 7px);\n top: var(--xiaohei-sidebar-glass-top, 8px);\n width: var(--xiaohei-sidebar-glass-width, 0px);\n height: var(--xiaohei-sidebar-glass-height, 0px);\n pointer-events: none;\n overflow: hidden;\n border: 1px solid var(--xiaohei-sidebar-glass-edge);\n border-radius: var(--xiaohei-sidebar-glass-radius);\n background: var(--xiaohei-sidebar-glass-fill);\n box-shadow:\n inset 0 1px var(--xiaohei-sidebar-glass-highlight),\n inset 1px 0 var(--xiaohei-sidebar-glass-refraction),\n 0 18px 50px -32px var(--xiaohei-sidebar-shadow);\n -webkit-backdrop-filter:\n blur(var(--xiaohei-sidebar-glass-blur))\n saturate(var(--xiaohei-sidebar-glass-saturation));\n backdrop-filter:\n blur(var(--xiaohei-sidebar-glass-blur))\n saturate(var(--xiaohei-sidebar-glass-saturation));\n}\n\n/* Width dragging changes the full-height glass raster every frame. Suspend\n * only the filters while geometry is moving; the translucent surface remains\n * visible and the settled glass returns after the resize gesture ends. */\nhtml[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n\n/* One restrained inner rim completes the glass edge without tinting content. */\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n content: '';\n position: absolute;\n pointer-events: none;\n inset: 1px;\n border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);\n box-shadow:\n inset 0 1px var(--xiaohei-sidebar-glass-refraction),\n inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);\n}\n\n/* The official brand slot owns geometry in both the wide sidebar and rail.\n * The bitmap remains visible as a no-WebGL fallback while the compact\n * MetallicPaint canvas adds a restrained liquid-metal pass above it. */\n.xiaohei-brand-mark {\n position: relative;\n display: inline-grid;\n flex: none;\n place-items: center;\n width: var(--xiaohei-brand-mark-size);\n height: var(--xiaohei-brand-mark-size);\n margin: -2px;\n overflow: visible;\n pointer-events: none;\n filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));\n transform: translateY(-1px);\n}\n\n.xiaohei-brand-mark__fallback,\n.xiaohei-brand-mark__metal {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.xiaohei-brand-mark__fallback {\n opacity: .94;\n transition: opacity var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark__metal {\n opacity: 0;\n transition:\n opacity var(--xiaohei-motion-base) ease,\n filter var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {\n opacity: .28;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {\n opacity: .92;\n}\n\n.xiaohei-brand-name {\n white-space: nowrap;\n letter-spacing: .025em;\n font-size: 17px;\n font-weight: 600;\n}\n\n/* ui-conversation currently exposes the Hero mark but not its headline as a\n * slot. Anchor the visual copy to that official mark occupant so hashed Host\n * class names and unrelated headings remain untouched. */\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {\n font-size: 0;\n}\n\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {\n content: '\u4E07\u7269\u6709\u7075\uFF0C\u81EA\u5728\u540C\u884C';\n font-size: 26px;\n font-weight: 500;\n line-height: 32px;\n}\n\n#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {\n filter: brightness(1.12) contrast(1.04);\n}\n\n/* Keep native rail/wide geometry and one consistent control material. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n color: var(--xiaohei-sidebar-emphasis);\n transition:\n background-color var(--xiaohei-motion-fast) ease,\n border-color var(--xiaohei-motion-fast) ease,\n transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {\n background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n border: 1px solid var(--xiaohei-sidebar-control-edge);\n border-radius: var(--xiaohei-radius-control);\n background: var(--xiaohei-sidebar-control);\n box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);\n justify-content: flex-start;\n gap: 8px;\n padding-inline: 12px;\n text-align: start;\n}\n\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {\n border-color: var(--xiaohei-sidebar-control-edge-hover);\n background: var(--xiaohei-sidebar-hover);\n}\n\n/* The footer uses a divider instead of another framed card. */\n#root [data-slot='sidebar'] > div:not([class*='_collapsed'])\n > :has(> div > [data-slot='sidebar.footer.action']) {\n box-sizing: border-box;\n gap: 2px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--xiaohei-sidebar-control-edge);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n color: var(--dsw-alias-label-secondary);\n border-radius: var(--xiaohei-radius-small) !important;\n transition:\n color var(--xiaohei-motion-fast) ease,\n background-color var(--xiaohei-motion-fast) ease,\n transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n color: var(--xiaohei-sidebar-emphasis);\n background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n outline: 2px solid var(--xiaohei-sidebar-emphasis);\n outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n #root [data-slot='sidebar'] button {\n transition-duration: 0ms !important;\n }\n\n\n .xiaohei-brand-mark__fallback,\n .xiaohei-brand-mark__metal {\n transition-duration: 0ms !important;\n }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n background: var(--xiaohei-sidebar-glass-solid);\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n background: var(--xiaohei-sidebar-glass-solid);\n }\n}\n\n@media (forced-colors: active) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n border-color: CanvasText;\n background: Canvas;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n\n #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {\n border-color: ButtonText;\n }\n\n}\n";
|
|
2
|
+
export declare const XIAOHEI_SIDEBAR_CSS = "\n/* The layout column and SidebarRoot both consume the native sidebar fill.\n * The theme token makes those surfaces transparent; this stable slot\n * relationship removes the layout column's remaining straight divider. */\n#root :has(> [data-slot='sidebar']) {\n background: transparent !important;\n border-right-color: transparent !important;\n}\n\n#root [data-slot='sidebar'] {\n position: relative;\n}\n\n/* Target the native control by its accessible identity, not DOM order.\n * Do not resurrect controls explicitly hidden/disabled by the Host. */\n#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']):not([hidden]):not([disabled]):not([aria-hidden='true']) {\n display: inline-flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n}\n\n/* Reveal wide navigation only after its column has reached the target width.\n * Keep the toggle itself native. Opacity is applied to content, never the shell\n * (which also hosts fixed-position settings dialogs). */\n@media (prefers-reduced-motion: no-preference) {\n #root [data-xiaohei-sidebar-reveal] [data-xiaohei-sidebar-brand] {\n transition: opacity 100ms ease-out;\n }\n #root [data-xiaohei-sidebar-reveal='waiting'] [data-xiaohei-sidebar-brand] {\n opacity: 0 !important;\n visibility: hidden;\n transition: none;\n }\n}\n\n/* Hide the tree scrollbar's paint, retaining its gutter so rows do not grow\n * into the glass edge. Wheel, touch and keyboard remain native; dialogs and\n * other plugin panels keep their normal scrollbar affordance. */\n#root [data-slot='sidebar.workspaces'] [role='tree'] {\n scrollbar-color: transparent transparent !important;\n}\n\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-thumb,\n#root [data-slot='sidebar.workspaces'] [role='tree']::-webkit-scrollbar-track {\n background: transparent !important;\n border-color: transparent !important;\n box-shadow: none !important;\n}\n\n/* The host shell remains paint- and filter-free because Settings is a fixed\n * descendant. The glass itself lives outside #root in the scene layer. */\n#root [data-slot='sidebar'] > div {\n --dsh-sidebar-inline-padding: 18px;\n position: relative;\n background: transparent !important;\n border-right: 0;\n box-shadow: none;\n}\n\n#dsh-theme-xiaohei\\/sidebar-glass {\n position: absolute;\n box-sizing: border-box;\n left: var(--xiaohei-sidebar-glass-left, 7px);\n top: var(--xiaohei-sidebar-glass-top, 8px);\n width: var(--xiaohei-sidebar-glass-width, 0px);\n height: var(--xiaohei-sidebar-glass-height, 0px);\n pointer-events: none;\n overflow: hidden;\n border: 1px solid var(--xiaohei-sidebar-glass-edge);\n border-radius: var(--xiaohei-sidebar-glass-radius);\n background: var(--xiaohei-sidebar-glass-fill);\n box-shadow:\n inset 0 1px var(--xiaohei-sidebar-glass-highlight),\n inset 1px 0 var(--xiaohei-sidebar-glass-refraction),\n 0 18px 50px -32px var(--xiaohei-sidebar-shadow);\n -webkit-backdrop-filter:\n blur(var(--xiaohei-sidebar-glass-blur))\n saturate(var(--xiaohei-sidebar-glass-saturation));\n backdrop-filter:\n blur(var(--xiaohei-sidebar-glass-blur))\n saturate(var(--xiaohei-sidebar-glass-saturation));\n}\n\n/* Width dragging changes the full-height glass raster every frame. Suspend\n * only the filters while geometry is moving; the translucent surface remains\n * visible and the settled glass returns after the resize gesture ends. */\nhtml[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n\n/* One restrained inner rim completes the glass edge without tinting content. */\n#dsh-theme-xiaohei\\/sidebar-glass::after {\n content: '';\n position: absolute;\n pointer-events: none;\n inset: 1px;\n border-radius: calc(var(--xiaohei-sidebar-glass-radius) - 1px);\n box-shadow:\n inset 0 1px var(--xiaohei-sidebar-glass-refraction),\n inset 0 -20px 28px -32px var(--xiaohei-sidebar-shadow-soft);\n}\n\n/* The official brand slot owns geometry in both the wide sidebar and rail.\n * The bitmap remains visible as a no-WebGL fallback while the compact\n * MetallicPaint canvas adds a restrained liquid-metal pass above it. */\n.xiaohei-brand-mark {\n position: relative;\n display: inline-grid;\n flex: none;\n place-items: center;\n width: var(--xiaohei-brand-mark-size);\n height: var(--xiaohei-brand-mark-size);\n margin: -2px;\n overflow: visible;\n pointer-events: none;\n filter: drop-shadow(0 2px 3px rgb(8 13 15 / 18%));\n transform: translateY(-1px);\n}\n\n.xiaohei-brand-mark__fallback,\n.xiaohei-brand-mark__metal {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.xiaohei-brand-mark__fallback {\n opacity: .94;\n transition: opacity var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark__metal {\n opacity: 0;\n transition:\n opacity var(--xiaohei-motion-base) ease,\n filter var(--xiaohei-motion-base) ease;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__fallback {\n opacity: .28;\n}\n\n.xiaohei-brand-mark[data-metallic-ready='true'] .xiaohei-brand-mark__metal {\n opacity: .92;\n}\n\n.xiaohei-brand-name {\n white-space: nowrap;\n letter-spacing: .025em;\n font-size: 17px;\n font-weight: 600;\n}\n\n/* ui-conversation currently exposes the Hero mark but not its headline as a\n * slot. Anchor the visual copy to that official mark occupant so hashed Host\n * class names and unrelated headings remain untouched. */\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span {\n font-size: 0;\n}\n\n#root span:has(> .xiaohei-brand-mark[data-brand-context='hero']) + span::after {\n content: '\u4E07\u7269\u6709\u7075\uFF0C\u81EA\u5728\u540C\u884C';\n font-size: 26px;\n font-weight: 500;\n line-height: 32px;\n}\n\n#root [data-slot='sidebar'] button:hover .xiaohei-brand-mark__metal {\n filter: brightness(1.12) contrast(1.04);\n}\n\n/* Keep native rail/wide geometry and one consistent control material. */\n#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']),\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {\n color: var(--xiaohei-sidebar-emphasis);\n transition:\n background-color var(--xiaohei-motion-fast) ease,\n border-color var(--xiaohei-motion-fast) ease,\n transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']):hover {\n background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {\n border: 1px solid var(--xiaohei-sidebar-control-edge);\n border-radius: var(--xiaohei-radius-control);\n background: var(--xiaohei-sidebar-control);\n box-shadow: inset 0 1px var(--xiaohei-sidebar-control-highlight);\n justify-content: flex-start;\n gap: 8px;\n padding-inline: 12px;\n text-align: start;\n}\n\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD']:hover,\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session']:hover {\n border-color: var(--xiaohei-sidebar-control-edge-hover);\n background: var(--xiaohei-sidebar-hover);\n}\n\n/* The footer uses a divider instead of another framed card. */\n#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F']))\n > :has(> div > [data-slot='sidebar.footer.action']) {\n box-sizing: border-box;\n gap: 2px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--xiaohei-sidebar-control-edge);\n}\n\n#root [data-slot='sidebar.footer.action'] > button,\n#root [data-slot='sidebar.settings'] > button {\n color: var(--dsw-alias-label-secondary);\n border-radius: var(--xiaohei-radius-small) !important;\n transition:\n color var(--xiaohei-motion-fast) ease,\n background-color var(--xiaohei-motion-fast) ease,\n transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:hover,\n#root [data-slot='sidebar.settings'] > button:hover,\n#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],\n#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {\n color: var(--xiaohei-sidebar-emphasis);\n background: var(--xiaohei-sidebar-hover);\n}\n\n#root [data-slot='sidebar.footer.action'] > button:active,\n#root [data-slot='sidebar.settings'] > button:active {\n transform: translateY(1px);\n}\n\n#root [data-slot='sidebar'] button:focus-visible {\n outline: 2px solid var(--xiaohei-sidebar-emphasis);\n outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n #root [data-slot='sidebar'] button {\n transition-duration: 0ms !important;\n }\n\n\n .xiaohei-brand-mark__fallback,\n .xiaohei-brand-mark__metal {\n transition-duration: 0ms !important;\n }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n background: var(--xiaohei-sidebar-glass-solid);\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n background: var(--xiaohei-sidebar-glass-solid);\n }\n}\n\n@media (forced-colors: active) {\n #dsh-theme-xiaohei\\/sidebar-glass {\n border-color: CanvasText;\n background: Canvas;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n\n #root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='\u65B0\u5EFA\u4F1A\u8BDD'],\n #root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='\u6536\u8D77\u4FA7\u8FB9\u680F'])) > button[aria-label='New session'] {\n border-color: ButtonText;\n }\n\n}\n";
|
|
3
3
|
//# sourceMappingURL=sidebar.d.ts.map
|
package/lib/chrome/sidebar.js
CHANGED
|
@@ -12,16 +12,23 @@ export const XIAOHEI_SIDEBAR_CSS = `
|
|
|
12
12
|
position: relative;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
/* Target the native control by its accessible identity, not DOM order.
|
|
16
|
+
* Do not resurrect controls explicitly hidden/disabled by the Host. */
|
|
17
|
+
#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']):not([hidden]):not([disabled]):not([aria-hidden='true']) {
|
|
18
|
+
display: inline-flex !important;
|
|
19
|
+
visibility: visible !important;
|
|
20
|
+
opacity: 1 !important;
|
|
21
|
+
pointer-events: auto !important;
|
|
22
|
+
}
|
|
23
|
+
|
|
15
24
|
/* Reveal wide navigation only after its column has reached the target width.
|
|
16
25
|
* Keep the toggle itself native. Opacity is applied to content, never the shell
|
|
17
26
|
* (which also hosts fixed-position settings dialogs). */
|
|
18
27
|
@media (prefers-reduced-motion: no-preference) {
|
|
19
|
-
#root [data-
|
|
20
|
-
#root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal]:not([class*='_collapsed']) > div:first-child > button:first-child {
|
|
28
|
+
#root [data-xiaohei-sidebar-reveal] [data-xiaohei-sidebar-brand] {
|
|
21
29
|
transition: opacity 100ms ease-out;
|
|
22
30
|
}
|
|
23
|
-
#root [data-
|
|
24
|
-
#root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {
|
|
31
|
+
#root [data-xiaohei-sidebar-reveal='waiting'] [data-xiaohei-sidebar-brand] {
|
|
25
32
|
opacity: 0 !important;
|
|
26
33
|
visibility: hidden;
|
|
27
34
|
transition: none;
|
|
@@ -170,9 +177,9 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
170
177
|
}
|
|
171
178
|
|
|
172
179
|
/* Keep native rail/wide geometry and one consistent control material. */
|
|
173
|
-
#root [data-slot='sidebar']
|
|
174
|
-
#root [data-slot='sidebar'] > div:
|
|
175
|
-
#root [data-slot='sidebar'] > div:
|
|
180
|
+
#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']),
|
|
181
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
182
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
176
183
|
color: var(--xiaohei-sidebar-emphasis);
|
|
177
184
|
transition:
|
|
178
185
|
background-color var(--xiaohei-motion-fast) ease,
|
|
@@ -180,12 +187,12 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
180
187
|
transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
|
|
181
188
|
}
|
|
182
189
|
|
|
183
|
-
#root [data-slot='sidebar']
|
|
190
|
+
#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']):hover {
|
|
184
191
|
background: var(--xiaohei-sidebar-hover);
|
|
185
192
|
}
|
|
186
193
|
|
|
187
|
-
#root [data-slot='sidebar'] > div:
|
|
188
|
-
#root [data-slot='sidebar'] > div:
|
|
194
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
195
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
189
196
|
border: 1px solid var(--xiaohei-sidebar-control-edge);
|
|
190
197
|
border-radius: var(--xiaohei-radius-control);
|
|
191
198
|
background: var(--xiaohei-sidebar-control);
|
|
@@ -196,14 +203,14 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
196
203
|
text-align: start;
|
|
197
204
|
}
|
|
198
205
|
|
|
199
|
-
#root [data-slot='sidebar'] > div:
|
|
200
|
-
#root [data-slot='sidebar'] > div:
|
|
206
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话']:hover,
|
|
207
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session']:hover {
|
|
201
208
|
border-color: var(--xiaohei-sidebar-control-edge-hover);
|
|
202
209
|
background: var(--xiaohei-sidebar-hover);
|
|
203
210
|
}
|
|
204
211
|
|
|
205
212
|
/* The footer uses a divider instead of another framed card. */
|
|
206
|
-
#root [data-slot='sidebar'] > div:
|
|
213
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']))
|
|
207
214
|
> :has(> div > [data-slot='sidebar.footer.action']) {
|
|
208
215
|
box-sizing: border-box;
|
|
209
216
|
gap: 2px;
|
|
@@ -276,8 +283,8 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
276
283
|
backdrop-filter: none;
|
|
277
284
|
}
|
|
278
285
|
|
|
279
|
-
#root [data-slot='sidebar'] > div:
|
|
280
|
-
#root [data-slot='sidebar'] > div:
|
|
286
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
287
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
281
288
|
border-color: ButtonText;
|
|
282
289
|
}
|
|
283
290
|
|
package/lib/chrome/tokens.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** Semantic Xiaohei identity tokens shared by every themed component layer. */
|
|
2
|
-
export declare const XIAOHEI_CHROME_TOKENS_CSS = "\nhtml {\n --xiaohei-ink: #0E1517;\n --xiaohei-ink-soft: rgb(14 21 23 / 74%);\n --xiaohei-spirit: #69B6BA;\n --xiaohei-spirit-strong: #8ACED0;\n --xiaohei-spirit-soft: rgb(105 182 186 / 12%);\n --xiaohei-spirit-faint: rgb(105 182 186 / 6%);\n --xiaohei-edge: rgb(124 189 192 / 15%);\n --xiaohei-edge-strong: rgb(138 206 208 / 30%);\n --xiaohei-surface: rgb(22 29 31 / 94%);\n --xiaohei-surface-raised: rgb(29 37 39 / 97%);\n --xiaohei-surface-muted: rgb(15 21 23 / 68%);\n --xiaohei-sidebar-emphasis: #E1E6E7;\n --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);\n --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);\n --xiaohei-sidebar-glass-fill: rgb(18 22 25 / 48%);\n --xiaohei-sidebar-glass-solid: #1B2023;\n --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 8%);\n --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 13%);\n --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n --xiaohei-sidebar-glass-saturation: 102%;\n --xiaohei-sidebar-glass-blur: 18px;\n --xiaohei-sidebar-glass-radius: 18px;\n --xiaohei-sidebar-control: rgb(231 238 240 / 7%);\n --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);\n --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);\n --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);\n --xiaohei-sidebar-shadow: rgb(0 0 0 / 30%);\n --xiaohei-sidebar-shadow-soft: rgb(0 0 0 / 16%);\n --xiaohei-workspace-label: rgb(220 227 229 / 78%);\n --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);\n --xiaohei-workspace-folder-open: rgb(231 238 240 / 3%);\n --xiaohei-workspace-row-hover: rgb(231 238 240 / 4%);\n --xiaohei-workspace-row-active: rgb(231 238 240 / 12%);\n --xiaohei-workspace-row-active-hover: rgb(231 238 240 / 16%);\n --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 10%);\n --xiaohei-workspace-action-hover: rgb(231 238 240 / 6%);\n --xiaohei-frame-line: rgb(138 206 208 / 21%);\n --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);\n --xiaohei-frame-fill: rgb(15 21 23 / 54%);\n --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);\n --xiaohei-frame-inner: rgb(231 252 252 / 6%);\n --xiaohei-frame-plaque: #182122;\n --xiaohei-frame-label: #B9E5E7;\n --xiaohei-frame-ink: #081011;\n --xiaohei-layer-panel: rgb(20 27 29 / 76%);\n --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);\n --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);\n --xiaohei-conversation-text: #E5E7E8;\n --xiaohei-conversation-meta: rgb(199 203 206 / 60%);\n --xiaohei-conversation-assistant:\n linear-gradient(\n 115deg,\n rgb(86 91 95 / 30%) 0%,\n rgb(50 54 57 / 22%) 46%,\n rgb(27 30 32 / 30%) 100%\n ),\n rgb(20 23 25 / 68%);\n --xiaohei-conversation-user:\n linear-gradient(\n 118deg,\n rgb(105 110 114 / 27%) 0%,\n rgb(61 65 68 / 23%) 52%,\n rgb(34 37 40 / 31%) 100%\n ),\n rgb(27 30 33 / 72%);\n --xiaohei-conversation-meta-surface:\n linear-gradient(112deg, rgb(91 96 100 / 17%), rgb(42 46 49 / 14%)),\n rgb(20 23 25 / 58%);\n --xiaohei-conversation-meta-edge: rgb(221 225 227 / 12%);\n --xiaohei-conversation-edge: rgb(229 232 234 / 17%);\n --xiaohei-conversation-highlight: rgb(255 255 255 / 12%);\n --xiaohei-conversation-shadow: rgb(0 0 0 / 28%);\n --xiaohei-conversation-blur: 18px;\n --xiaohei-layer-content: rgb(27 35 37 / 92%);\n --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);\n --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);\n --xiaohei-composer-fill: rgb(17 23 25 / 78%);\n --xiaohei-composer-solid: #1B2325;\n --xiaohei-composer-edge: rgb(232 240 242 / 13%);\n --xiaohei-composer-edge-focus: rgb(232 240 242 / 26%);\n --xiaohei-composer-highlight: rgb(255 255 255 / 7%);\n --xiaohei-composer-highlight-strong: rgb(255 255 255 / 10%);\n --xiaohei-composer-lower-edge: rgb(0 0 0 / 20%);\n --xiaohei-composer-shadow: rgb(0 5 7 / 24%);\n --xiaohei-composer-focus: rgb(232 240 242 / 7%);\n --xiaohei-composer-tail: rgb(181 211 212 / 32%);\n --xiaohei-composer-control-edge: rgb(231 238 240 / 10%);\n --xiaohei-composer-control-hover: rgb(231 238 240 / 6%);\n --xiaohei-composer-disabled: rgb(34 42 44 / 66%);\n --xiaohei-composer-primary-icon: #EDF4F4;\n --xiaohei-composer-heixiu-edge: rgb(235 243 244 / 34%);\n --xiaohei-composer-heixiu-shadow: rgb(0 3 4 / 52%);\n --xiaohei-composer-blur: 22px;\n --xiaohei-composer-saturation: 106%;\n --xiaohei-shadow: rgb(0 5 7 / 30%);\n --xiaohei-focus-shadow: rgb(105 182 186 / 14%);\n --xiaohei-overlay-fill: rgb(22 29 31 / 88%);\n --xiaohei-overlay-blur: 18px;\n --xiaohei-overlay-saturation: 108%;\n --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);\n --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);\n --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);\n --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);\n --xiaohei-plugin-surface-blur: 32px;\n --xiaohei-plugin-surface-saturation: 112%;\n --xiaohei-radius-panel: 16px;\n --xiaohei-radius-control: 10px;\n --xiaohei-radius-small: 8px;\n --xiaohei-motion-fast: 140ms;\n --xiaohei-motion-base: 190ms;\n --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\nhtml[data-xiaohei-appearance='light'] {\n --xiaohei-ink: #252C35;\n --xiaohei-ink-soft: rgb(37 44 53 / 72%);\n --xiaohei-spirit: #547D78;\n --xiaohei-spirit-strong: #426A65;\n --xiaohei-spirit-soft: rgb(84 125 120 / 10%);\n --xiaohei-spirit-faint: rgb(84 125 120 / 5%);\n --xiaohei-edge: rgb(84 125 120 / 19%);\n --xiaohei-edge-strong: rgb(84 125 120 / 38%);\n --xiaohei-surface: rgb(232 237 243 / 94%);\n --xiaohei-surface-raised: rgb(241 244 248 / 97%);\n --xiaohei-surface-muted: rgb(220 227 234 / 78%);\n --xiaohei-sidebar-emphasis: #3F454C;\n --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);\n --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);\n --xiaohei-sidebar-glass-fill: rgb(247 245 242 / 58%);\n --xiaohei-sidebar-glass-solid: #EDF1F3;\n --xiaohei-sidebar-glass-edge: rgb(37 45 51 / 9%);\n --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 64%);\n --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n --xiaohei-sidebar-glass-saturation: 102%;\n --xiaohei-sidebar-glass-blur: 18px;\n --xiaohei-sidebar-control: rgb(255 255 255 / 30%);\n --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);\n --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);\n --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);\n --xiaohei-sidebar-shadow: rgb(28 37 43 / 12%);\n --xiaohei-sidebar-shadow-soft: rgb(28 37 43 / 6%);\n --xiaohei-workspace-label: rgb(48 54 61 / 76%);\n --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);\n --xiaohei-workspace-folder-open: rgb(48 54 61 / 3%);\n --xiaohei-workspace-row-hover: rgb(48 54 61 / 5.5%);\n --xiaohei-workspace-row-active: rgb(48 54 61 / 10%);\n --xiaohei-workspace-row-active-hover: rgb(48 54 61 / 14%);\n --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 8%);\n --xiaohei-workspace-action-hover: rgb(255 255 255 / 10%);\n --xiaohei-frame-line: rgb(84 125 120 / 22%);\n --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);\n --xiaohei-frame-fill: rgb(224 231 238 / 58%);\n --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);\n --xiaohei-frame-inner: rgb(255 255 255 / 72%);\n --xiaohei-frame-plaque: rgb(235 241 240 / 94%);\n --xiaohei-frame-label: #294A46;\n --xiaohei-frame-ink: #243633;\n --xiaohei-layer-panel: rgb(226 232 239 / 78%);\n --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);\n --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);\n --xiaohei-conversation-text: #30353A;\n --xiaohei-conversation-meta: rgb(72 79 86 / 58%);\n --xiaohei-conversation-assistant:\n linear-gradient(\n 115deg,\n rgb(255 255 255 / 55%) 0%,\n rgb(230 233 235 / 24%) 48%,\n rgb(202 207 210 / 16%) 100%\n ),\n rgb(232 235 237 / 67%);\n --xiaohei-conversation-user:\n linear-gradient(\n 118deg,\n rgb(255 255 255 / 42%) 0%,\n rgb(213 217 220 / 23%) 52%,\n rgb(190 196 200 / 17%) 100%\n ),\n rgb(220 224 227 / 72%);\n --xiaohei-conversation-meta-surface:\n linear-gradient(112deg, rgb(255 255 255 / 34%), rgb(201 206 209 / 15%)),\n rgb(224 227 229 / 58%);\n --xiaohei-conversation-meta-edge: rgb(50 57 63 / 12%);\n --xiaohei-conversation-edge: rgb(45 52 58 / 15%);\n --xiaohei-conversation-highlight: rgb(255 255 255 / 58%);\n --xiaohei-conversation-shadow: rgb(36 42 47 / 13%);\n --xiaohei-conversation-blur: 18px;\n --xiaohei-layer-content: rgb(238 242 247 / 94%);\n --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);\n --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);\n --xiaohei-composer-fill: rgb(241 244 246 / 76%);\n --xiaohei-composer-solid: #F0F3F5;\n --xiaohei-composer-edge: rgb(45 53 59 / 12%);\n --xiaohei-composer-edge-focus: rgb(45 53 59 / 24%);\n --xiaohei-composer-highlight: rgb(255 255 255 / 72%);\n --xiaohei-composer-highlight-strong: rgb(255 255 255 / 88%);\n --xiaohei-composer-lower-edge: rgb(45 53 59 / 8%);\n --xiaohei-composer-shadow: rgb(36 45 50 / 11%);\n --xiaohei-composer-focus: rgb(45 53 59 / 6%);\n --xiaohei-composer-tail: rgb(47 57 62 / 26%);\n --xiaohei-composer-control-edge: rgb(46 53 59 / 10%);\n --xiaohei-composer-control-hover: rgb(255 255 255 / 46%);\n --xiaohei-composer-disabled: rgb(222 227 230 / 72%);\n --xiaohei-composer-primary-icon: #F5F8F8;\n --xiaohei-composer-heixiu-edge: rgb(255 255 255 / 24%);\n --xiaohei-composer-heixiu-shadow: rgb(35 43 47 / 30%);\n --xiaohei-composer-blur: 22px;\n --xiaohei-composer-saturation: 104%;\n --xiaohei-shadow: rgb(43 55 51 / 11%);\n --xiaohei-focus-shadow: rgb(84 125 120 / 13%);\n --xiaohei-overlay-fill: rgb(232 237 243 / 90%);\n --xiaohei-overlay-blur: 18px;\n --xiaohei-overlay-saturation: 106%;\n --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);\n --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);\n --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);\n --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);\n --xiaohei-plugin-surface-blur: 32px;\n --xiaohei-plugin-surface-saturation: 106%;\n}\n";
|
|
2
|
+
export declare const XIAOHEI_CHROME_TOKENS_CSS = "\nhtml {\n --xiaohei-ink: #0E1517;\n --xiaohei-ink-soft: rgb(14 21 23 / 74%);\n --xiaohei-spirit: #69B6BA;\n --xiaohei-spirit-strong: #8ACED0;\n --xiaohei-spirit-soft: rgb(105 182 186 / 12%);\n --xiaohei-spirit-faint: rgb(105 182 186 / 6%);\n --xiaohei-edge: rgb(124 189 192 / 15%);\n --xiaohei-edge-strong: rgb(138 206 208 / 30%);\n --xiaohei-surface: rgb(22 29 31 / 94%);\n --xiaohei-surface-raised: rgb(29 37 39 / 97%);\n --xiaohei-surface-muted: rgb(15 21 23 / 68%);\n --xiaohei-sidebar-emphasis: #E1E6E7;\n --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);\n --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);\n --xiaohei-sidebar-glass-fill: rgb(18 22 25 / 25%);\n --xiaohei-sidebar-glass-solid: #1B2023;\n --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 8%);\n --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 13%);\n --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n --xiaohei-sidebar-glass-saturation: 102%;\n --xiaohei-sidebar-glass-blur: 12px;\n --xiaohei-sidebar-glass-radius: 18px;\n --xiaohei-sidebar-control: rgb(231 238 240 / 7%);\n --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);\n --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);\n --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);\n --xiaohei-sidebar-shadow: rgb(0 0 0 / 30%);\n --xiaohei-sidebar-shadow-soft: rgb(0 0 0 / 16%);\n --xiaohei-workspace-label: rgb(220 227 229 / 78%);\n --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);\n --xiaohei-workspace-folder-open: rgb(231 238 240 / 3%);\n --xiaohei-workspace-row-hover: rgb(231 238 240 / 4%);\n --xiaohei-workspace-row-active: rgb(231 238 240 / 12%);\n --xiaohei-workspace-row-active-hover: rgb(231 238 240 / 16%);\n --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 10%);\n --xiaohei-workspace-action-hover: rgb(231 238 240 / 6%);\n --xiaohei-frame-line: rgb(138 206 208 / 21%);\n --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);\n --xiaohei-frame-fill: rgb(15 21 23 / 54%);\n --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);\n --xiaohei-frame-inner: rgb(231 252 252 / 6%);\n --xiaohei-frame-plaque: #182122;\n --xiaohei-frame-label: #B9E5E7;\n --xiaohei-frame-ink: #081011;\n --xiaohei-layer-panel: rgb(20 27 29 / 76%);\n --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);\n --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);\n --xiaohei-conversation-text: #E5E7E8;\n --xiaohei-conversation-meta: rgb(199 203 206 / 60%);\n --xiaohei-conversation-assistant:\n linear-gradient(\n 115deg,\n rgb(86 91 95 / 30%) 0%,\n rgb(50 54 57 / 22%) 46%,\n rgb(27 30 32 / 30%) 100%\n ),\n rgb(20 23 25 / 68%);\n --xiaohei-conversation-user:\n linear-gradient(\n 118deg,\n rgb(105 110 114 / 27%) 0%,\n rgb(61 65 68 / 23%) 52%,\n rgb(34 37 40 / 31%) 100%\n ),\n rgb(27 30 33 / 72%);\n --xiaohei-conversation-meta-surface:\n linear-gradient(112deg, rgb(91 96 100 / 17%), rgb(42 46 49 / 14%)),\n rgb(20 23 25 / 58%);\n --xiaohei-conversation-meta-edge: rgb(221 225 227 / 12%);\n --xiaohei-conversation-edge: rgb(229 232 234 / 17%);\n --xiaohei-conversation-highlight: rgb(255 255 255 / 12%);\n --xiaohei-conversation-shadow: rgb(0 0 0 / 28%);\n --xiaohei-conversation-blur: 18px;\n --xiaohei-layer-content: rgb(27 35 37 / 92%);\n --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);\n --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);\n --xiaohei-composer-fill: rgb(17 23 25 / 78%);\n --xiaohei-composer-solid: #1B2325;\n --xiaohei-composer-edge: rgb(232 240 242 / 13%);\n --xiaohei-composer-edge-focus: rgb(232 240 242 / 26%);\n --xiaohei-composer-highlight: rgb(255 255 255 / 7%);\n --xiaohei-composer-highlight-strong: rgb(255 255 255 / 10%);\n --xiaohei-composer-lower-edge: rgb(0 0 0 / 20%);\n --xiaohei-composer-shadow: rgb(0 5 7 / 24%);\n --xiaohei-composer-focus: rgb(232 240 242 / 7%);\n --xiaohei-composer-tail: rgb(181 211 212 / 32%);\n --xiaohei-composer-control-edge: rgb(231 238 240 / 10%);\n --xiaohei-composer-control-hover: rgb(231 238 240 / 6%);\n --xiaohei-composer-disabled: rgb(34 42 44 / 66%);\n --xiaohei-composer-primary-icon: #EDF4F4;\n --xiaohei-composer-heixiu-edge: rgb(235 243 244 / 34%);\n --xiaohei-composer-heixiu-shadow: rgb(0 3 4 / 52%);\n --xiaohei-composer-blur: 22px;\n --xiaohei-composer-saturation: 106%;\n --xiaohei-shadow: rgb(0 5 7 / 30%);\n --xiaohei-focus-shadow: rgb(105 182 186 / 14%);\n --xiaohei-overlay-fill: rgb(22 29 31 / 88%);\n --xiaohei-overlay-blur: 18px;\n --xiaohei-overlay-saturation: 108%;\n --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);\n --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);\n --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);\n --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);\n --xiaohei-plugin-surface-blur: 32px;\n --xiaohei-plugin-surface-saturation: 112%;\n --xiaohei-radius-panel: 16px;\n --xiaohei-radius-control: 10px;\n --xiaohei-radius-small: 8px;\n --xiaohei-motion-fast: 140ms;\n --xiaohei-motion-base: 190ms;\n --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\nhtml[data-xiaohei-appearance='light'] {\n --xiaohei-ink: #252C35;\n --xiaohei-ink-soft: rgb(37 44 53 / 72%);\n --xiaohei-spirit: #547D78;\n --xiaohei-spirit-strong: #426A65;\n --xiaohei-spirit-soft: rgb(84 125 120 / 10%);\n --xiaohei-spirit-faint: rgb(84 125 120 / 5%);\n --xiaohei-edge: rgb(84 125 120 / 19%);\n --xiaohei-edge-strong: rgb(84 125 120 / 38%);\n --xiaohei-surface: rgb(232 237 243 / 94%);\n --xiaohei-surface-raised: rgb(241 244 248 / 97%);\n --xiaohei-surface-muted: rgb(220 227 234 / 78%);\n --xiaohei-sidebar-emphasis: #3F454C;\n --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);\n --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);\n --xiaohei-sidebar-glass-fill: rgb(247 245 242 / 30%);\n --xiaohei-sidebar-glass-solid: #EDF1F3;\n --xiaohei-sidebar-glass-edge: rgb(37 45 51 / 9%);\n --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 64%);\n --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);\n --xiaohei-sidebar-glass-saturation: 102%;\n --xiaohei-sidebar-glass-blur: 12px;\n --xiaohei-sidebar-control: rgb(255 255 255 / 30%);\n --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);\n --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);\n --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);\n --xiaohei-sidebar-shadow: rgb(28 37 43 / 12%);\n --xiaohei-sidebar-shadow-soft: rgb(28 37 43 / 6%);\n --xiaohei-workspace-label: rgb(48 54 61 / 76%);\n --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);\n --xiaohei-workspace-folder-open: rgb(48 54 61 / 3%);\n --xiaohei-workspace-row-hover: rgb(48 54 61 / 5.5%);\n --xiaohei-workspace-row-active: rgb(48 54 61 / 10%);\n --xiaohei-workspace-row-active-hover: rgb(48 54 61 / 14%);\n --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 8%);\n --xiaohei-workspace-action-hover: rgb(255 255 255 / 10%);\n --xiaohei-frame-line: rgb(84 125 120 / 22%);\n --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);\n --xiaohei-frame-fill: rgb(224 231 238 / 58%);\n --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);\n --xiaohei-frame-inner: rgb(255 255 255 / 72%);\n --xiaohei-frame-plaque: rgb(235 241 240 / 94%);\n --xiaohei-frame-label: #294A46;\n --xiaohei-frame-ink: #243633;\n --xiaohei-layer-panel: rgb(226 232 239 / 78%);\n --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);\n --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);\n --xiaohei-conversation-text: #30353A;\n --xiaohei-conversation-meta: rgb(72 79 86 / 58%);\n --xiaohei-conversation-assistant:\n linear-gradient(\n 115deg,\n rgb(255 255 255 / 55%) 0%,\n rgb(230 233 235 / 24%) 48%,\n rgb(202 207 210 / 16%) 100%\n ),\n rgb(232 235 237 / 67%);\n --xiaohei-conversation-user:\n linear-gradient(\n 118deg,\n rgb(255 255 255 / 42%) 0%,\n rgb(213 217 220 / 23%) 52%,\n rgb(190 196 200 / 17%) 100%\n ),\n rgb(220 224 227 / 72%);\n --xiaohei-conversation-meta-surface:\n linear-gradient(112deg, rgb(255 255 255 / 34%), rgb(201 206 209 / 15%)),\n rgb(224 227 229 / 58%);\n --xiaohei-conversation-meta-edge: rgb(50 57 63 / 12%);\n --xiaohei-conversation-edge: rgb(45 52 58 / 15%);\n --xiaohei-conversation-highlight: rgb(255 255 255 / 58%);\n --xiaohei-conversation-shadow: rgb(36 42 47 / 13%);\n --xiaohei-conversation-blur: 18px;\n --xiaohei-layer-content: rgb(238 242 247 / 94%);\n --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);\n --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);\n --xiaohei-composer-fill: rgb(241 244 246 / 76%);\n --xiaohei-composer-solid: #F0F3F5;\n --xiaohei-composer-edge: rgb(45 53 59 / 12%);\n --xiaohei-composer-edge-focus: rgb(45 53 59 / 24%);\n --xiaohei-composer-highlight: rgb(255 255 255 / 72%);\n --xiaohei-composer-highlight-strong: rgb(255 255 255 / 88%);\n --xiaohei-composer-lower-edge: rgb(45 53 59 / 8%);\n --xiaohei-composer-shadow: rgb(36 45 50 / 11%);\n --xiaohei-composer-focus: rgb(45 53 59 / 6%);\n --xiaohei-composer-tail: rgb(47 57 62 / 26%);\n --xiaohei-composer-control-edge: rgb(46 53 59 / 10%);\n --xiaohei-composer-control-hover: rgb(255 255 255 / 46%);\n --xiaohei-composer-disabled: rgb(222 227 230 / 72%);\n --xiaohei-composer-primary-icon: #F5F8F8;\n --xiaohei-composer-heixiu-edge: rgb(255 255 255 / 24%);\n --xiaohei-composer-heixiu-shadow: rgb(35 43 47 / 30%);\n --xiaohei-composer-blur: 22px;\n --xiaohei-composer-saturation: 104%;\n --xiaohei-shadow: rgb(43 55 51 / 11%);\n --xiaohei-focus-shadow: rgb(84 125 120 / 13%);\n --xiaohei-overlay-fill: rgb(232 237 243 / 90%);\n --xiaohei-overlay-blur: 18px;\n --xiaohei-overlay-saturation: 106%;\n --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);\n --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);\n --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);\n --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);\n --xiaohei-plugin-surface-blur: 32px;\n --xiaohei-plugin-surface-saturation: 106%;\n}\n";
|
|
3
3
|
//# sourceMappingURL=tokens.d.ts.map
|
package/lib/chrome/tokens.js
CHANGED
|
@@ -15,13 +15,13 @@ html {
|
|
|
15
15
|
--xiaohei-sidebar-emphasis: #E1E6E7;
|
|
16
16
|
--xiaohei-sidebar-icon: rgb(220 227 229 / 70%);
|
|
17
17
|
--xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);
|
|
18
|
-
--xiaohei-sidebar-glass-fill: rgb(18 22 25 /
|
|
18
|
+
--xiaohei-sidebar-glass-fill: rgb(18 22 25 / 25%);
|
|
19
19
|
--xiaohei-sidebar-glass-solid: #1B2023;
|
|
20
20
|
--xiaohei-sidebar-glass-edge: rgb(255 255 255 / 8%);
|
|
21
21
|
--xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 13%);
|
|
22
22
|
--xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);
|
|
23
23
|
--xiaohei-sidebar-glass-saturation: 102%;
|
|
24
|
-
--xiaohei-sidebar-glass-blur:
|
|
24
|
+
--xiaohei-sidebar-glass-blur: 12px;
|
|
25
25
|
--xiaohei-sidebar-glass-radius: 18px;
|
|
26
26
|
--xiaohei-sidebar-control: rgb(231 238 240 / 7%);
|
|
27
27
|
--xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);
|
|
@@ -129,13 +129,13 @@ html[data-xiaohei-appearance='light'] {
|
|
|
129
129
|
--xiaohei-sidebar-emphasis: #3F454C;
|
|
130
130
|
--xiaohei-sidebar-icon: rgb(48 54 61 / 68%);
|
|
131
131
|
--xiaohei-sidebar-hover: rgb(48 54 61 / 6%);
|
|
132
|
-
--xiaohei-sidebar-glass-fill: rgb(247 245 242 /
|
|
132
|
+
--xiaohei-sidebar-glass-fill: rgb(247 245 242 / 30%);
|
|
133
133
|
--xiaohei-sidebar-glass-solid: #EDF1F3;
|
|
134
134
|
--xiaohei-sidebar-glass-edge: rgb(37 45 51 / 9%);
|
|
135
135
|
--xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 64%);
|
|
136
136
|
--xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 18%);
|
|
137
137
|
--xiaohei-sidebar-glass-saturation: 102%;
|
|
138
|
-
--xiaohei-sidebar-glass-blur:
|
|
138
|
+
--xiaohei-sidebar-glass-blur: 12px;
|
|
139
139
|
--xiaohei-sidebar-control: rgb(255 255 255 / 30%);
|
|
140
140
|
--xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);
|
|
141
141
|
--xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);
|