@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
24 lines (23 loc) • 1.03 kB
JavaScript
import { isColorWithAlpha } from '../filters/index.js';
import { alpha } from './utilities/alpha.js';
import { getTokenValue } from './utilities/getTokenValue.js';
import { normalizeColorValue } from './utilities/normalizeColorValue.js';
/**
* @description replaces tokens value with `rgba` color using the tokens `alpha` property to specify the value used for alpha
* @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
* @matcher matches all tokens of $type `color` with an `alpha` property
* @transformer returns `rgba` string
*/
export const colorToRgbAlpha = {
name: 'color/rgbAlpha',
type: 'value',
transitive: true,
filter: isColorWithAlpha,
transform: (token, config) => {
const rawValue = getTokenValue(token);
const colorString = normalizeColorValue(rawValue);
if (token.alpha === null)
return colorString;
return alpha(colorString, token.alpha, token, config);
},
};