@patreon/studio/module/hooks/extract-tokens/useExtractTokenValuePair.js

Patreon Studio Design System

import { useCallback } from 'react';
import { useColorSystemContainerState } from '~/components/ColorSystemContainer';
import { useTokenValueCache } from '~/components/TokenValueCache';
import { getCacheKey } from '~/utilities/color-system';
import { getTokenName } from '~/utilities/tokens';
/**
 * This hook can be used as an escape hatch when you need
 * to get the light and dark value pair of a token.
 */
export function useExtractTokenValuePair() {
    const { inputColor, tokenMaps } = useColorSystemContainerState();
    const tokenValueCache = useTokenValueCache();
    // this is casts to the non-partial type because we know that the default token values are always complete
    const defaultTokenValues = tokenValueCache.default;
    return useCallback(function extractTokenValuePair(token) {
        const tokenName = getTokenName(token);
        if (inputColor === 'default') {
            return {
                light: defaultTokenValues.light[tokenName],
                dark: defaultTokenValues.dark[tokenName],
            };
        }
        const cacheKey = getCacheKey({ inputColor, key: tokenMaps.key });
        return {
            light: tokenValueCache[cacheKey].light?.[tokenName] ?? defaultTokenValues.light[tokenName],
            dark: tokenValueCache[cacheKey].dark?.[tokenName] ?? defaultTokenValues.dark[tokenName],
        };
    }, [defaultTokenValues.dark, defaultTokenValues.light, inputColor, tokenMaps.key, tokenValueCache]);
}
//# sourceMappingURL=useExtractTokenValuePair.js.map