@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
68 lines (67 loc) • 2.95 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { isSource } from '../filters/index.js';
const validFigmaToken = (token, options) => __awaiter(void 0, void 0, void 0, function* () {
const valueProp = options.usesDtcg ? '$value' : 'value';
const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number'];
// is a siource token, not an included one
if (!isSource(token) || !token.$type)
return false;
if (`${token[valueProp]}`.substring(token[valueProp].length - 2) === 'em')
return false;
// has a collection attribute
if (!('$extensions' in token) ||
!('org.primer.figma' in token.$extensions) ||
!('collection' in token.$extensions['org.primer.figma']))
return false;
// is a color or dimension type
return validTypes.includes(token.$type);
});
export const figma = (outputFile, prefix, buildPath, options = {}) => {
const { theme } = options;
const figmaTheme = ((theme === null || theme === void 0 ? void 0 : theme[0]) || '').replaceAll('-', ' ');
return {
prefix,
buildPath,
preprocessors: ['themeOverrides'],
transforms: [
'color/rgbaFloat',
'fontFamily/figma',
'float/pixelUnitless',
'dimension/pixelUnitless',
// 'border/figma',
// 'typography/figma',
'fontWeight/number',
'figma/attributes',
'name/pathToFigma',
],
options: Object.assign(Object.assign({ basePxFontSize: 16, fontFamilies: {
'fontStack/system': 'SF Pro Text',
'fontStack/sansSerif': 'SF Pro Text',
'fontStack/sansSerifDisplay': 'SF Pro Display',
'fontStack/monospace': 'SF Mono',
} }, options), { theme: figmaTheme, themeOverrides: {
theme: options.theme,
} }),
files: [
{
destination: outputFile,
filter: (token, config) => {
return validFigmaToken(token, config);
},
format: `json/figma`,
options: {
outputReferences: true,
theme: figmaTheme,
},
},
],
};
};