pantoken / plugins/pantoken/colors/src / overlayColors

関数: overlayColors() ​

overlayColors(base, overlay, percent?): string

ベータ

不透明な base の上に overlay（強さ percent%）を重ねて平坦化する — CSS のみの代替実装で、ui-color-utils overlayColors の代わりとなるものです。あのヘルパーは source-over で 2 つの RGBA 色を合成して 1 つの不透明な結果を作ります。一般的なケース（半透明のティントが不透明な面の上に乗る）はまさに 2 色の color-mix() に相当します。一般的な RGBA-over-RGBA の合成は単一の CSS 色になり得ないため、ここでは不透明ベースの場合のみを扱います。

パラメーター ​

base ​

string

不透明な背景色。

overlay ​

string

その上に重ねられる色。

percent? ​

number = 50

どれだけ overlay が透けて見えるか（0〜100、デフォルト 50）。

戻り値 ​

string

color-mix() 式。

例 ​

ts
overlayColors("var(--surface)", "var(--brand)", 12);
// "color-mix(in srgb, var(--brand) 12%, var(--surface))"