【已审核】style(ui): 统一全代码库滚动条架构 - #1427
Open
climashscape wants to merge 1 commit into
Open
Conversation
Establish --scrollbar-* CSS variables as the single source of truth for all scrollbars (tools, code blocks, diff, pierre renderers, ProseMirror, Radix ScrollArea, native fallback), eliminating 7 duplicated/inconsistent styles. - globals.css: add scrollbar tokens (size/radius/track/opacity), color-scheme light/dark per theme, global *::-webkit-scrollbar fallback, scroll-area-thumb unified style - pierre-styles.ts: extract shared PIERRE_SCROLLBAR_CSS, inherit color-scheme - DiffView.tsx: reuse PIERRE_DIFF_CSS, drop dead .diff-scroll prefix CSS - diff-scroll.css / rich-text-input.tsx / scroll-area.tsx / VoiceDictationApp: reference shared tokens instead of hardcoded values Fixes theme-following for dark/colored themes (ocean/forest/slate/terminal) and ensures consistent 6px pill scrollbars everywhere.
climashscape
marked this pull request as ready for review
August 4, 2026 12:59
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.
概述
统一 Proma 全代码库滚动条架构。此前滚动条样式散落在 7 处（工具类、Shiki/mermaid 代码块、diff 组件、@pierre/diffs 渲染器、ProseMirror 输入框、Radix ScrollArea、系统默认兜底），尺寸/颜色/圆角互相不一致，且全局缺少
color-scheme导致深色/彩色主题下滚动条显色异常。本次在
globals.css :root建立--scrollbar-*变量作为单一事实来源（SSOT），所有滚动条统一引用；同时补齐color-scheme主题跟随，并加全局*::-webkit-scrollbar兜底让未套工具类的滚动容器也统一。改动
styles/globals.css（+101/-…）--scrollbar-size / --scrollbar-size-sm / --scrollbar-radius / --scrollbar-track / --scrollbar-thumb-opacity / --scrollbar-thumb-hover-opacity变量:root/.dark分别设color-scheme: light / dark，让系统滚动条与 light-dark() 跟随应用主题.scrollbar-thin工具类引用变量（颜色在使用处写hsl(var(--muted-foreground) / var(--opacity))，保证主题跟随）*::-webkit-scrollbar（未套类容器统一 6px 胶囊）.scroll-area-thumb（Radix ScrollArea 统一）pierre-styles.ts（-30）：抽取共享PIERRE_SCROLLBAR_CSS常量，PIERRE_DIFF_CSS/PIERRE_FILE_CSS复用；:host加color-scheme: inherit覆盖库默认，让 diff 内 light-dark() 跟随应用主题DiffView.tsx（-60）：删除内联重复的 unsafeCSS，复用PIERRE_DIFF_CSS；顺带修复原.diff-scroll [data-code]前缀在 shadow DOM 内不生效的隐藏 bugdiff-scroll.css：引用全局变量rich-text-input.tsx（ProseMirror）：宽度引用--scrollbar-size-sm，补全 thumb/track/radius（原仅有宽度、深色下用系统默认 thumb）scroll-area.tsx：轨道宽度 10px→6px（--scrollbar-size），thumb 引用.scroll-area-thumbVoiceDictationApp.tsx：隐藏滚动条改用.scrollbar-none工具类关键设计点
hsl(var(--muted-foreground) / var(--scrollbar-thumb-opacity))。不能预先算成--scrollbar-thumb变量——CSS 自定义属性在声明元素(:root)上替换 var()，深色/彩色主题继承的是已计算值，主题色相会丢失（经浏览器实测确认）。.scrollbar-none（display:none，0,1,0）与.scrollbar-thin细化样式高于*（0,0,0），隐藏保留滚动与细化覆盖不受影响。--scrollbar-*经 host 继承链穿透 shadow root；pierre 的color-scheme: inherit覆盖库自带light dark。测试
bun run typecheck：6 包全部 0 错误bun run --filter='@proma/electron' build：通过（含 proma CLI 编译）rgba(115,115,115,.3)/ 深色rgba(163,163,163,.3)主题跟随正确；.scrollbar-none隐藏优先；shadow DOM +@layer unsafe的color-scheme: inherit覆盖语义正确紧急度
常规
备注
-light/-dark后缀）均定义--muted-foreground，color-scheme跟随.darkclass 逻辑与 theme.ts 完全同步；CRT 终端（旧屏微光）的 ScrollMinimap 特制滚动指示器为自定义 div +!important，不受全局兜底影响，已确认保留