import { colorFactory , mergeConfigs } from '@shopify/polaris-tokens/dist-modern' ; import { config as base } from '@shopify/polaris-tokens/dist-modern/configs/base' ; import type { HSLAColor } from '../color-types' ; import type { Theme , ProcessedThemeConfig } from './types' ; interface CustomPropertiesObject { [ key ] : string ; } export function buildCustomPropertiesNoMemo ( themeConfig , tokens ? ) { const { colors = { } , colorScheme , config , frameOffset = '0px' } = themeConfig ; const mergedConfig = mergeConfigs ( base , config || { } ) ; return customPropertyTransformer ( { ... colorFactory ( colors , colorScheme , mergedConfig ) , ... tokens , frameOffset , } ) ; } export function buildThemeContext ( themeConfig , cssCustomProperties ? ) { const { logo , colors = { } , colorScheme } = themeConfig ; return { logo , cssCustomProperties : toString ( cssCustomProperties ) , colors , colorScheme , } ; } export function toString ( obj ? ) { if ( obj ) { return Object . entries ( obj ) . map ( ( pair ) => pair . join ( ':' ) ) . join ( ';' ) ; } else { return '' ; } } function customPropertyTransformer ( properties ) { return Object . entries ( properties ) . reduce ( ( transformed , [ key , value ] ) => ( { ... transformed , [ toCssCustomPropertySyntax ( key ) ] : value , } ) , { } ) ; } export function toCssCustomPropertySyntax ( camelCase ) { return `--p-${ camelCase . replace ( /([A-Z0-9])/g , '-$1' ) . toLowerCase ( ) }` ; } function memoize ( fnToMemoize ) { const cache = new Map ( ) ; return function ( ... args ) { const key = JSON . stringify ( [ fnToMemoize . name , args ] ) ; if ( cache . get ( key ) === undefined ) { cache . set ( key , fnToMemoize ( ... args ) ) ; } return cache . get ( key ) ; } ; } export const buildCustomProperties = memoize ( buildCustomPropertiesNoMemo ) ;