https://www.escaper.sk/wp-content/plugins/jetpack/modules/contact-form/js/form-styles.js?ver=11.8.6

1window.addEventListener( 'load', () => {
2	const FRONTEND_SELECTOR = '.wp-block-jetpack-contact-form-container';
3	const EDITOR_SELECTOR = '[data-type="jetpack/contact-form"]';
4
5	const observer = new MutationObserver( () => {
6		generateStyleVariables( FRONTEND_SELECTOR );
7		generateStyleVariables( EDITOR_SELECTOR );
8	} );
9
10	observer.observe( document.querySelector( 'body' ), {
11		childList: true,
12		subtree: true,
13	} );
14
15	//Make sure to execute at least once if not triggered by the observer
16	setTimeout( () => {
17		generateStyleVariables( FRONTEND_SELECTOR );
18		generateStyleVariables( EDITOR_SELECTOR );
19	}, 300 );
20} );
21
22function generateStyleVariables( selector, outputSelector = 'body' ) {
23	const STYLE_PROBE_CLASS = 'contact-form__style-probe';
24	const STYLE_PROBE_STYLE =
25		'position: absolute; z-index: -1; width: 1px; height: 1px; visibility: hidden';
26	const HTML = `
27		<div class="contact-form" style="">
28			<div class="wp-block-button is-style-outline">
29				<div class="wp-block-button__link">Test</div>
30			</div>
31			<div class="jetpack-field">
32				<input class="components-text-control__input" type="text">
33			</div>
34		</div>
35	`;
36
37	const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
38	const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
39
40	if (
41		! doc.querySelectorAll( selector ).length ||
42		doc.querySelectorAll( `.${ STYLE_PROBE_CLASS }` ).length
43	) {
44		return;
45	}
46
47	const styleProbe = doc.createElement( 'div' );
48	styleProbe.className = STYLE_PROBE_CLASS;
49	styleProbe.style = STYLE_PROBE_STYLE;
50	styleProbe.innerHTML = HTML;
51
52	const container = doc.querySelector( selector );
53	container.appendChild( styleProbe );
54
55	const bodyNode = doc.querySelector( 'body' );
56	const buttonNode = styleProbe.querySelector( '.wp-block-button__link' );
57	const inputNode = styleProbe.querySelector( 'input[type="text"]' );
58
59	const backgroundColor = window.getComputedStyle( bodyNode ).backgroundColor;
60	const primaryColor = window.getComputedStyle( buttonNode ).borderColor;
61	const {
62		color: textColor,
63		padding: inputPadding,
64		backgroundColor: inputBackground,
65		border,
66		borderColor,
67		borderWidth,
68		borderStyle,
69		borderRadius,
70		fontSize,
71		fontFamily,
72		lineHeight,
73	} = window.getComputedStyle( inputNode );
74
75	const outputContainer = doc.querySelector( outputSelector );
76	outputContainer.style.setProperty( '--jetpack--contact-form--primary-color', primaryColor );
77	outputContainer.style.setProperty( '--jetpack--contact-form--background-color', backgroundColor );
78	outputContainer.style.setProperty( '--jetpack--contact-form--text-color', textColor );
79	outputContainer.style.setProperty( '--jetpack--contact-form--border', border );
80	outputContainer.style.setProperty( '--jetpack--contact-form--border-color', borderColor );
81	outputContainer.style.setProperty( '--jetpack--contact-form--border-size', borderWidth );
82	outputContainer.style.setProperty( '--jetpack--contact-form--border-style', borderStyle );
83	outputContainer.style.setProperty( '--jetpack--contact-form--border-radius', borderRadius );
84	outputContainer.style.setProperty( '--jetpack--contact-form--input-background', inputBackground );
85	outputContainer.style.setProperty( '--jetpack--contact-form--input-padding', inputPadding );
86	outputContainer.style.setProperty( '--jetpack--contact-form--font-size', fontSize );
87	outputContainer.style.setProperty( '--jetpack--contact-form--font-family', fontFamily );
88	outputContainer.style.setProperty( '--jetpack--contact-form--line-height', lineHeight );
89}