@patreon/studio/module/components/ColorSystemContainer/index.jsx

Patreon Studio Design System

'use client';
import React, { useMemo } from 'react';
import { getCacheKey, isHexColor } from '../../utilities/color-system';
import devWarn from '../../utilities/dev-warn';
import { generateTokensDefinitionFromTokenMap } from '../ColorSystem/lib/generateTokenMap';
import { defaultTokenMap } from '../ColorSystem/maps';
import { TokenValueCache } from '../TokenValueCache';
import { DefaultColorTokens } from './components/DefaultColorTokens';
import { ReplaceColorTokens } from './components/ReplaceColorTokens';
const ColorSystemContainerStateContext = React.createContext({
    inputColor: 'default',
    tokenMap: defaultTokenMap,
});
export const useColorSystemContainerState = () => React.useContext(ColorSystemContainerStateContext);
/**
 * ColorSystemContainer is a React component that changes token values within its context.
 */
export function ColorSystemContainer({ color, tokenMap, children }) {
    // if no color is provided, we don't need to do anything
    if (!color) {
        return <>{children}</>;
    }
    // if the color passed is not a hex string or `reset`, we don't need to wrap the children
    // we also want to warn the developer that the color is invalid
    if (!isHexColor(color) && color !== 'reset') {
        devWarn('ColorSystemContainer: Invalid color value provided. No color replacement will occur.');
        return <>{children}</>;
    }
    if (color === 'reset') {
        return <ColorSystemContainerDefault>{children}</ColorSystemContainerDefault>;
    }
    return (<ColorSystemContainerHex inputColor={color} tokenMap={tokenMap}>
      {children}
    </ColorSystemContainerHex>);
}
/**
 * ColorSystemContainerPassthrough is used to pass the current color system color to its children.
 * Useful for passing creator colors into a portalled component.
 */
export function ColorSystemContainerPassthrough({ children }) {
    const { inputColor, tokenMap } = useColorSystemContainerState();
    if (inputColor === 'default') {
        return <ColorSystemContainerDefault>{children}</ColorSystemContainerDefault>;
    }
    return (<ColorSystemContainerHex inputColor={inputColor} tokenMap={tokenMap}>
      {children}
    </ColorSystemContainerHex>);
}
// container for the default color system
function ColorSystemContainerDefault({ children }) {
    const containerState = { inputColor: 'default', tokenMap: defaultTokenMap };
    return (<ColorSystemContainerStateContext.Provider value={containerState}>
      <DefaultColorTokens>{children}</DefaultColorTokens>
    </ColorSystemContainerStateContext.Provider>);
}
// container for color system driven by a color hex
function ColorSystemContainerHex({ inputColor, tokenMap = defaultTokenMap, children, }) {
    const containerState = useMemo(() => ({ inputColor, tokenMap }), [inputColor, tokenMap]);
    const cacheKey = getCacheKey({ inputColor, tokenMap });
    const generatedTokensDefinition = generateTokensDefinitionFromTokenMap({ inputColor, tokenMap });
    return (<ColorSystemContainerStateContext.Provider value={containerState}>
      <TokenValueCache cacheKey={cacheKey} value={generatedTokensDefinition}>
        <ReplaceColorTokens cacheKey={cacheKey} tokensDefinition={generatedTokensDefinition}>
          {children}
        </ReplaceColorTokens>
      </TokenValueCache>
    </ColorSystemContainerStateContext.Provider>);
}
//# sourceMappingURL=index.jsx.map