Edit File by line

<?php

[0] Fix | Delete

[1] Fix | Delete

namespace WPForms\Frontend;

[2] Fix | Delete

[3] Fix | Delete

/**

[4] Fix | Delete

* CSS variables class.

[5] Fix | Delete

[6] Fix | Delete

* @since 1.8.1

[7] Fix | Delete

[8] Fix | Delete

class CSSVars {

[9] Fix | Delete

[10] Fix | Delete

/**

[11] Fix | Delete

* White color.

[12] Fix | Delete

[13] Fix | Delete

* @since 1.8.8

[14] Fix | Delete

[15] Fix | Delete

* @var string

[16] Fix | Delete

[17] Fix | Delete

const WHITE = '#ffffff';

[18] Fix | Delete

[19] Fix | Delete

/**

[20] Fix | Delete

* Root vars and values.

[21] Fix | Delete

[22] Fix | Delete

* @since 1.8.1

[23] Fix | Delete

[24] Fix | Delete

* @var array

[25] Fix | Delete

[26] Fix | Delete

const ROOT_VARS = [

[27] Fix | Delete

'field-border-radius' => '3px',

[28] Fix | Delete

'field-border-style' => 'solid',

[29] Fix | Delete

'field-border-size' => '1px',

[30] Fix | Delete

'field-background-color' => self::WHITE,

[31] Fix | Delete

'field-border-color' => 'rgba( 0, 0, 0, 0.25 )',

[32] Fix | Delete

'field-text-color' => 'rgba( 0, 0, 0, 0.7 )',

[33] Fix | Delete

'field-menu-color' => self::WHITE,

[34] Fix | Delete

[35] Fix | Delete

'label-color' => 'rgba( 0, 0, 0, 0.85 )',

[36] Fix | Delete

'label-sublabel-color' => 'rgba( 0, 0, 0, 0.55 )',

[37] Fix | Delete

'label-error-color' => '#d63637',

[38] Fix | Delete

[39] Fix | Delete

'button-border-radius' => '3px',

[40] Fix | Delete

'button-border-style' => 'none',

[41] Fix | Delete

'button-border-size' => '1px',

[42] Fix | Delete

'button-background-color' => '#066aab',

[43] Fix | Delete

'button-border-color' => '#066aab',

[44] Fix | Delete

'button-text-color' => self::WHITE,

[45] Fix | Delete

[46] Fix | Delete

'page-break-color' => '#066aab',

[47] Fix | Delete

[48] Fix | Delete

'background-image' => 'none',

[49] Fix | Delete

'background-position' => 'center center',

[50] Fix | Delete

'background-repeat' => 'no-repeat',

[51] Fix | Delete

'background-size' => 'cover',

[52] Fix | Delete

'background-width' => '100px',

[53] Fix | Delete

'background-height' => '100px',

[54] Fix | Delete

'background-color' => 'rgba( 0, 0, 0, 0 )',

[55] Fix | Delete

'background-url' => 'url()',

[56] Fix | Delete

[57] Fix | Delete

'container-padding' => '0px',

[58] Fix | Delete

'container-border-style' => 'none',

[59] Fix | Delete

'container-border-width' => '1px',

[60] Fix | Delete

'container-border-color' => '#000000',

[61] Fix | Delete

'container-border-radius' => '3px',

[62] Fix | Delete

];

[63] Fix | Delete

[64] Fix | Delete

/**

[65] Fix | Delete

* Container shadow vars and values.

[66] Fix | Delete

[67] Fix | Delete

* @since 1.8.8

[68] Fix | Delete

[69] Fix | Delete

* @var array

[70] Fix | Delete

[71] Fix | Delete

const CONTAINER_SHADOW_SIZE = [

[72] Fix | Delete

'none' => [

[73] Fix | Delete

'box-shadow' => 'none',

[74] Fix | Delete

[75] Fix | Delete

'small' => [

[76] Fix | Delete

'box-shadow' => '0px 3px 5px 0px rgba(0, 0, 0, 0.1)',

[77] Fix | Delete

[78] Fix | Delete

'medium' => [

[79] Fix | Delete

'box-shadow' => '0px 10px 20px 0px rgba(0, 0, 0, 0.1)',

[80] Fix | Delete

[81] Fix | Delete

'large' => [

[82] Fix | Delete

'box-shadow' => '0px 30px 50px -10px rgba(0, 0, 0, 0.15)',

[83] Fix | Delete

[84] Fix | Delete

];

[85] Fix | Delete

[86] Fix | Delete

/**

[87] Fix | Delete

* Field Size vars and values.

[88] Fix | Delete

[89] Fix | Delete

* @since 1.8.1

[90] Fix | Delete

[91] Fix | Delete

* @var array

[92] Fix | Delete

[93] Fix | Delete

const FIELD_SIZE = [

[94] Fix | Delete

'small' => [

[95] Fix | Delete

'input-height' => '31px',

[96] Fix | Delete

'input-spacing' => '10px',

[97] Fix | Delete

'font-size' => '14px',

[98] Fix | Delete

'line-height' => '17px',

[99] Fix | Delete

'padding-h' => '9px',

[100] Fix | Delete

'checkbox-size' => '14px',

[101] Fix | Delete

'sublabel-spacing' => '5px',

[102] Fix | Delete

'icon-size' => '0.75',

[103] Fix | Delete

[104] Fix | Delete

'medium' => [

[105] Fix | Delete

'input-height' => '43px',

[106] Fix | Delete

'input-spacing' => '15px',

[107] Fix | Delete

'font-size' => '16px',

[108] Fix | Delete

'line-height' => '19px',

[109] Fix | Delete

'padding-h' => '14px',

[110] Fix | Delete

'checkbox-size' => '16px',

[111] Fix | Delete

'sublabel-spacing' => '5px',

[112] Fix | Delete

'icon-size' => '1',

[113] Fix | Delete

[114] Fix | Delete

'large' => [

[115] Fix | Delete

'input-height' => '50px',

[116] Fix | Delete

'input-spacing' => '20px',

[117] Fix | Delete

'font-size' => '18px',

[118] Fix | Delete

'line-height' => '21px',

[119] Fix | Delete

'padding-h' => '14px',

[120] Fix | Delete

'checkbox-size' => '18px',

[121] Fix | Delete

'sublabel-spacing' => '10px',

[122] Fix | Delete

'icon-size' => '1.25',

[123] Fix | Delete

[124] Fix | Delete

];

[125] Fix | Delete

[126] Fix | Delete

/**

[127] Fix | Delete

* Label Size vars and values.

[128] Fix | Delete

[129] Fix | Delete

* @since 1.8.1

[130] Fix | Delete

[131] Fix | Delete

* @var array

[132] Fix | Delete

[133] Fix | Delete

const LABEL_SIZE = [

[134] Fix | Delete

'small' => [

[135] Fix | Delete

'font-size' => '14px',

[136] Fix | Delete

'line-height' => '17px',

[137] Fix | Delete

'sublabel-font-size' => '13px',

[138] Fix | Delete

'sublabel-line-height' => '16px',

[139] Fix | Delete

[140] Fix | Delete

'medium' => [

[141] Fix | Delete

'font-size' => '16px',

[142] Fix | Delete

'line-height' => '19px',

[143] Fix | Delete

'sublabel-font-size' => '14px',

[144] Fix | Delete

'sublabel-line-height' => '17px',

[145] Fix | Delete

[146] Fix | Delete

'large' => [

[147] Fix | Delete

'font-size' => '18px',

[148] Fix | Delete

'line-height' => '21px',

[149] Fix | Delete

'sublabel-font-size' => '16px',

[150] Fix | Delete

'sublabel-line-height' => '19px',

[151] Fix | Delete

[152] Fix | Delete

];

[153] Fix | Delete

[154] Fix | Delete

/**

[155] Fix | Delete

* Button Size vars and values.

[156] Fix | Delete

[157] Fix | Delete

* @since 1.8.1

[158] Fix | Delete

[159] Fix | Delete

* @var array

[160] Fix | Delete

[161] Fix | Delete

const BUTTON_SIZE = [

[162] Fix | Delete

'small' => [

[163] Fix | Delete

'font-size' => '14px',

[164] Fix | Delete

'height' => '37px',

[165] Fix | Delete

'padding-h' => '15px',

[166] Fix | Delete

'margin-top' => '5px',

[167] Fix | Delete

[168] Fix | Delete

'medium' => [

[169] Fix | Delete

'font-size' => '17px',

[170] Fix | Delete

'height' => '41px',

[171] Fix | Delete

'padding-h' => '15px',

[172] Fix | Delete

'margin-top' => '10px',

[173] Fix | Delete

[174] Fix | Delete

'large' => [

[175] Fix | Delete

'font-size' => '20px',

[176] Fix | Delete

'height' => '48px',

[177] Fix | Delete

'padding-h' => '20px',

[178] Fix | Delete

'margin-top' => '15px',

[179] Fix | Delete

[180] Fix | Delete

];

[181] Fix | Delete

[182] Fix | Delete

/**

[183] Fix | Delete

* Spare variables.

[184] Fix | Delete

[185] Fix | Delete

* @since 1.8.8

[186] Fix | Delete

[187] Fix | Delete

* @var array

[188] Fix | Delete

[189] Fix | Delete

const SPARE_VARS = [ 'field-border-color' ];

[190] Fix | Delete

[191] Fix | Delete

/**

[192] Fix | Delete

* Render engine.

[193] Fix | Delete

[194] Fix | Delete

* @since 1.8.1

[195] Fix | Delete

[196] Fix | Delete

* @var string

[197] Fix | Delete

[198] Fix | Delete

private $render_engine;

[199] Fix | Delete

[200] Fix | Delete

/**

[201] Fix | Delete

* CSS variables.

[202] Fix | Delete

[203] Fix | Delete

* @since 1.8.1

[204] Fix | Delete

[205] Fix | Delete

* @var array

[206] Fix | Delete

[207] Fix | Delete

private $css_vars;

[208] Fix | Delete

[209] Fix | Delete

/**

[210] Fix | Delete

* Flag to check if root CSS vars were output.

[211] Fix | Delete

[212] Fix | Delete

* @since 1.8.1

[213] Fix | Delete

[214] Fix | Delete

* @var bool

[215] Fix | Delete

[216] Fix | Delete

private $is_root_vars_displayed;

[217] Fix | Delete

[218] Fix | Delete

/**

[219] Fix | Delete

* Initialize class.

[220] Fix | Delete

[221] Fix | Delete

* @since 1.8.1

[222] Fix | Delete

[223] Fix | Delete

public function init() {

[224] Fix | Delete

[225] Fix | Delete

$this->init_vars();

[226] Fix | Delete

$this->hooks();

[227] Fix | Delete

}

[228] Fix | Delete

[229] Fix | Delete

/**

[230] Fix | Delete

* Register hooks.

[231] Fix | Delete

[232] Fix | Delete

* @since 1.8.1

[233] Fix | Delete

[234] Fix | Delete

private function hooks() {

[235] Fix | Delete

[236] Fix | Delete

add_action( 'wp_head', [ $this, 'output_root' ], PHP_INT_MAX );

[237] Fix | Delete

}

[238] Fix | Delete

[239] Fix | Delete

/**

[240] Fix | Delete

* CSS variables data.

[241] Fix | Delete

[242] Fix | Delete

* @since 1.8.1

[243] Fix | Delete

[244] Fix | Delete

private function init_vars() {

[245] Fix | Delete

[246] Fix | Delete

$vars = [];

[247] Fix | Delete

[248] Fix | Delete

$vars[':root'] = array_merge(

[249] Fix | Delete

self::ROOT_VARS,

[250] Fix | Delete

$this->get_complex_vars( 'field-size', self::FIELD_SIZE['medium'] ),

[251] Fix | Delete

$this->get_complex_vars( 'label-size', self::LABEL_SIZE['medium'] ),

[252] Fix | Delete

$this->get_complex_vars( 'button-size', self::BUTTON_SIZE['medium'] ),

[253] Fix | Delete

$this->get_complex_vars( 'container-shadow-size', self::CONTAINER_SHADOW_SIZE['none'] )

[254] Fix | Delete

);

[255] Fix | Delete

[256] Fix | Delete

/**

[257] Fix | Delete

* Allows developers to modify default CSS variables which output on the frontend.

[258] Fix | Delete

[259] Fix | Delete

* @since 1.8.1

[260] Fix | Delete

[261] Fix | Delete

* @param array $vars CSS variables two-dimensional array.

[262] Fix | Delete

* First level keys is the CSS selector.

[263] Fix | Delete

* Second level keys is the variable name without the `--wpforms-` prefix.

[264] Fix | Delete

[265] Fix | Delete

$this->css_vars = apply_filters( 'wpforms_frontend_css_vars_init_vars', $vars );

[266] Fix | Delete

}

[267] Fix | Delete

[268] Fix | Delete

/**

[269] Fix | Delete

* Get complex CSS variables data.

[270] Fix | Delete

[271] Fix | Delete

* @since 1.8.1

[272] Fix | Delete

[273] Fix | Delete

* @param string $prefix CSS variable prefix.

[274] Fix | Delete

* @param array $values Values.

[275] Fix | Delete

[276] Fix | Delete

public function get_complex_vars( $prefix, $values ): array {

[277] Fix | Delete

[278] Fix | Delete

$vars = [];

[279] Fix | Delete

[280] Fix | Delete

foreach ( $values as $key => $value ) {

[281] Fix | Delete

$vars[ "{$prefix}-{$key}" ] = $value;

[282] Fix | Delete

}

[283] Fix | Delete

[284] Fix | Delete

return $vars;

[285] Fix | Delete

}

[286] Fix | Delete

[287] Fix | Delete

/**

[288] Fix | Delete

* Get CSS variables data by selector.

[289] Fix | Delete

[290] Fix | Delete

* @since 1.8.1

[291] Fix | Delete

[292] Fix | Delete

* @param string $selector Selector.

[293] Fix | Delete

[294] Fix | Delete

* @return array

[295] Fix | Delete

[296] Fix | Delete

public function get_vars( $selector ): array {

[297] Fix | Delete

[298] Fix | Delete

if ( empty( $selector ) ) {

[299] Fix | Delete

$selector = ':root';

[300] Fix | Delete

}

[301] Fix | Delete

[302] Fix | Delete

if ( empty( $this->css_vars[ $selector ] ) ) {

[303] Fix | Delete

return [];

[304] Fix | Delete

}

[305] Fix | Delete

[306] Fix | Delete

return $this->css_vars[ $selector ];

[307] Fix | Delete

}

[308] Fix | Delete

[309] Fix | Delete

/**

[310] Fix | Delete

* Output root CSS variables.

[311] Fix | Delete

[312] Fix | Delete

* @since 1.8.1

[313] Fix | Delete

* @since 1.8.1.2 Added $force argument.

[314] Fix | Delete

[315] Fix | Delete

* @param bool $force Force output root variables.

[316] Fix | Delete

[317] Fix | Delete

public function output_root( $force = false ) {

[318] Fix | Delete

[319] Fix | Delete

if ( ! empty( $this->is_root_vars_displayed ) && empty( $force ) ) {

[320] Fix | Delete

return;

[321] Fix | Delete

}

[322] Fix | Delete

[323] Fix | Delete

$this->output_selector_vars( ':root', $this->css_vars[':root'] );

[324] Fix | Delete

[325] Fix | Delete

$this->is_root_vars_displayed = true;

[326] Fix | Delete

}

[327] Fix | Delete

[328] Fix | Delete

/**

[329] Fix | Delete

* Output selector's CSS variables.

[330] Fix | Delete

[331] Fix | Delete

* @since 1.8.1

[332] Fix | Delete

[333] Fix | Delete

* @param string $selector Selector.

[334] Fix | Delete

* @param array $vars Variables data.

[335] Fix | Delete

* @param string $style_id Style tag ID attribute. Optional. Default is empty string.

[336] Fix | Delete

* @param string|int $form_id Form ID. Optional. Default is empty string.

[337] Fix | Delete

[338] Fix | Delete

public function output_selector_vars( $selector, $vars, $style_id = '', $form_id = '' ) {

[339] Fix | Delete

[340] Fix | Delete

if ( empty( $this->render_engine ) ) {

[341] Fix | Delete

$this->render_engine = wpforms_get_render_engine();

[342] Fix | Delete

}

[343] Fix | Delete

[344] Fix | Delete

if ( $this->render_engine === 'classic' ) {

[345] Fix | Delete

return;

[346] Fix | Delete

}

[347] Fix | Delete

[348] Fix | Delete

$style_id = empty( $style_id ) ? 'wpforms-css-vars-' . $selector : $style_id;

[349] Fix | Delete

[350] Fix | Delete

printf(

[351] Fix | Delete

'<style id="%1$s">

[352] Fix | Delete

%2$s {

[353] Fix | Delete

%3$s

[354] Fix | Delete

}

[355] Fix | Delete

</style>',

[356] Fix | Delete

sanitize_key( $style_id ),

[357] Fix | Delete

$selector, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

[358] Fix | Delete

esc_html( $this->get_vars_css( $vars, $form_id ) )

[359] Fix | Delete

);

[360] Fix | Delete

}

[361] Fix | Delete

[362] Fix | Delete

/**

[363] Fix | Delete

* Pre print vars filter.

[364] Fix | Delete

[365] Fix | Delete

* @since 1.8.8

[366] Fix | Delete

[367] Fix | Delete

* @param array $vars Variables data.

[368] Fix | Delete

* @param string|int $form_id Form ID. Optional. Default is empty string.

[369] Fix | Delete

[370] Fix | Delete

* @return array

[371] Fix | Delete

[372] Fix | Delete

private function get_pre_print_vars( array $vars, $form_id = '' ): array {

[373] Fix | Delete

[374] Fix | Delete

// Normalize the `background-url` variable.

[375] Fix | Delete

if ( isset( $vars['background-url'] ) ) {

[376] Fix | Delete

$vars['background-url'] = $vars['background-url'] === 'url()' ? 'none' : $vars['background-url'];

[377] Fix | Delete

}

[378] Fix | Delete

[379] Fix | Delete

/**

[380] Fix | Delete

* Filter CSS variables right before printing the CSS.

[381] Fix | Delete

[382] Fix | Delete

* @since 1.8.8

[383] Fix | Delete

[384] Fix | Delete

* @param array $vars CSS variables.

[385] Fix | Delete

* @param int $form_id Form ID. Optional. Default is empty string.

[386] Fix | Delete

[387] Fix | Delete

return (array) apply_filters( 'wpforms_frontend_css_vars_pre_print_filter', $vars, $form_id );

[388] Fix | Delete

}

[389] Fix | Delete

[390] Fix | Delete

/**

[391] Fix | Delete

* Generate CSS code from given vars data.

[392] Fix | Delete

[393] Fix | Delete

* @since 1.8.1

[394] Fix | Delete

[395] Fix | Delete

* @param array $vars Variables data.

[396] Fix | Delete

* @param string|int $form_id Form ID. Optional. Default is empty string.

[397] Fix | Delete

[398] Fix | Delete

private function get_vars_css( $vars, $form_id = '' ): string {

[399] Fix | Delete

[400] Fix | Delete

$vars = $this->get_pre_print_vars( (array) $vars, $form_id );

[401] Fix | Delete

$result = '';

[402] Fix | Delete

[403] Fix | Delete

foreach ( $vars as $name => $value ) {

[404] Fix | Delete

if ( $value === '0' ) {

[405] Fix | Delete

$value = '0px';

[406] Fix | Delete

}

[407] Fix | Delete

[408] Fix | Delete

$result .= "--wpforms-{$name}: {$value};\n";

[409] Fix | Delete

[410] Fix | Delete

if ( in_array( $name, self::SPARE_VARS, true ) ) {

[411] Fix | Delete

$result .= "--wpforms-{$name}-spare: {$value};\n";

[412] Fix | Delete

}

[413] Fix | Delete

}

[414] Fix | Delete

[415] Fix | Delete

return $result;

[416] Fix | Delete

}

[417] Fix | Delete

[418] Fix | Delete

/**

[419] Fix | Delete

* Get customized CSS vars.

[420] Fix | Delete

[421] Fix | Delete

* @since 1.8.3

[422] Fix | Delete

[423] Fix | Delete

* @param array $attr Attributes passed by integration.

[424] Fix | Delete

[425] Fix | Delete

* @return array

[426] Fix | Delete

[427] Fix | Delete

public function get_customized_css_vars( $attr ): array { // phpcs:ignore Generic.Metrics.CyclomaticComplexity.MaxExceeded

[428] Fix | Delete

[429] Fix | Delete

$root_css_vars = $this->get_vars( ':root' );

[430] Fix | Delete

$css_vars = [];

[431] Fix | Delete

[432] Fix | Delete

foreach ( $attr as $key => $value ) {

[433] Fix | Delete

[434] Fix | Delete

$var_name = strtolower( preg_replace( '/[A-Z]/', '-$0', $key ) );

[435] Fix | Delete

[436] Fix | Delete

// Skip attribute that is not the CSS var or has the default value.

[437] Fix | Delete

if ( empty( $root_css_vars[ $var_name ] ) || $root_css_vars[ $var_name ] === $value ) {

[438] Fix | Delete

continue;

[439] Fix | Delete

}

[440] Fix | Delete

[441] Fix | Delete

$css_vars[ $var_name ] = $value;

[442] Fix | Delete

}

[443] Fix | Delete

[444] Fix | Delete

// Reset border size in case of border style is `none`.

[445] Fix | Delete

if ( isset( $css_vars['field-border-style'] ) && $css_vars['field-border-style'] === 'none' ) {

[446] Fix | Delete

$css_vars['field-border-size'] = '0px';

[447] Fix | Delete

}

[448] Fix | Delete

[449] Fix | Delete

if ( isset( $css_vars['button-border-style'] ) && $css_vars['button-border-style'] === 'none' ) {

[450] Fix | Delete

$css_vars['button-border-size'] = '0px';

[451] Fix | Delete

}

[452] Fix | Delete

[453] Fix | Delete

// Set the button alternative background color and use border color for accent in case of transparent color.

[454] Fix | Delete

$button_bg_color = $css_vars['button-background-color'] ?? $root_css_vars['button-background-color'];

[455] Fix | Delete

[456] Fix | Delete

if ( $this->is_transparent_color( $button_bg_color ) ) {

[457] Fix | Delete

$css_vars['button-background-color-alt'] = $button_bg_color;

[458] Fix | Delete

[459] Fix | Delete

$border_color = $css_vars['button-border-color'] ?? $root_css_vars['button-border-color'];

[460] Fix | Delete

[461] Fix | Delete

$css_vars['button-background-color'] = $this->is_transparent_color( $border_color ) ? $root_css_vars['button-background-color'] : $border_color;

[462] Fix | Delete

$button_bg_color = $css_vars['button-background-color'];

[463] Fix | Delete

}

[464] Fix | Delete

[465] Fix | Delete

$button_bg_color = strtolower( $button_bg_color );

[466] Fix | Delete

[467] Fix | Delete

// Set the button alternative text color in case if the background and text color are identical.

[468] Fix | Delete

$button_text_color = strtolower( $css_vars['button-text-color'] ?? $root_css_vars['button-text-color'] );

[469] Fix | Delete

[470] Fix | Delete

if ( $button_bg_color === $button_text_color || $this->is_transparent_color( $button_text_color ) ) {

[471] Fix | Delete

$css_vars['button-text-color-alt'] = $this->get_contrast_color( $button_bg_color );

[472] Fix | Delete

}

[473] Fix | Delete

[474] Fix | Delete

$size_css_vars = $this->get_size_css_vars( $attr );

[475] Fix | Delete

[476] Fix | Delete

return array_merge( $css_vars, $size_css_vars );

[477] Fix | Delete

}

[478] Fix | Delete

[479] Fix | Delete

/**

[480] Fix | Delete

* Checks if the provided color has transparency.

[481] Fix | Delete

[482] Fix | Delete

* @since 1.8.8

[483] Fix | Delete

[484] Fix | Delete

* @param string $color The color to check.

[485] Fix | Delete

[486] Fix | Delete

* @return bool

[487] Fix | Delete

[488] Fix | Delete

private function is_transparent_color( $color ): bool {

[489] Fix | Delete

[490] Fix | Delete

$rgba = $this->get_color_as_rgb_array( $color );

[491] Fix | Delete

[492] Fix | Delete

$opacity_threshold = 0.33;

[493] Fix | Delete

$opacity = $rgba[3] ?? 1;

[494] Fix | Delete

[495] Fix | Delete

return $opacity < $opacity_threshold;

[496] Fix | Delete

}

[497] Fix | Delete

[498] Fix | Delete

/**

[499] Fix | Delete