@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
27 lines (26 loc) • 1.08 kB
JavaScript
import { isColorWithAlpha } from '../filters/isColorWithAlpha.js';
import { getTokenValue } from './utilities/getTokenValue.js';
import { normalizeColorValue } from './utilities/normalizeColorValue.js';
export const cssColorMix = (colorA, colorB, colorBPercent) => {
if (colorBPercent < 0 || colorBPercent > 1) {
throw new Error(`Invalid argument for "cssColorMix", colorBPercent must be between 0 and 1, ${colorBPercent} provided.`);
}
if (colorBPercent === 0)
return colorA;
if (colorBPercent === 1)
return colorB;
return `color-mix(in srgb, ${colorA}, ${colorB} ${colorBPercent * 100}%)`;
};
export const colorAlphaToCss = {
name: 'colorAlpha/css',
type: 'value',
transitive: true,
filter: isColorWithAlpha,
transform: (token) => {
const rawValue = getTokenValue(token);
const colorString = normalizeColorValue(rawValue);
if (token.alpha === null || token.alpha === undefined)
return colorString;
return cssColorMix(colorString, 'transparent', 1 - token.alpha);
},
};