css中,由基准色提取其他变体

.ab{
  --base:hsl(217 73% 50%);
  --base-light:hsl(from var(--base) h s 75%);
  --base-dark:hsl(from var(--base) h s 25%);
}
.aaa{color:var(--base-light);}
.ccc{color:var(--base-dark);}

.toast{
  --toast-color:#222;
  border:2px solid var(--toast-color);
  color:hsl(from var(--toast-color) h s 25%);
  background:hsl(from var(--toast-color) h s 90%);
  box-shadow:0 12px 12px -8px hsl(from var(--toast-color) h s l /0.325);
}
.toast[data-toast='info']{
  --toast-color:#0362fc;
}

      <div className="ab">
        <div className="aaa">aaa</div>
        <div className="ccc">ccccc</div>
      </div>
      <div className="toast" data-toast="info">阿三大萨达所</div>