color-mix() 仅支持静态灰度衍生，无法动态响应 :disabled 状态；正确做法是预定义 --btn-bg-disabled 等变量并在 :disabled 中引用，配合 filter 或显式颜色覆盖，同时确保交互与语义属性同步。
color-mix() 是目前唯一能真正“相对变灰”的现代 CSS 方案，但仅适用于静态衍生色；它不能用于 :disabled 状态的动态响应式灰度控制——那不是它的设计场景。
为什么 color-mix(in srgb, var(--primary) 50%, gray(50%) 50%) 不能用在 :disabled 上
该函数本身不感知状态，只接受确定值（如自定义属性、字面量颜色），且必须指定色彩空间（in srgb）。你无法在 button:disabled 规则里写 background-color: color-mix(in srgb, var(--btn-bg) 30%, gray(70%) 70%) 并指望它随 --btn-bg 实时重算——CSS 变量在 color-mix() 中是静态求值的，但浏览器不会在禁用态切换时触发重解析。更关键的是：color-mix() 不支持 from 语法，所有尝试如 color-mix(in srgb, from --btn-bg l c h) 都会被静默丢弃。
:disabled 状态下真正可用的灰度手段只有两类
一类是视觉层滤镜，一类是显式颜色覆盖：
-
filter: grayscale(100%) brightness(0.92)：需同时加-webkit-filter兜底旧 Safari；注意 iOS 14 及更早版本可能渲染过暗，brightness()是必要补偿 -
background-color: color-mix(in srgb, var(--btn-bg) 40%, #f5f5f5 60%)：这是color-mix()的正确用法——提前生成一个“已灰化”的备用色变量，再在:disabled中直接引用，例如：button:disabled { background-color: var(--btn-bg-disabled); } - 绝对不要混用：比如先设
filter再叠加color-mix()衍生色，滤镜会作用于最终渲染像素，导致灰度叠加失真
自定义属性 + color-mix() 的安全落地模式
想让灰阶“可维护”，就得放弃动态计算，改用预生成策略：
- 在
:root或组件作用域中，为每个主色定义对应灰阶色：--btn-bg-disabled: color-mix(in srgb, var(--btn-bg) 30%, #e0e0e0 70%); - 确保所有
color-mix()调用都带in srgb，否则 Safari 16.4+ 以下版本会忽略整条规则 - 禁用样式统一走类名或伪类，但只用预生成变量：
button:disabled { background-color: var(--btn-bg-disabled); color: var(--btn-text-disabled); } - 若需响应深色模式，另配一套暗色系灰阶变量，用
@media (prefers-color-scheme: dark)切换，而非试图让color-mix()自动适配
最易被忽略的一点：灰阶只是表层反馈。color-mix() 生成的色值再准，如果没同步设置 cursor: not-allowed、pointer-events: none（或保留原生 disabled 属性）、以及 aria-disabled="true"，用户依然能聚焦、键盘触发、读屏器误报——那不是禁用，是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
