@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
57 lines (56 loc) • 2.02 kB
JavaScript
import { asArray } from '../utilities/asArray.js';
const figmaScopes = {
all: ['ALL_SCOPES'],
radius: ['CORNER_RADIUS'],
size: ['WIDTH_HEIGHT'],
gap: ['GAP'],
bgColor: ['FRAME_FILL', 'SHAPE_FILL'],
fgColor: ['TEXT_FILL', 'SHAPE_FILL'],
effectColor: ['EFFECT_COLOR'],
effectFloat: ['EFFECT_FLOAT'],
borderColor: ['STROKE_COLOR'],
borderWidth: ['STROKE_FLOAT'],
opacity: ['OPACITY'],
fontFamily: ['FONT_FAMILY'],
fontStyle: ['FONT_STYLE'],
fontWeight: ['FONT_WEIGHT'],
fontSize: ['FONT_SIZE'],
lineHeight: ['LINE_HEIGHT'],
letterSpacing: ['LETTER_SPACING'],
paragraphSpacing: ['PARAGRAPH_SPACING'],
paragraphIndent: ['PARAGRAPH_INDENT'],
};
const getScopes = (scopes) => {
if (typeof scopes === 'string')
scopes = [scopes];
if (Array.isArray(scopes))
return scopes
.map(scope => {
if (scope in figmaScopes)
return figmaScopes[scope];
throw new Error(`Invalid scope: ${scope}`);
})
.flat();
return ['ALL_SCOPES'];
};
/**
* @description retrieves figma attributes from token and adds them to attributes
* @type attribute transformer — [StyleDictionary.AttributeTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
* @matcher matches all tokens
* @transformer returns ab object of figma attributes
*/
export const figmaAttributes = {
name: 'figma/attributes',
type: `attribute`,
transform: (token, platform = {}) => {
var _a, _b;
const { modeOverride, collection, scopes, group, codeSyntax } = ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.figma']) || {};
return {
mode: asArray((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme)[0] || modeOverride || 'default',
collection,
group: group || collection,
scopes: getScopes(scopes),
codeSyntax,
};
},
};