@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
71 lines (70 loc) • 3.41 kB
JavaScript
/**
* Recursively walks tokens and inherits group-level properties to child tokens.
* Group properties ($description, $extensions at group level) are merged into child tokens
* that don't have their own values for those properties.
*
* Per W3C Design Tokens spec: https://www.designtokens.org/tr/drafts/format/#group-properties
*/
function inheritProperties(tokens, inheritedProps = {}) {
var _a;
const result = {};
// Extract group-level properties from current level
const currentGroupProps = {};
if (typeof tokens.$description === 'string') {
currentGroupProps.$description = tokens.$description;
}
if (tokens.$extensions && typeof tokens.$extensions === 'object') {
currentGroupProps.$extensions = tokens.$extensions;
}
// Merge inherited with current (current takes precedence)
const mergedProps = Object.assign(Object.assign({}, inheritedProps), currentGroupProps);
// Merge $extensions deeply
if (inheritedProps.$extensions || currentGroupProps.$extensions) {
mergedProps.$extensions = Object.assign(Object.assign({}, inheritedProps.$extensions), currentGroupProps.$extensions);
}
for (const [key, value] of Object.entries(tokens)) {
// Skip group-level properties (they're inherited, not copied)
if (key === '$description' || key === '$extensions') {
continue;
}
if (typeof value !== 'object' || value === null) {
result[key] = value;
continue;
}
const tokenValue = value;
// Check if this is a design token (has $value or value)
if ('$value' in tokenValue || 'value' in tokenValue) {
// It's a token - merge inherited properties
const token = tokenValue;
// Only inherit $description if token doesn't have its own
const inheritedDescription = !token.$description && mergedProps.$description ? mergedProps.$description : undefined;
// Merge $extensions (token-level takes precedence over inherited)
let mergedExtensions = token.$extensions;
if (mergedProps.$extensions) {
const inheritedLlm = mergedProps.$extensions['org.primer.llm'];
const tokenLlm = (_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.llm'];
if (inheritedLlm && !tokenLlm) {
// Token has no LLM extension, inherit from group
mergedExtensions = Object.assign(Object.assign({}, token.$extensions), { 'org.primer.llm': inheritedLlm });
}
}
result[key] = Object.assign(Object.assign(Object.assign({}, token), (inheritedDescription ? { $description: inheritedDescription } : {})), (mergedExtensions ? { $extensions: mergedExtensions } : {}));
}
else {
// It's a nested group - recurse with merged properties
result[key] = inheritProperties(tokenValue, mergedProps);
}
}
return result;
}
/**
* Preprocessor that inherits group-level $description and $extensions to child tokens.
* This enables W3C Design Tokens group properties to be available on individual tokens
* during formatting.
*/
export const inheritGroupProperties = {
name: 'inheritGroupProperties',
preprocessor: (dictionary) => {
return inheritProperties(dictionary);
},
};