@lemoncat7/dsh-theme-xiaohei 0.3.3 → 0.3.4
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/lib/chrome/sidebar.d.ts +1 -1
- package/lib/chrome/sidebar.js +13 -15
- package/lib/chrome/tokens.d.ts +1 -1
- package/lib/chrome/tokens.js +4 -4
- package/lib/client.js +383 -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 +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## 兼容性
|
|
6
6
|
|
|
7
|
-
正式版 `0.3.
|
|
7
|
+
正式版 `0.3.4` 已在 DeepSeek Harness `0.1.5-rc.1` 部署验证,需要 Node.js `22.19+` 或 `24+`。开发依赖仍锁定 `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.4
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
也可从 [GitHub Releases](https://github.com/lemoncat7/dsh-theme-xiaohei/releases/tag/v0.3.
|
|
39
|
+
也可从 [GitHub Releases](https://github.com/lemoncat7/dsh-theme-xiaohei/releases/tag/v0.3.4) 下载完整包后安装:
|
|
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.4.tgz
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
卸载:
|
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/* 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
|
@@ -16,12 +16,10 @@ export const XIAOHEI_SIDEBAR_CSS = `
|
|
|
16
16
|
* Keep the toggle itself native. Opacity is applied to content, never the shell
|
|
17
17
|
* (which also hosts fixed-position settings dialogs). */
|
|
18
18
|
@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 {
|
|
19
|
+
#root [data-xiaohei-sidebar-reveal] [data-xiaohei-sidebar-brand] {
|
|
21
20
|
transition: opacity 100ms ease-out;
|
|
22
21
|
}
|
|
23
|
-
#root [data-
|
|
24
|
-
#root [data-slot='sidebar'] > div[data-xiaohei-sidebar-reveal='waiting']:not([class*='_collapsed']) > div:first-child > button:first-child {
|
|
22
|
+
#root [data-xiaohei-sidebar-reveal='waiting'] [data-xiaohei-sidebar-brand] {
|
|
25
23
|
opacity: 0 !important;
|
|
26
24
|
visibility: hidden;
|
|
27
25
|
transition: none;
|
|
@@ -170,9 +168,9 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
170
168
|
}
|
|
171
169
|
|
|
172
170
|
/* 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:
|
|
171
|
+
#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']),
|
|
172
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
173
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
176
174
|
color: var(--xiaohei-sidebar-emphasis);
|
|
177
175
|
transition:
|
|
178
176
|
background-color var(--xiaohei-motion-fast) ease,
|
|
@@ -180,12 +178,12 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
180
178
|
transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
|
|
181
179
|
}
|
|
182
180
|
|
|
183
|
-
#root [data-slot='sidebar']
|
|
181
|
+
#root [data-slot='sidebar'] button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']):hover {
|
|
184
182
|
background: var(--xiaohei-sidebar-hover);
|
|
185
183
|
}
|
|
186
184
|
|
|
187
|
-
#root [data-slot='sidebar'] > div:
|
|
188
|
-
#root [data-slot='sidebar'] > div:
|
|
185
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
186
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
189
187
|
border: 1px solid var(--xiaohei-sidebar-control-edge);
|
|
190
188
|
border-radius: var(--xiaohei-radius-control);
|
|
191
189
|
background: var(--xiaohei-sidebar-control);
|
|
@@ -196,14 +194,14 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
196
194
|
text-align: start;
|
|
197
195
|
}
|
|
198
196
|
|
|
199
|
-
#root [data-slot='sidebar'] > div:
|
|
200
|
-
#root [data-slot='sidebar'] > div:
|
|
197
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话']:hover,
|
|
198
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session']:hover {
|
|
201
199
|
border-color: var(--xiaohei-sidebar-control-edge-hover);
|
|
202
200
|
background: var(--xiaohei-sidebar-hover);
|
|
203
201
|
}
|
|
204
202
|
|
|
205
203
|
/* The footer uses a divider instead of another framed card. */
|
|
206
|
-
#root [data-slot='sidebar'] > div:
|
|
204
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏']))
|
|
207
205
|
> :has(> div > [data-slot='sidebar.footer.action']) {
|
|
208
206
|
box-sizing: border-box;
|
|
209
207
|
gap: 2px;
|
|
@@ -276,8 +274,8 @@ html[data-xiaohei-sidebar-resizing] #dsh-theme-xiaohei\\/sidebar-glass {
|
|
|
276
274
|
backdrop-filter: none;
|
|
277
275
|
}
|
|
278
276
|
|
|
279
|
-
#root [data-slot='sidebar'] > div:
|
|
280
|
-
#root [data-slot='sidebar'] > div:
|
|
277
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='新建会话'],
|
|
278
|
+
#root [data-slot='sidebar'] > div:has(button:is([aria-label='Collapse sidebar'], [aria-label='收起侧边栏'])) > button[aria-label='New session'] {
|
|
281
279
|
border-color: ButtonText;
|
|
282
280
|
}
|
|
283
281
|
|
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%);
|