前端开发者工具插件系统【免费下载链接】scriptcatScriptCat, a browser extension that can execute userscript; 脚本猫一个可以执行用户脚本的浏览器扩展项目地址https://gitcode.com/gh_mirrors/sc/scriptcat点击查看免费下载ScriptCat脚本猫是一个可执行用户脚本的浏览器扩展其选项页、弹窗、安装页等 UI 均基于 React 19 shadcn/ui Tailwind CSS v4 构建。本文围绕仓库中 docs/references/design-tokens.md 这一设计令牌Design Tokens参考文档展开系统讲解 ScriptCat 全量色彩令牌的明暗取值、单一来源机制、Tailwind 工具类接入方式以及阴影、滚动条等配套规范。读完本文你将能够在新页面或新组件中正确地引用令牌、处理暗色模式、组织浮层层级并理解bg-primary-background、ring-ring/50、bg-overlay等写法的底层原理。一、设计令牌的单一来源与工作机制1. 单一来源src/index.cssScriptCat 的所有色彩令牌只有一个事实来源src/index.css。该文件通过三层结构完成明暗主题的声明与暴露:root块定义浅色Light值例如--background: #fafafa、--primary: #1296db.dark块覆盖暗色Dark值例如--background: #1e1e1e、--primary: #3aacef通过custom-variant dark (:is(.dark *));使 Tailwind 的dark:变体作用于.dark容器内的所有元素theme inline块把每一个--token暴露为 Tailwind 颜色--color-*从而让bg-token/text-token/border-token等工具类直接可用且随主题自动切换——因为theme inline中的--color-*值是var(--token)的引用而不是硬编码的十六进制值。主题类.dark由 src/pages/components/theme-provider.tsx 管理并在 React 挂载之前由 src/pages/common.ts 预先设置到document.documentElement上以避免首屏闪烁见 docs/develop.md 的 UI 一节。2. 基本用法四类工具类用途写法示例背景bg-background、bg-card、bg-primary-background、bg-muted文字text-foreground、text-muted-foreground、text-primary、text-destructive边框border-border、border-destructive焦点环ring-ring常用focus-visible:ring-ring/50layer base中还有一个全局重置* { apply border-border; }意味着任何元素的默认边框颜色就是border令牌无需逐个指定。3. 不透明修饰符Opacity modifiers直接叠加由于theme inline暴露的是 CSS 变量Tailwind v4 的透明度修饰符可直接作用于令牌bg-primary-background/90—— 实色主按钮的 hover 态按钮源码见 src/pages/components/ui/button.tsx默认态为bg-primary-background text-primary-foreground hover:bg-primary-background/90ring-destructive/20—— 错误输入的焦点环aria-invalid:ring-destructive/20见 button.tsxbg-input/30—— 表单输入的半透明填充bg-overlay/20—— 图片预览的悬浮蒙层见 ImagePreview.tsx。4. 硬性约束永不硬编码颜色值仓库的 UI 规范docs/develop.md 的 UI 一节明确要求不硬编码任何颜色值No hard-coded colors需要暗色专属微调时使用dark:变体例如dark:bg-...明暗两个主题下都必须可用的变更必须走令牌而不是字面量。这一约束同样记录在 docs/references/design-patterns.md 的无障碍小节中muted-foreground的对比度说明详见下文。二、基础表面与文字令牌Token / classLightDarkUsebackground#fafafa#1e1e1e页面背景foreground#1a1a1a#e5e5e5主文字card#ffffff#151515卡片 / 表面card-foreground#1a1a1a#e5e5e5卡片上的文字popover#ffffff#151515浮层下拉、tooltip、toast表面popover-foreground#1a1a1a#e5e5e5浮层中的文字overlayrgb(0 0 0 / 0.5)rgb(0 0 0 / 0.6)模态遮罩 —— Dialog / Sheet / AlertDialog 背景用bg-overlay永远不要硬编码bg-black/50fg-secondary#666666#b5b5b5次级文字比muted-foreground稍强要点表面层级background页面底→card/popover浮在页面上的表面。暗色下card比background更深#151515vs#1e1e1e这是暗色模式分层的主要手段之一遮罩统一走bg-overlay仓库中的 dialog.tsx、sheet.tsx、alert-dialog.tsx 三个浮层基元均使用fixed inset-0 z-50 bg-overlay实现遮罩foreground与card-foreground在明暗两个主题下取值一致因为它们都是主文字语义。三、品牌主色蓝色Token / classLightDarkUseprimary#1296db#3aacef品牌文字、图标、边框、指示器与激活态强调不是实色按钮填充primary-background#1296db#0b84d8实色主按钮/表面填充与primary-foreground搭配暗色更深、与primary色相统一形成均衡的层级primary-foreground#ffffff#ffffffprimary-background上的文字/图标primary-hover#0a7db8#1296db实色主按钮渐变/hover 端点或用bg-primary-background/90primary-light#d6ecfa#1e3040柔和品牌晕染 —— 图标背景、chip 填充设计要点primary与primary-background是两种语义前者用于文字/图标/边框等线条式强调后者才是实色填充。写实色按钮时应该用bg-primary-background而不是bg-primaryprimary-hover提供实色填充的渐变/hover 端点实际上 shadcn 的 Button 组件用透明度方案hover:bg-primary-background/90实现 hover见上文按钮源码两种方式都受支持源码细节当前 src/index.css 的:root中--primary-background实际值为#2b92ed#1296db与#0a7db8之间的中间蓝与文档表格所载的#1296db存在细微出入——令牌值的唯一事实来源是 src/index.css修改任何颜色都应改 CSS 而非文档。四、次级 / 柔和 / 强调背景同一个灰三种语义遵循 shadcn 惯例secondary/muted/accent在这里共用同一个灰色值——语义不同填充色相同。Token / classLightDarkUsesecondary#f0f0f0#2a2a2a次级按钮 / 填充secondary-foreground#1a1a1a#e5e5e5secondary 上的文字muted#f0f0f0#2a2a2a柔和背景分组填充、占位符muted-foreground#767676#8a8a8a弱化 / 描述性文字。已按 AA 调校在card/background上 ≥ 4.5:1—— 保留给次级/大号文字不要用于密集正文accent#f0f0f0#2a2a2ahover / 选中背景菜单项等accent-foreground#1a1a1a#e5e5e5accent 上的文字无障碍要点muted-foreground的 light 值#767676是从旧的#888888对比度仅 3.5:1正文不达标专门上调而来使其在#ffffff/#fafafa背景上达到 WCAG AA 的 ≥4.5:1src/index.css中的注释对此有明确说明正因如此muted-foreground只应承担描述性/次级文字角色密集正文请使用foreground或fg-secondarytoggle.tsx的 hover 态正是hover:bg-muted hover:text-muted-foreground选中态为data-[stateon]:bg-accent>背景/文字bg-background text-foreground卡片用bg-card浮层用bg-popover全部避免字面量主按钮bg-primary-background text-primary-foreground hover:bg-primary-background/90次按钮走secondary系危险操作bg-destructive text-destructive-foreground错误输入aria-invalid:border-destructive aria-invalid:ring-destructive/20焦点环统一focus-visible:ring-ring/50模态遮罩bg-overlay禁bg-black/50分类标签bg-label-hue-bg text-label-hue-fg经getNameAvatarTone哈希状态图标实色success/warning状态徽章success-bg/success-fg、warning-bg/warning-fg、skill-bg/skill-fg滚动容器加.scrollbar-custom浮层层级raised 用shadow-mdrounded-lgoverlay 用shadow-lgrounded-xl不越shadow-lg明暗双主题验证任何改动都必须在 light 与 dark 下各检查一次含muted-foreground的 AA 对比度约束。遵循这套令牌体系ScriptCat 的 UI 即可在保持品牌统一蓝色#1296DB系、紫色skill系、8 色调分类标签的同时让明暗主题切换完全由 CSS 变量驱动不需要任何 JavaScript 干预或组件级特判。赞分享前端开发者工具插件系统【免费下载链接】scriptcatScriptCat, a browser extension that can execute userscript; 脚本猫一个可以执行用户脚本的浏览器扩展项目地址https://gitcode.com/gh_mirrors/sc/scriptcat点击查看免费下载相关推荐AstroWind 样式系统实战指南基于 Tailwind CSS v4 的主题令牌、暗色模式与 shadcn/ui 兼容层AstroWind 样式系统实战指南基于 Tailwind CSS v4 的主题令牌、暗色模式与 shadcn/ui 兼容层 AstroWind 的整套样式体前端UI组件FAST focusStrokeInner 设计令牌完全指南聚焦描边的内层色彩体系与实战用法FAST focusStrokeInner 设计令牌完全指南聚焦描边的内层色彩体系与实战用法 导读 本文聚焦 microsoft/fast componen前端UI组件Sure 设计令牌体系以 W3C DTCG JSON 为单一事实源驱动 Tailwind v4 主题Sure 设计令牌体系以 W3C DTCG JSON 为单一事实源驱动 Tailwind v4 主题 Sure 是一个开源的个人财务管理应用Ruby on金融科技后端前端移动开发桌面应用AI 应用上一篇Agent 工具调用不踩坑capsule-react 两阶段派发与过期结果过滤机制解析下一篇3个简单步骤如何用FontCenter彻底告别AutoCAD字体缺失烦恼创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考