54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
function getClosestColor(
|
|
element: Element | null,
|
|
colorType: 'color' | 'backgroundColor'
|
|
): string | null {
|
|
if ( ! element ) {
|
|
return null;
|
|
}
|
|
const color = window.getComputedStyle( element )[ colorType ];
|
|
if ( color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' ) {
|
|
return color;
|
|
}
|
|
return getClosestColor( element.parentElement, colorType );
|
|
}
|
|
|
|
function setStyles() {
|
|
/**
|
|
* Get the background color of the body then set it as the background color
|
|
* of the Mini-Cart Contents block.
|
|
*
|
|
* We only set the background color, instead of the whole background. As
|
|
* we only provide the option to customize the background color.
|
|
*/
|
|
const style = document.createElement( 'style' );
|
|
const backgroundColor = getComputedStyle( document.body ).backgroundColor;
|
|
// For simplicity, we only consider the background color of the first Mini-Cart button.
|
|
const firstMiniCartButton = document.querySelector(
|
|
'.wc-block-mini-cart__button'
|
|
);
|
|
const badgeTextColor = firstMiniCartButton
|
|
? getClosestColor( firstMiniCartButton, 'backgroundColor' )
|
|
: 'inherit';
|
|
const badgeBackgroundColor = firstMiniCartButton
|
|
? getClosestColor( firstMiniCartButton, 'color' )
|
|
: 'inherit';
|
|
|
|
// We use :where here to reduce specificity so customized colors and theme
|
|
// CSS take priority.
|
|
style.appendChild(
|
|
document.createTextNode(
|
|
`:where(.wp-block-woocommerce-mini-cart-contents) {
|
|
background-color: ${ backgroundColor };
|
|
}
|
|
:where(.wc-block-mini-cart__badge) {
|
|
background-color: ${ badgeBackgroundColor };
|
|
color: ${ badgeTextColor };
|
|
}`
|
|
)
|
|
);
|
|
|
|
document.head.appendChild( style );
|
|
}
|
|
|
|
export default setStyles;
|