@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
24 lines (23 loc) • 1.01 kB
JavaScript
import { toHex } from 'color2k';
import { isGradient } from '../filters/isGradient.js';
import { getTokenValue } from './utilities/getTokenValue.js';
/**
* @description converts gradient tokens value to css gradient
* @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
* @matcher matches all tokens of $type `gradient`
* @transformer returns a `css gradient` string
*/
export const gradientToCss = {
name: 'gradient/css',
type: 'value',
transitive: true,
filter: isGradient,
transform: (token) => {
var _a, _b;
const { angle } = (_b = (_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.gradient']) !== null && _b !== void 0 ? _b : {};
const stops = getTokenValue(token).map(({ color, position }) => {
return `${toHex(color)} ${position * 100}%`;
});
return `linear-gradient(${angle || 180}deg, ${stops.join(', ')})`;
},
};