Tinycast 设计令牌系统：ramp 与 adaptive 两个助手函数搞定深色浅色双主题

Tinycast 设计令牌系统ramp 与 adaptive 两个助手函数搞定深色浅色双主题【免费下载链接】tinycastTinycast — a tiny, fully native macOS launcher, hotkeys, and clipboard history.项目地址: https://gitcode.com/GitHub_Trending/ti/tinycastTinycast 是一款小巧、全原生fully native的 macOS 启动器、热键与剪贴板历史工具。它的所有界面颜色都来自一套**设计令牌Design Tokens**系统而撑起深色/浅色双主题的其实只有两个助手函数ramp和adaptive。这篇文章带你快速看懂这套令牌系统如何用最少的代码让整款应用在深色和浅色外观下自动换色、零闪烁、零手工维护。一、设计令牌把魔法数字关进一个文件在大型项目里最头疼的问题之一是颜色、间距、圆角散落在全网代码里想统一换肤就要满世界找。Tinycast 的解法很直接——所有视觉常量集中在一个枚举里Theme.swift。Theme就是唯一的设计令牌来源single design-token source内部按维度分组令牌组管什么例子Theme.Spacing间距刻度xxs 2·md 8·xxl 20Theme.Radius圆角面板26、行10、对话框20Theme.Size尺寸面板宽750、底部栏高52Theme.Duration动画时长面板进入0.18s、退出0.12sTheme.Typography字体只用语义字体样式支持动态字体Theme.Colors颜色本文主角ramp与adaptive项目规则也很硬气视图里禁止硬编码任何有令牌对应的颜色、间距、圆角详见 docs/ui.md。想加新颜色先加令牌再引用——这是整套系统能保持视觉一致的关键。二、ramp 函数一条透明度斜坡搞定文字与控件换色先看ramp的完整定义只有几行Theme.Colorsstatic func ramp(dark: Double, light: Double) - Color { adaptive(dark: .srgbInk(1, alpha: dark), light: .srgbInk(0, alpha: light)) }它的思路非常巧妙一句话总结深色主题下用白色墨水浅色主题下用黑色墨水透明度alpha就是颜色强度。dark: 0.10表示深色界面里 10% 透明的白色light: 0.09表示浅色界面里 9% 透明的黑色墨水颜色由 srgbInk 统一构建保证两种主题下的同一个透明度档位落在完全相同的像素逻辑上于是每个令牌只需要两个透明度数字深浅主题就自动配对了。docs/ui.md 里维护着这张核心对照表令牌深色白浅色黑用途selection0.100.09选中行的填充rowHover0.050.045鼠标悬停永远比选中更淡textPrimary1.001.00搜索文字、光标textSecondary0.600.60次要标签border0.200.18描边式快捷键芯片cardFill0.050.04设置/计算器卡片底色为什么浅色档位的数字和深色不完全一样因为白墨和黑墨在视觉上的重量不同——设计师会微调浅色值让两个主题的观感完全一致而代码结构一行都不用改。三、adaptive 函数当简单反转不够用时ramp的公式是固定的白色↔黑色反转但有些颜色不是简单反转就能成立的。这时用更底层的adaptiveTheme.swift#L336-L340static func adaptive(dark: NSColor, light: NSColor) - Color { Color(nsColor: NSColor(name: nil) { $0.isDark ? dark : light }) }它接收两个显式的颜色并包装成一个动态颜色——颜色会跟随所在窗口的effectiveAppearance自动解析和重绘。典型使用场景panelScrim面板压暗层ramp 的反向——深色主题里用 40%黑色压暗毛玻璃浅色主题里反而要用 55%白色提亮。同白同黑的反转在这里不成立。glassFrost液态玻璃的霜感两种主题都必须是白色因为霜的作用是把玻璃提亮而不是上墨。layoutPreviewGround窗口布局预览的底板屏幕预览里画的显示器永远是深色的所以两种主题都保持深色用ramp反而会在浅色主题下错误地反转。一句话判断法则颜色是白墨↔黑墨的镜像关系 → 用ramp两个主题要各自独立选色 → 用adaptive。四、真实代码里怎么用令牌在视图中的引用非常克制例如底部栏按钮 BarButton.swift 选中时填充Theme.Colors.selection悬停时填充更淡的rowHover——选中永远压过悬停所有列表因此看起来完全一致。第三方扩展屏面也有自己的一套颜色存放在 ExtensionColors.swift它不放进Theme第三方界面不能反过来牵动启动器界面但复用同一个ramp机制只是数值归功能自己管static let fieldFill Theme.Colors.ramp(dark: 0.05, light: 0.04) static let checkboxStroke Theme.Colors.ramp(dark: 0.26, light: 0.30)这种机制共享、数值自治的分层正是整套设计令牌系统能长期不腐化的原因。五、新手最容易踩的 3 个坑在视图里直接写Color.white.opacity(0.1)—— 深色主题下看起来完美切到浅色主题就消失了。规则明确写着永远走Theme.Colors.*。该用ramp的地方用了adaptive或反过来——ramp的价值在于墨水自动反转 透明度档位语义清晰滥用adaptive手写两个颜色会让档位表失去意义。改动深色主题的既有数值—— 项目的深色档位是冻结的设计基线frozen baseline浅色档位则是唯一允许自由微调的列。想改深色那是另一个明确的任务而不是一路顺手改。六、小结Theme.swift是唯一设计令牌来源间距、圆角、尺寸、时长、字体、颜色各归其组视图里禁止魔法数字。ramp(dark:light:)用透明度斜坡 墨水自动反转让 90% 的颜色一行声明即双主题就绪。adaptive(dark:light:)是为非镜像颜色保留的逃生舱压暗层、玻璃霜感、恒暗预览底板都是它的用武之地。想深入了解更多规则同心圆角、边缘溶解、液态玻璃官方 UI 文档在 docs/ui.md架构总览见 docs/architecture.md。两个函数、一张档位表就是 Tinycast 深色浅色双主题的全部秘密——简单正是它能长期保持一致性的原因。【免费下载链接】tinycastTinycast — a tiny, fully native macOS launcher, hotkeys, and clipboard history.项目地址: https://gitcode.com/GitHub_Trending/ti/tinycast创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考