@patreon/studio
Version:
Patreon Studio Design System
51 lines • 2.38 kB
JavaScript
import { getCacheKey } from '../../../utilities/color-system';
import { LRUCache } from '../../../utilities/lru';
import { generateColorPalette } from './generateColorPalette';
/**
* Generates a token map based on a map definition and an extended color palette.
*
* @param inputColor The input color to use when generating the token map.
* @param tokenMap A JSON mapping of tokens to color ramp stops.
* @param config An optional color palette to use when generating the color palette
*
* @returns A tokens definition object with token keys and hex values
*/
export function uncachedGenerateTokensDefinitionFromTokenMap({ inputColor, tokenMap: tokenMapByColorMode, }) {
const palette = generateColorPalette({ inputColor });
// Generate the token map for each color mode (light, dark, etc.)
return Object.entries(tokenMapByColorMode).reduce((acc, [colorMode, tokenMap]) => {
// for each token in the token map, get the palette color value
acc[colorMode] = Object.entries(tokenMap).reduce((innerAcc, [token, mapping]) => {
if (mapping !== undefined) {
const [ramp, degree] = mapping.split('.');
const degreeInt = parseInt(degree, 10);
innerAcc[token] = palette[colorMode][ramp][degreeInt];
}
return innerAcc;
}, {});
return acc;
}, {});
}
/**
* Generates a token map based on a map definition and an extended color palette.
*
* @param inputColor The input color to use when generating the token map.
* @param tokenMap A JSON mapping of tokens to color ramp stops.
* @param config An optional color palette to use when generating the color palette
*
* @returns A tokens definition object with token keys and hex values
*/
export const generateTokensDefinitionFromTokenMap = (() => {
const cache = new LRUCache({ size: 100 });
return ({ cacheKey: userCacheKey, inputColor, tokenMap }) => {
const cacheKey = userCacheKey ?? getCacheKey({ inputColor, tokenMap });
const cachedTokensDefintion = cache.get(cacheKey);
if (cachedTokensDefintion) {
return cachedTokensDefintion;
}
const palette = uncachedGenerateTokensDefinitionFromTokenMap({ inputColor, tokenMap });
cache.set(cacheKey, palette);
return palette;
};
})();
//# sourceMappingURL=generateTokenMap.js.map