【已审核】fix(theme): 暗色模式去掉 shadow inset 顶高光修复滑块视觉偏下#1064
Open
climashscape wants to merge 1 commit into
Open
Conversation
## 改动一:暗色 shadow inset 顶高光 .dark 块下 5 个 --shadow-* token 含 inset 0 1px 0 0 顶部内高光,在深色滑块顶部显现成亮线,与向下外阴影叠加,把视觉质心往下拉——滑块几何本就居中,偏下纯属视觉错觉。命名暗色主题(远山暮霭/森息夜语/莫兰迪夜/CRT终端)滑块本身浅色,inset 高光不可见故无偏下感,反向印证根因。 去掉 .dark 下 --shadow-xs/sm/md/lg/xl 的 inset 顶高光段,保留外阴影承担浮起感。一处 token 改动,所有吃 shadow-* 的浮起元素统一生效。亮色 :root token 未改动,零影响。 ## 改动二:外观面板特殊风格卡片首次 hover 卡顿 StyleCard 容器 transition-all 收窄为 transition-[box-shadow,transform],避免 hover 时全属性插值扫描;预览图 loading 由 lazy 改为 eager,面板打开即加载,消除首次 hover 的下载/解码延迟。零行为变化。 ## 测试 - bun run typecheck 全 6 包通过 - 暗色默认主题:滑块视觉偏下感消失,几何本就居中 - 命名暗色主题:滑块本就浅色无偏下问题,改动后行为一致,无回归 - 亮色模式:完全无变化 - 外观面板特殊风格卡片首次 hover 不再卡顿 Closes proma-ai#1063
climashscape
force-pushed
the
fix/dark-switch-thumb-sunken
branch
from
2bdc018 to
b20fe96
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述
暗色模式下，所有"滑块型"浮起控件（模式切换器、设置开关、以及依赖
shadow-*token 的浮起元素）存在视觉"偏下"错觉。根因是.dark下的--shadow-sm/md/lg/xltoken 含inset 0 1px 0 0 hsl(0 0% 100% / N)顶部内高光——在深色滑块顶部显现成一条亮线，与向下的外阴影叠加，把视觉质心往下拉。经实测，滑块几何上完全居中（DOM 探针量得上下间隙对称、上下差=0），偏下纯属视觉错觉，元凶就是这个单向的顶部 inset 高光。命名暗色主题（远山暮霭 / 森息夜语 / 莫兰迪夜 / CRT 终端）的滑块因为本身是浅色，inset 高光在浅色上不可见，所以没有偏下感——这也反向印证了根因。
改动
去掉
.dark块下 5 个--shadow-*token 的inset 0 1px 0顶部高光段，保留外阴影承担浮起感：apps/electron/src/renderer/styles/globals.css—.dark下--shadow-xs/sm/md/lg/xl各移除 inset 顶高光apps/electron/src/renderer/components/ui/dialog.tsx— 同步注释（shadow-xl 不再有暗色 inset 高光）apps/electron/src/renderer/components/ui/popover.tsx— 同步注释（shadow-lg 不再有暗色 inset 高光）一处 token 改动，所有吃
shadow-*的浮起元素统一生效。亮色模式:root下的 token 未改动，零影响。测试
bun run typecheck全 6 包通过紧急度
常规
备注
Closes #1063