令牌体检

为什么只数不判

生成出来的界面有个通病：每个组件各写各的。卡片 12px、小卡片 10px、按钮 8px、大按钮 9px， 单看每一个都没错，合在一起就是没有刻度。这种问题肉眼看不出来， 因为你一次只看一个组件；数出来就很明显。

所以这一页做的事很窄：把 CSS 里的散值按类别归堆，报每一类有几种、各出现几次， 超过一套刻度通常的档数就点出来。门槛是这个站的建议：圆角 5 档、阴影 4 档、字号 8 档以内， Tailwind、Ant、Material 的刻度都在这个范围里。不是规范，界面上也这么标。

动手

粘一个组件文件或者整份样式表。已经写成 var() 的不算散值，注释里的不算。 「试一段样例」是一份典型的生成出来的 CSS，先看看它会被数出什么。

顺手点名的几条

• 禁用态用了 opacity。半透明叠在不同底上成色不可控，禁用态该用实色， 配色工作台会算。这条判 fail，不是 warn。
• outline: none。键盘用户靠焦点环知道自己在哪，删掉就是断路。 要改样式改颜色和 offset，别删。
• 四位数的 z-index。9999 的意思是「我也不知道该压在谁上面」。 层级定成刻度，每一档对应一类东西。
• 一个自定义属性都没有。颜色全是散值，深色模式就没地方下手。

收成变量

底下导出的是一份草稿：每一类按数值排好，起了编号名。它不替你合并， 但挨得很近的两个值（10px 和 12px、.45 和 .5）多半该合成一个，看一眼就能定。 名字改成你自己的，就能当 :root 用了。