hsl(from var(--primary) h s l)不能生成单色系，因为from仅解构变量为静态h/s/l值，不进行任何颜色变换，结果与直接写HSL字面量完全相同；真正变色必须依赖calc()运算调整通道。
直接用 hsl(from) 搭配 calc() 就能生成单色系 UI，不用手写一堆 HEX，也不依赖 JS；但关键在于必须用 calc() 调整通道值，否则只是原样复刻基础色。
为什么 hsl(from var(--primary) h s l) 不能生成单色系
from 关键字只做解构：把 --primary 拆成 h、s、l 三个静态数值，再原样拼回去。结果和直接写 hsl(216 64% 61%) 完全一样——所有状态色都长得一模一样，毫无层次。
- 浏览器不报错，但整条声明等于没写
- hover、disabled、active 等状态全部失效
- 真正变色必须靠
calc(l - 10)、calc(s * 0.7)这类运算
用 hsl(from) + calc() 控制明暗与饱和度梯度
HSL 是单色系最稳的选择：人眼对亮度 l 和饱和度 s 的变化敏感且线性，适合构建可预测的视觉层级。
-
l是 0–100 的纯数字（不是百分比），calc(l + 20)合法，calc(l + 20%)静默失效 - 按钮悬停微暗：
background: hsl(from var(--primary) h s calc(l - 10)) - 禁用态提亮+降饱和：
color: hsl(from var(--primary) h calc(s * 0.3) calc(l + 15)) - 浅底深字防发灰：
color: hsl(from var(--primary) h calc(s * 0.8) calc(l + 20))
绕不开的语法雷区：空格、斜杠、单位一个都不能错
相对颜色函数极其脆弱，错一个字符整条样式就被浏览器静默丢弃，DevTools 里连 warning 都不显示。
立即学习“前端免费学习笔记（深入）”；
-
from和颜色值之间**必须有空格**：hsl(from var(--primary) h s l)✅，hsl(fromvar(--primary) h s l)❌ - alpha 必须用
/引入：hsl(from var(--primary) h s l / 0.6)✅，hsl(from var(--primary) h s l, 0.6)❌ -
l值容易越界（比如calc(l - 30)得负数），建议用max(15%, calc(l - 30))或min(90%, calc(l + 20))兜底
最难的从来不是写对一行 hsl(from var(--primary) h s calc(l - 10))，而是变量是否分层命名（如 --primary-base vs --primary-hover）、亮度分布是否符合人眼感知（非线性调整）、以及是否为 l < 15% 或 s > 95% 这类边界做了 clamp —— OLED 屏或深色模式下，漏掉这些，UI 就容易翻车。
