コンテンツにスキップ
Lism CSS

color:mix

c, bgc, bdc に対して、それぞれ-c:mix,-bgc:mix,-bdc:mixクラスという color-mix() で色を生成できる特殊なProp クラスを用意しています。

↓
CSS
.-c\:mix {
  --_c1: currentColor;
  --_c2: transparent;
  --c: color-mix(in srgb, var(--_c1) var(--_mixpct-c, 50%), var(--_c2));
}
.-bgc\:mix {
  --_bgc1: currentColor;
  --_bgc2: transparent;
  --bgc: color-mix(in srgb, var(--_bgc1) var(--_mixpct-bgc, 50%), var(--_bgc2));
}
.-bdc\:mix {
  --_bdc1: currentColor;
  --_bdc2: transparent;
  --bdc: color-mix(in srgb, var(--_bdc1) var(--_mixpct-bdc, 50%), var(--_bdc2));
}
↓
使用例

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

リサイズ可能 
<div
  class='-bgc:mix -c:mix -p:30'
  style='--_bgc1:var(--blue);--_mixpct-bgc:10%;--_c1:var(--blue);--_c2:currentColor;--_mixpct-c:40%'
>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Lismコンポーネントでは、これらを手軽に呼び出せるように、c='{c1}:({c2}:){NUM}%' の書式で指定することができるようにもなっています。

↓
JSXでの使用方法

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

リサイズ可能 
<Lism bgc='blue:10%' c='blue:currentColor:40%' p='30'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Lism>