Wordpress Add variable to Button - Outline buttons suck no more

buttons.css

.wp-block-button {
	--hover-bg-color: color-mix(in srgb, var(--button--color, var(--wp--preset--color--purple-600)) 70%, black);
	--outline-color: color-mix(in srgb, var(--button--color, var(--wp--preset--color--purple-600)) 70%, transparent);

	& .wp-block-button__link {
		border: 2px solid var(--button--color, var(--wp--preset--color--purple-600));
		outline: 2px solid transparent;
		outline-offset: 2px;

		&:focus-visible {
			outline: 2px solid var(--outline-color);
		}

		&:hover {
			border-color: var(--hover-bg-color);
			background-color: var(--hover-bg-color);
		}
	}
	
	&.is-style-outline-only {
		& .wp-element-button.wp-block-button__link {
			background-color: transparent !important;
			color: var(--button--color, var(--wp--preset--color--primary-900));
		}
		
		&:hover {
			color: var(--hover-bg-color);
			border-color: var(--hover-bg-color);
		}
	}
}

buttons.js

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable import/no-unresolved */
/**
 * WordPress dependencies
 */
import { registerBlockStyle } from '@wordpress/blocks';
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';

const BUTTON_COLOR_CUSTOM_PROPERTY = '--button--color';

registerBlockStyle('core/button', {
	name: 'outline-only',
	label: __('Outline', 'av-block-theme'),
});

const sanitizeColorSlug = (slug = '') => `${slug}`.toLowerCase().replace(/[^a-z0-9-]/g, '');

const getButtonBackgroundCssValue = (attributes = {}) => {
	if (attributes?.backgroundColor) {
		const slug = sanitizeColorSlug(attributes.backgroundColor);

		if (slug) {
			return `var(--wp--preset--color--${slug})`;
		}
	}

	if (attributes?.style?.color?.background) {
		return attributes.style.color.background;
	}

	return '';
};

const applyButtonColorCustomProperty = (props = {}, attributes = {}) => {
	const backgroundValue = getButtonBackgroundCssValue(attributes);

	if (!backgroundValue) {
		return props;
	}

	const currentStyle = props.style ?? {};

	if (currentStyle[BUTTON_COLOR_CUSTOM_PROPERTY] === backgroundValue) {
		return props;
	}

	return {
		...props,
		style: {
			...currentStyle,
			[BUTTON_COLOR_CUSTOM_PROPERTY]: backgroundValue,
		},
	};
};

addFilter('blocks.registerBlockType', 'block-theme/core-button/text-only', (settings, name) => {
	if (name !== 'core/button') {
		return settings;
	}

	const existingGetEditWrapperProps = settings?.getEditWrapperProps;

	return {
		...settings,
		getEditWrapperProps(attributes) {
			const wrapperProps = existingGetEditWrapperProps ? existingGetEditWrapperProps(attributes) : {};

			return applyButtonColorCustomProperty(wrapperProps, attributes);
		},
	};
});

addFilter('blocks.getSaveContent.extraProps', 'block-theme/core-button/text-only', (props, blockType, attributes) => {
	if (blockType?.name !== 'core/button') {
		return props;
	}

	return applyButtonColorCustomProperty(props ?? {}, attributes);
});