| @@ -22,8 +22,24 @@ | ||
| 22 | 22 | return 'light_bordered'; |
| 23 | 23 | } |
| 24 | 24 | |
| 25 | 25 | /** |
| 26 | + * Get default values for the optional global accent overlay. | |
| 27 | + * | |
| 28 | + * The overlay is disabled by default so upgrading does not change the visual | |
| 29 | + * output of an existing booking form. | |
| 30 | + * | |
| 31 | + * @return array | |
| 32 | + */ | |
| 33 | +function wpbc_bfb_settings__get_default_form_accent_options() { | |
| 34 | + | |
| 35 | + return array( | |
| 36 | + 'booking_form_accent_enabled' => 'Off', | |
| 37 | + 'booking_form_accent_color' => WPBC_DEFAULT_FORM_ACCENT_COLOR, | |
| 38 | + ); | |
| 39 | +} | |
| 40 | + | |
| 41 | +/** | |
| 26 | 42 | * Get default values for the global custom form style. |
| 27 | 43 | * |
| 28 | 44 | * @return array |
| 29 | 45 | */ |
| @@ -51,8 +67,10 @@ | ||
| 51 | 67 | 'booking_form_custom_secondary_button_border_color' => '#eeeeee', |
| 52 | 68 | 'booking_form_custom_secondary_button_hover_background_color' => '#fdfdfd', |
| 53 | 69 | 'booking_form_custom_secondary_button_hover_text_color' => '#444444', |
| 54 | 70 | 'booking_form_custom_secondary_button_hover_border_color' => '#4d91cd', |
| 71 | + 'booking_form_custom_button_border_width' => '1px', | |
| 72 | + 'booking_form_custom_button_border_radius' => '3px', | |
| 55 | 73 | ); |
| 56 | 74 | } |
| 57 | 75 | |
| 58 | 76 | /** |
| @@ -84,11 +102,15 @@ | ||
| 84 | 102 | '--wpbc_form-field-disabled-color', |
| 85 | 103 | '--wpbc_form-choice-checked-border-color', |
| 86 | 104 | '--wpbc_form-choice-checked-color', |
| 87 | 105 | '--wpbc_form-choice-focus-color', |
| 106 | + '--wpbc_form-button-border-radius', | |
| 107 | + '--wpbc_form-button-border-style', | |
| 108 | + '--wpbc_form-button-border-size', | |
| 88 | 109 | '--wpbc_form-button-background-color', |
| 89 | 110 | '--wpbc_form-button-background-color-alt', |
| 90 | 111 | '--wpbc_form-button-border-color', |
| 112 | + '--wpbc_form-button-primary-border-style', | |
| 91 | 113 | '--wpbc_form-button-text-color', |
| 92 | 114 | '--wpbc_form-button-text-color-alt', |
| 93 | 115 | '--wpbc_form-button-hover-background-color', |
| 94 | 116 | '--wpbc_form-button-hover-border-color', |
| @@ -94,8 +116,10 @@ | ||
| 94 | 116 | '--wpbc_form-button-hover-border-color', |
| 95 | 117 | '--wpbc_form-button-hover-text-color', |
| 96 | 118 | '--wpbc_form-button-light-background-color', |
| 97 | 119 | '--wpbc_form-button-light-border-color', |
| 120 | + '--wpbc_form-button-light-border-style', | |
| 121 | + '--wpbc_form-button-light-border-size', | |
| 98 | 122 | '--wpbc_form-button-light-text-color', |
| 99 | 123 | '--wpbc_form-button-light-box-shadow', |
| 100 | 124 | '--wpbc_form-button-light-hover-background-color', |
| 101 | 125 | '--wpbc_form-button-light-hover-border-color', |
| @@ -100,10 +124,20 @@ | ||
| 100 | 124 | '--wpbc_form-button-light-hover-background-color', |
| 101 | 125 | '--wpbc_form-button-light-hover-border-color', |
| 102 | 126 | '--wpbc_form-button-light-hover-text-color', |
| 103 | 127 | '--wpbc_form-button-light-hover-box-shadow', |
| 128 | + '--wpbc-appointment-provider-avatar-background', | |
| 129 | + '--wpbc-appointment-provider-avatar-border-color', | |
| 130 | + '--wpbc-appointment-provider-avatar-text-color', | |
| 104 | 131 | '--wpbc_form-button-primary-hover-border-color', |
| 105 | 132 | '--wpbc_form-page-break-color', |
| 133 | + '--wpbc_form-accent-color', | |
| 134 | + '--wpbc_form-accent-hover-color', | |
| 135 | + '--wpbc_form-accent-contrast-color', | |
| 136 | + '--wpbc_timepicker-hover-border-color', | |
| 137 | + '--wpbc_timepicker-selected-bg-color', | |
| 138 | + '--wpbc_timepicker-selected-text-color', | |
| 139 | + '--wpbc_timepicker-selected-border-color', | |
| 106 | 140 | ); |
| 107 | 141 | } |
| 108 | 142 | |
| 109 | 143 | /** |
| @@ -115,9 +149,18 @@ | ||
| 115 | 149 | * @return array |
| 116 | 150 | */ |
| 117 | 151 | function wpbc_bfb_settings__get_form_style_presets() { |
| 118 | 152 | |
| 119 | - return array( | |
| 153 | + $default_button_geometry = array( | |
| 154 | + '--wpbc_form-button-border-radius' => '3px', | |
| 155 | + '--wpbc_form-button-border-style' => 'none', | |
| 156 | + '--wpbc_form-button-border-size' => '1px', | |
| 157 | + '--wpbc_form-button-primary-border-style' => 'none', | |
| 158 | + '--wpbc_form-button-light-border-style' => 'solid', | |
| 159 | + '--wpbc_form-button-light-border-size' => '1px', | |
| 160 | + ); | |
| 161 | + | |
| 162 | + $presets = array( | |
| 120 | 163 | 'light_bordered' => array( |
| 121 | 164 | 'title' => __( 'Light bordered', 'booking' ), |
| 122 | 165 | 'theme_class' => '', |
| 123 | 166 | 'container_style' => 'bordered', |
| @@ -148,9 +191,9 @@ | ||
| 148 | 191 | '--wpbc_form-choice-checked-border-color' => '#066aab', |
| 149 | 192 | '--wpbc_form-choice-checked-color' => '#066aab', |
| 150 | 193 | '--wpbc_form-choice-focus-color' => '#066aab', |
| 151 | 194 | '--wpbc_form-button-light-background-color' => '#fdfdfd', |
| 152 | - '--wpbc_form-button-light-border-color' => '#eeeeeeb5', | |
| 195 | + '--wpbc_form-button-light-border-color' => '#cacacab5', | |
| 153 | 196 | '--wpbc_form-button-light-text-color' => '#444444e0', |
| 154 | 197 | '--wpbc_form-button-light-box-shadow' => '0 2px 10px 2px #ffffff54', |
| 155 | 198 | '--wpbc_form-button-light-hover-background-color' => '#fdfdfd', |
| 156 | 199 | '--wpbc_form-button-light-hover-border-color' => 'rgb(77, 145, 205)', |
| @@ -191,9 +234,9 @@ | ||
| 191 | 234 | '--wpbc_form-choice-checked-border-color' => '#066aab', |
| 192 | 235 | '--wpbc_form-choice-checked-color' => '#066aab', |
| 193 | 236 | '--wpbc_form-choice-focus-color' => '#066aab', |
| 194 | 237 | '--wpbc_form-button-light-background-color' => '#fdfdfd', |
| 195 | - '--wpbc_form-button-light-border-color' => '#eeeeeeb5', | |
| 238 | + '--wpbc_form-button-light-border-color' => '#cacacab5', | |
| 196 | 239 | '--wpbc_form-button-light-text-color' => '#444444e0', |
| 197 | 240 | '--wpbc_form-button-light-box-shadow' => '0 2px 10px 2px #ffffff54', |
| 198 | 241 | '--wpbc_form-button-light-hover-background-color' => '#fdfdfd', |
| 199 | 242 | '--wpbc_form-button-light-hover-border-color' => 'rgb(77, 145, 205)', |
| @@ -234,9 +277,9 @@ | ||
| 234 | 277 | '--wpbc_form-choice-checked-border-color' => '#066aab', |
| 235 | 278 | '--wpbc_form-choice-checked-color' => '#066aab', |
| 236 | 279 | '--wpbc_form-choice-focus-color' => '#066aab', |
| 237 | 280 | '--wpbc_form-button-light-background-color' => '#fdfdfd', |
| 238 | - '--wpbc_form-button-light-border-color' => '#eeeeeeb5', | |
| 281 | + '--wpbc_form-button-light-border-color' => '#cacacab5', | |
| 239 | 282 | '--wpbc_form-button-light-text-color' => '#444444e0', |
| 240 | 283 | '--wpbc_form-button-light-box-shadow' => '0 2px 10px 2px #ffffff54', |
| 241 | 284 | '--wpbc_form-button-light-hover-background-color' => '#fdfdfd', |
| 242 | 285 | '--wpbc_form-button-light-hover-border-color' => 'rgb(77, 145, 205)', |
| @@ -251,9 +294,9 @@ | ||
| 251 | 294 | 'theme_class' => 'wpbc_theme_dark_1', |
| 252 | 295 | 'container_style' => 'bordered', |
| 253 | 296 | 'custom' => false, |
| 254 | 297 | 'css_vars' => array( |
| 255 | - '--wpbc-bfb-form-background' => '#626262', | |
| 298 | + '--wpbc-bfb-form-background' => '#383a3d', | |
| 256 | 299 | '--wpbc-bfb-form-border-color' => '#000000', |
| 257 | 300 | '--wpbc-bfb-form-border-width' => '1px', |
| 258 | 301 | '--wpbc-bfb-form-border-radius' => '2px', |
| 259 | 302 | '--wpbc-bfb-form-padding' => '10px 30px', |
| @@ -268,25 +311,32 @@ | ||
| 268 | 311 | '--wpbc_form-field-focus-shadow-color' => '#5b8bff', |
| 269 | 312 | '--wpbc_form-field-text-color' => '#f4f6f8', |
| 270 | 313 | '--wpbc_form-field-disabled-color' => 'rgba(255, 255, 255, 0.35)', |
| 271 | 314 | '--wpbc_form-field-menu-color' => '#303640', |
| 272 | - '--wpbc_form-button-background-color' => '#4d4d4d', | |
| 273 | - '--wpbc_form-button-background-color-alt' => '#4d4d4d', | |
| 315 | + '--wpbc_form-button-background-color' => '#1b1d22', | |
| 316 | + '--wpbc_form-button-background-color-alt' => '#1b1d22', | |
| 274 | 317 | '--wpbc_form-button-border-color' => '#5f5f5f', |
| 318 | + '--wpbc_form-button-primary-border-style' => 'solid', | |
| 275 | 319 | '--wpbc_form-button-text-color' => '#ffffff', |
| 276 | 320 | '--wpbc_form-button-text-color-alt' => '#ffffff', |
| 321 | + '--wpbc_form-button-hover-background-color' => '#1b1d22', | |
| 322 | + '--wpbc_form-button-hover-border-color' => '#5b8bff', | |
| 323 | + '--wpbc_form-button-hover-text-color' => '#ffffff', | |
| 277 | 324 | '--wpbc_form-choice-checked-border-color' => '#5b8bff', |
| 278 | 325 | '--wpbc_form-choice-checked-color' => '#f4f6f8', |
| 279 | 326 | '--wpbc_form-choice-focus-color' => '#5b8bff', |
| 280 | - '--wpbc_form-button-light-background-color' => '#2C2E2F', | |
| 281 | - '--wpbc_form-button-light-border-color' => '#2C2E2F', | |
| 327 | + '--wpbc_form-button-light-background-color' => '#3f454f', | |
| 328 | + '--wpbc_form-button-light-border-color' => '#525252', | |
| 282 | 329 | '--wpbc_form-button-light-text-color' => '#ffffff', |
| 283 | 330 | '--wpbc_form-button-light-box-shadow' => '0 0 0 #424242', |
| 284 | - '--wpbc_form-button-light-hover-background-color' => '#2C2E2F', | |
| 285 | - '--wpbc_form-button-light-hover-border-color' => '#2C2E2F', | |
| 331 | + '--wpbc_form-button-light-hover-background-color' => '#3f454f', | |
| 332 | + '--wpbc_form-button-light-hover-border-color' => '#5b8bff', | |
| 286 | 333 | '--wpbc_form-button-light-hover-text-color' => '#ffffff', |
| 287 | 334 | '--wpbc_form-button-light-hover-box-shadow' => '0 0 0 #424242', |
| 288 | - '--wpbc_form-button-primary-hover-border-color' => '#ffffff', | |
| 335 | + '--wpbc-appointment-provider-avatar-background' => '#2C2E2F', | |
| 336 | + '--wpbc-appointment-provider-avatar-border-color' => '#525252', | |
| 337 | + '--wpbc-appointment-provider-avatar-text-color' => '#ffffff', | |
| 338 | + '--wpbc_form-button-primary-hover-border-color' => '#5b8bff', | |
| 289 | 339 | '--wpbc_form-page-break-color' => '#5f9ee7', |
| 290 | 340 | ), |
| 291 | 341 | ), |
| 292 | 342 | 'dark_none' => array( |
| @@ -311,25 +361,32 @@ | ||
| 311 | 361 | '--wpbc_form-field-focus-shadow-color' => '#5b8bff', |
| 312 | 362 | '--wpbc_form-field-text-color' => '#f4f6f8', |
| 313 | 363 | '--wpbc_form-field-disabled-color' => 'rgba(255, 255, 255, 0.35)', |
| 314 | 364 | '--wpbc_form-field-menu-color' => '#303640', |
| 315 | - '--wpbc_form-button-background-color' => '#4d4d4d', | |
| 316 | - '--wpbc_form-button-background-color-alt' => '#4d4d4d', | |
| 365 | + '--wpbc_form-button-background-color' => '#1b1d22', | |
| 366 | + '--wpbc_form-button-background-color-alt' => '#1b1d22', | |
| 317 | 367 | '--wpbc_form-button-border-color' => '#5f5f5f', |
| 368 | + '--wpbc_form-button-primary-border-style' => 'solid', | |
| 318 | 369 | '--wpbc_form-button-text-color' => '#ffffff', |
| 319 | 370 | '--wpbc_form-button-text-color-alt' => '#ffffff', |
| 371 | + '--wpbc_form-button-hover-background-color' => '#1b1d22', | |
| 372 | + '--wpbc_form-button-hover-border-color' => '#5b8bff', | |
| 373 | + '--wpbc_form-button-hover-text-color' => '#ffffff', | |
| 320 | 374 | '--wpbc_form-choice-checked-border-color' => '#5b8bff', |
| 321 | 375 | '--wpbc_form-choice-checked-color' => '#f4f6f8', |
| 322 | 376 | '--wpbc_form-choice-focus-color' => '#5b8bff', |
| 323 | - '--wpbc_form-button-light-background-color' => '#2C2E2F', | |
| 324 | - '--wpbc_form-button-light-border-color' => '#2C2E2F', | |
| 377 | + '--wpbc_form-button-light-background-color' => '#3f454f', | |
| 378 | + '--wpbc_form-button-light-border-color' => '#525252', | |
| 325 | 379 | '--wpbc_form-button-light-text-color' => '#ffffff', |
| 326 | 380 | '--wpbc_form-button-light-box-shadow' => '0 0 0 #424242', |
| 327 | - '--wpbc_form-button-light-hover-background-color' => '#2C2E2F', | |
| 328 | - '--wpbc_form-button-light-hover-border-color' => '#2C2E2F', | |
| 381 | + '--wpbc_form-button-light-hover-background-color' => '#3f454f', | |
| 382 | + '--wpbc_form-button-light-hover-border-color' => '#5b8bff', | |
| 329 | 383 | '--wpbc_form-button-light-hover-text-color' => '#ffffff', |
| 330 | 384 | '--wpbc_form-button-light-hover-box-shadow' => '0 0 0 #424242', |
| 331 | - '--wpbc_form-button-primary-hover-border-color' => '#ffffff', | |
| 385 | + '--wpbc-appointment-provider-avatar-background' => '#2C2E2F', | |
| 386 | + '--wpbc-appointment-provider-avatar-border-color' => '#525252', | |
| 387 | + '--wpbc-appointment-provider-avatar-text-color' => '#ffffff', | |
| 388 | + '--wpbc_form-button-primary-hover-border-color' => '#5b8bff', | |
| 332 | 389 | '--wpbc_form-page-break-color' => '#5f9ee7', |
| 333 | 390 | ), |
| 334 | 391 | ), |
| 335 | 392 | 'dark_soft' => array( |
| @@ -354,25 +411,32 @@ | ||
| 354 | 411 | '--wpbc_form-field-focus-shadow-color' => '#5b8bff', |
| 355 | 412 | '--wpbc_form-field-text-color' => '#f4f6f8', |
| 356 | 413 | '--wpbc_form-field-disabled-color' => 'rgba(255, 255, 255, 0.35)', |
| 357 | 414 | '--wpbc_form-field-menu-color' => '#303640', |
| 358 | - '--wpbc_form-button-background-color' => '#4d4d4d', | |
| 359 | - '--wpbc_form-button-background-color-alt' => '#4d4d4d', | |
| 415 | + '--wpbc_form-button-background-color' => '#1b1d22', | |
| 416 | + '--wpbc_form-button-background-color-alt' => '#1b1d22', | |
| 360 | 417 | '--wpbc_form-button-border-color' => '#5f5f5f', |
| 418 | + '--wpbc_form-button-primary-border-style' => 'solid', | |
| 361 | 419 | '--wpbc_form-button-text-color' => '#ffffff', |
| 362 | 420 | '--wpbc_form-button-text-color-alt' => '#ffffff', |
| 421 | + '--wpbc_form-button-hover-background-color' => '#1b1d22', | |
| 422 | + '--wpbc_form-button-hover-border-color' => '#5b8bff', | |
| 423 | + '--wpbc_form-button-hover-text-color' => '#ffffff', | |
| 363 | 424 | '--wpbc_form-choice-checked-border-color' => '#5b8bff', |
| 364 | 425 | '--wpbc_form-choice-checked-color' => '#f4f6f8', |
| 365 | 426 | '--wpbc_form-choice-focus-color' => '#5b8bff', |
| 366 | - '--wpbc_form-button-light-background-color' => '#2C2E2F', | |
| 367 | - '--wpbc_form-button-light-border-color' => '#2C2E2F', | |
| 427 | + '--wpbc_form-button-light-background-color' => '#3f454f', | |
| 428 | + '--wpbc_form-button-light-border-color' => '#525252', | |
| 368 | 429 | '--wpbc_form-button-light-text-color' => '#ffffff', |
| 369 | 430 | '--wpbc_form-button-light-box-shadow' => '0 0 0 #424242', |
| 370 | - '--wpbc_form-button-light-hover-background-color' => '#2C2E2F', | |
| 371 | - '--wpbc_form-button-light-hover-border-color' => '#2C2E2F', | |
| 431 | + '--wpbc_form-button-light-hover-background-color' => '#3f454f', | |
| 432 | + '--wpbc_form-button-light-hover-border-color' => '#5b8bff', | |
| 372 | 433 | '--wpbc_form-button-light-hover-text-color' => '#ffffff', |
| 373 | 434 | '--wpbc_form-button-light-hover-box-shadow' => '0 0 0 #424242', |
| 374 | - '--wpbc_form-button-primary-hover-border-color' => '#ffffff', | |
| 435 | + '--wpbc-appointment-provider-avatar-background' => '#2C2E2F', | |
| 436 | + '--wpbc-appointment-provider-avatar-border-color' => '#525252', | |
| 437 | + '--wpbc-appointment-provider-avatar-text-color' => '#ffffff', | |
| 438 | + '--wpbc_form-button-primary-hover-border-color' => '#5b8bff', | |
| 375 | 439 | '--wpbc_form-page-break-color' => '#5f9ee7', |
| 376 | 440 | ), |
| 377 | 441 | ), |
| 378 | 442 | 'custom' => array( |
| @@ -382,8 +446,21 @@ | ||
| 382 | 446 | 'custom' => true, |
| 383 | 447 | 'css_vars' => array(), |
| 384 | 448 | ), |
| 385 | 449 | ); |
| 450 | + | |
| 451 | + // Presets must explicitly reset geometry left by a previously selected | |
| 452 | + // Custom style. This also keeps the live Builder canvas equal to a clean | |
| 453 | + // front-end render, where the root defaults are 1px borders and 3px radius. | |
| 454 | + foreach ( $presets as $preset_key => $preset ) { | |
| 455 | + if ( 'custom' === $preset_key || empty( $preset['css_vars'] ) ) { | |
| 456 | + continue; | |
| 457 | + } | |
| 458 | + | |
| 459 | + $presets[ $preset_key ]['css_vars'] = array_merge( $default_button_geometry, $preset['css_vars'] ); | |
| 460 | + } | |
| 461 | + | |
| 462 | + return $presets; | |
| 386 | 463 | } |
| 387 | 464 | |
| 388 | 465 | /** |
| 389 | 466 | * Get one form style preset. |
| @@ -474,8 +551,180 @@ | ||
| 474 | 551 | return $fallback; |
| 475 | 552 | } |
| 476 | 553 | |
| 477 | 554 | /** |
| 555 | + * Sanitize an opaque hexadecimal accent color. | |
| 556 | + * | |
| 557 | + * Unlike container colors, an accent cannot be transparent because it is | |
| 558 | + * used to calculate hover and readable foreground colors. | |
| 559 | + * | |
| 560 | + * @param string $value Raw value. | |
| 561 | + * @param string $fallback Fallback value. | |
| 562 | + * @return string | |
| 563 | + */ | |
| 564 | +function wpbc_bfb_settings__sanitize_form_accent_color( $value, $fallback = WPBC_DEFAULT_FORM_ACCENT_COLOR ) { | |
| 565 | + | |
| 566 | + $value = trim( (string) $value ); | |
| 567 | + | |
| 568 | + return preg_match( '/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i', $value ) ? $value : $fallback; | |
| 569 | +} | |
| 570 | + | |
| 571 | +/** | |
| 572 | + * Get sanitized global accent settings. | |
| 573 | + * | |
| 574 | + * @param array $options Optional raw override values. | |
| 575 | + * @return array | |
| 576 | + */ | |
| 577 | +function wpbc_bfb_settings__get_form_accent_options( $options = array() ) { | |
| 578 | + | |
| 579 | + $defaults = wpbc_bfb_settings__get_default_form_accent_options(); | |
| 580 | + $options = is_array( $options ) ? $options : array(); | |
| 581 | + $values = array(); | |
| 582 | + | |
| 583 | + foreach ( $defaults as $key => $fallback ) { | |
| 584 | + if ( array_key_exists( $key, $options ) ) { | |
| 585 | + $values[ $key ] = $options[ $key ]; | |
| 586 | + } elseif ( function_exists( 'get_bk_option' ) ) { | |
| 587 | + $values[ $key ] = get_bk_option( $key ); | |
| 588 | + } else { | |
| 589 | + $values[ $key ] = $fallback; | |
| 590 | + } | |
| 591 | + } | |
| 592 | + | |
| 593 | + return array( | |
| 594 | + 'booking_form_accent_enabled' => ( 'On' === (string) $values['booking_form_accent_enabled'] ) ? 'On' : 'Off', | |
| 595 | + 'booking_form_accent_color' => wpbc_bfb_settings__sanitize_form_accent_color( $values['booking_form_accent_color'], $defaults['booking_form_accent_color'] ), | |
| 596 | + ); | |
| 597 | +} | |
| 598 | + | |
| 599 | +/** | |
| 600 | + * Mix a hexadecimal color with black or white. | |
| 601 | + * | |
| 602 | + * @param string $hex Six-digit hexadecimal color. | |
| 603 | + * @param string $mix_hex Six-digit hexadecimal target color. | |
| 604 | + * @param float $percentage Mix amount from 0 through 1. | |
| 605 | + * @return string | |
| 606 | + */ | |
| 607 | +function wpbc_bfb_settings__mix_form_style_colors( $hex, $mix_hex, $percentage ) { | |
| 608 | + | |
| 609 | + $hex = ltrim( wpbc_bfb_settings__sanitize_form_accent_color( $hex, WPBC_DEFAULT_FORM_ACCENT_COLOR ), '#' ); | |
| 610 | + $mix_hex = ltrim( wpbc_bfb_settings__sanitize_form_accent_color( $mix_hex, '#000000' ), '#' ); | |
| 611 | + $percentage = max( 0, min( 1, (float) $percentage ) ); | |
| 612 | + | |
| 613 | + if ( 3 === strlen( $hex ) ) { | |
| 614 | + $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2]; | |
| 615 | + } | |
| 616 | + if ( 3 === strlen( $mix_hex ) ) { | |
| 617 | + $mix_hex = $mix_hex[0] . $mix_hex[0] . $mix_hex[1] . $mix_hex[1] . $mix_hex[2] . $mix_hex[2]; | |
| 618 | + } | |
| 619 | + | |
| 620 | + $channels = array(); | |
| 621 | + for ( $index = 0; $index < 3; $index++ ) { | |
| 622 | + $source = hexdec( substr( $hex, $index * 2, 2 ) ); | |
| 623 | + $target = hexdec( substr( $mix_hex, $index * 2, 2 ) ); | |
| 624 | + $channels[] = (int) round( $source + ( ( $target - $source ) * $percentage ) ); | |
| 625 | + } | |
| 626 | + | |
| 627 | + return sprintf( '#%02x%02x%02x', $channels[0], $channels[1], $channels[2] ); | |
| 628 | +} | |
| 629 | + | |
| 630 | +/** | |
| 631 | + * Calculate relative luminance for a hexadecimal color. | |
| 632 | + * | |
| 633 | + * @param string $hex Hexadecimal color. | |
| 634 | + * @return float | |
| 635 | + */ | |
| 636 | +function wpbc_bfb_settings__get_form_style_color_luminance( $hex ) { | |
| 637 | + | |
| 638 | + $hex = ltrim( wpbc_bfb_settings__sanitize_form_accent_color( $hex, WPBC_DEFAULT_FORM_ACCENT_COLOR ), '#' ); | |
| 639 | + if ( 3 === strlen( $hex ) ) { | |
| 640 | + $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2]; | |
| 641 | + } | |
| 642 | + | |
| 643 | + $linear = array(); | |
| 644 | + for ( $index = 0; $index < 3; $index++ ) { | |
| 645 | + $channel = hexdec( substr( $hex, $index * 2, 2 ) ) / 255; | |
| 646 | + $linear[] = ( $channel <= 0.03928 ) ? ( $channel / 12.92 ) : pow( ( $channel + 0.055 ) / 1.055, 2.4 ); | |
| 647 | + } | |
| 648 | + | |
| 649 | + return ( 0.2126 * $linear[0] ) + ( 0.7152 * $linear[1] ) + ( 0.0722 * $linear[2] ); | |
| 650 | +} | |
| 651 | + | |
| 652 | +/** | |
| 653 | + * Apply the optional accent overlay to resolved Form Style CSS variables. | |
| 654 | + * | |
| 655 | + * @param array $css_vars CSS variables resolved from the selected preset. | |
| 656 | + * @param array $options Optional raw accent settings. | |
| 657 | + * @param bool $preserve_custom_button_colors Keep explicit Custom-style button colors. | |
| 658 | + * @return array | |
| 659 | + */ | |
| 660 | +function wpbc_bfb_settings__apply_form_accent_css_vars( $css_vars, $options = array(), $preserve_custom_button_colors = false ) { | |
| 661 | + | |
| 662 | + $accent_options = wpbc_bfb_settings__get_form_accent_options( $options ); | |
| 663 | + if ( 'On' !== $accent_options['booking_form_accent_enabled'] ) { | |
| 664 | + return $css_vars; | |
| 665 | + } | |
| 666 | + | |
| 667 | + $accent = $accent_options['booking_form_accent_color']; | |
| 668 | + $luminance = wpbc_bfb_settings__get_form_style_color_luminance( $accent ); | |
| 669 | + $contrast = ( $luminance > 0.18 ) ? '#000000' : '#ffffff'; | |
| 670 | + $hover_target = ( '#ffffff' === $contrast ) ? '#000000' : '#ffffff'; | |
| 671 | + $hover = wpbc_bfb_settings__mix_form_style_colors( $accent, $hover_target, 0.10 ); | |
| 672 | + $hover_contrast = $contrast; | |
| 673 | + $accent_overlay = array( | |
| 674 | + '--wpbc_form-accent-color' => $accent, | |
| 675 | + '--wpbc_form-accent-hover-color' => $hover, | |
| 676 | + '--wpbc_form-accent-contrast-color' => $contrast, | |
| 677 | + '--wpbc_form-field-focus-border-color' => $accent, | |
| 678 | + '--wpbc_form-field-focus-shadow-color' => $accent, | |
| 679 | + '--wpbc_form-choice-checked-border-color' => $accent, | |
| 680 | + '--wpbc_form-choice-checked-color' => $accent, | |
| 681 | + '--wpbc_form-choice-focus-color' => $accent, | |
| 682 | + '--wpbc_form-button-background-color' => $accent, | |
| 683 | + '--wpbc_form-button-background-color-alt' => $accent, | |
| 684 | + '--wpbc_form-button-border-color' => $accent, | |
| 685 | + '--wpbc_form-button-text-color' => $contrast, | |
| 686 | + '--wpbc_form-button-text-color-alt' => $contrast, | |
| 687 | + '--wpbc_form-button-hover-background-color' => $hover, | |
| 688 | + '--wpbc_form-button-hover-border-color' => $hover, | |
| 689 | + '--wpbc_form-button-hover-text-color' => $hover_contrast, | |
| 690 | + '--wpbc_form-button-light-hover-border-color' => $accent, | |
| 691 | + '--wpbc_form-button-primary-hover-border-color' => $hover, | |
| 692 | + '--wpbc_form-page-break-color' => $accent, | |
| 693 | + ); | |
| 694 | + | |
| 695 | + if ( $preserve_custom_button_colors ) { | |
| 696 | + $custom_button_css_vars = array( | |
| 697 | + '--wpbc_form-button-background-color', | |
| 698 | + '--wpbc_form-button-background-color-alt', | |
| 699 | + '--wpbc_form-button-border-color', | |
| 700 | + '--wpbc_form-button-text-color', | |
| 701 | + '--wpbc_form-button-text-color-alt', | |
| 702 | + '--wpbc_form-button-hover-background-color', | |
| 703 | + '--wpbc_form-button-hover-border-color', | |
| 704 | + '--wpbc_form-button-hover-text-color', | |
| 705 | + '--wpbc_form-button-light-hover-border-color', | |
| 706 | + '--wpbc_form-button-primary-hover-border-color', | |
| 707 | + ); | |
| 708 | + foreach ( $custom_button_css_vars as $css_var_name ) { | |
| 709 | + unset( $accent_overlay[ $css_var_name ] ); | |
| 710 | + } | |
| 711 | + } | |
| 712 | + | |
| 713 | + /** | |
| 714 | + * Filter the CSS variables supplied by the global accent overlay. | |
| 715 | + * | |
| 716 | + * @param array $accent_overlay Accent CSS variables. | |
| 717 | + * @param array $accent_options Sanitized accent settings. | |
| 718 | + * @param array $css_vars Base Form Style CSS variables. | |
| 719 | + * @param bool $preserve_custom_button_colors Whether Custom button controls take precedence. | |
| 720 | + */ | |
| 721 | + $accent_overlay = apply_filters( 'wpbc_bfb_form_style_accent_css_vars', $accent_overlay, $accent_options, $css_vars, $preserve_custom_button_colors ); | |
| 722 | + | |
| 723 | + return array_merge( $css_vars, is_array( $accent_overlay ) ? $accent_overlay : array() ); | |
| 724 | +} | |
| 725 | + | |
| 726 | +/** | |
| 478 | 727 | * Sanitize CSS length values used by global form style options. |
| 479 | 728 | * |
| 480 | 729 | * @param string $value Raw value. |
| 481 | 730 | * @param string $fallback Fallback value. |
| @@ -484,9 +733,9 @@ | ||
| 484 | 733 | function wpbc_bfb_settings__sanitize_form_style_length( $value, $fallback ) { |
| 485 | 734 | |
| 486 | 735 | $value = trim( (string) $value ); |
| 487 | 736 | |
| 488 | - if ( preg_match( '/^-?\d+(?:\.\d+)?(?:px|rem|em|%)$/i', $value ) ) { | |
| 737 | + if ( preg_match( '/^\d+(?:\.\d+)?(?:px|rem|em|%)$/i', $value ) ) { | |
| 489 | 738 | return $value; |
| 490 | 739 | } |
| 491 | 740 | |
| 492 | 741 | return $fallback; |
| @@ -536,8 +785,10 @@ | ||
| 536 | 785 | 'booking_form_custom_secondary_button_border_color' => wpbc_bfb_settings__sanitize_form_style_color( $values['booking_form_custom_secondary_button_border_color'], $defaults['booking_form_custom_secondary_button_border_color'] ), |
| 537 | 786 | 'booking_form_custom_secondary_button_hover_background_color' => wpbc_bfb_settings__sanitize_form_style_color( $values['booking_form_custom_secondary_button_hover_background_color'], $defaults['booking_form_custom_secondary_button_hover_background_color'] ), |
| 538 | 787 | 'booking_form_custom_secondary_button_hover_text_color' => wpbc_bfb_settings__sanitize_form_style_color( $values['booking_form_custom_secondary_button_hover_text_color'], $defaults['booking_form_custom_secondary_button_hover_text_color'] ), |
| 539 | 788 | 'booking_form_custom_secondary_button_hover_border_color' => wpbc_bfb_settings__sanitize_form_style_color( $values['booking_form_custom_secondary_button_hover_border_color'], $defaults['booking_form_custom_secondary_button_hover_border_color'] ), |
| 789 | + 'booking_form_custom_button_border_width' => wpbc_bfb_settings__sanitize_form_style_length( $values['booking_form_custom_button_border_width'], $defaults['booking_form_custom_button_border_width'] ), | |
| 790 | + 'booking_form_custom_button_border_radius' => wpbc_bfb_settings__sanitize_form_style_length( $values['booking_form_custom_button_border_radius'], $defaults['booking_form_custom_button_border_radius'] ), | |
| 540 | 791 | ); |
| 541 | 792 | } |
| 542 | 793 | |
| 543 | 794 | /** |
| @@ -552,14 +803,16 @@ | ||
| 552 | 803 | $style = ( '' === (string) $style ) ? wpbc_bfb_settings__get_current_form_style() : wpbc_bfb_settings__sanitize_form_style( $style ); |
| 553 | 804 | $preset = wpbc_bfb_settings__get_form_style_preset( $style ); |
| 554 | 805 | |
| 555 | 806 | if ( empty( $preset['custom'] ) ) { |
| 556 | - return isset( $preset['css_vars'] ) && is_array( $preset['css_vars'] ) ? $preset['css_vars'] : array(); | |
| 807 | + $css_vars = isset( $preset['css_vars'] ) && is_array( $preset['css_vars'] ) ? $preset['css_vars'] : array(); | |
| 808 | + | |
| 809 | + return wpbc_bfb_settings__apply_form_accent_css_vars( $css_vars, $custom_options ); | |
| 557 | 810 | } |
| 558 | 811 | |
| 559 | 812 | $custom = wpbc_bfb_settings__get_custom_form_style_options( $custom_options ); |
| 560 | 813 | |
| 561 | - return array( | |
| 814 | + $css_vars = array( | |
| 562 | 815 | '--wpbc-bfb-form-background' => $custom['booking_form_custom_background_color'], |
| 563 | 816 | '--wpbc-bfb-form-border-color' => $custom['booking_form_custom_border_color'], |
| 564 | 817 | '--wpbc-bfb-form-border-width' => $custom['booking_form_custom_border_width'], |
| 565 | 818 | '--wpbc-bfb-form-border-radius' => $custom['booking_form_custom_border_radius'], |
| @@ -575,8 +828,11 @@ | ||
| 575 | 828 | '--wpbc_form-field-border-color-spare' => $custom['booking_form_custom_field_border_color'], |
| 576 | 829 | '--wpbc_form-field-focus-border-color' => '#066aab', |
| 577 | 830 | '--wpbc_form-field-focus-shadow-color' => '#066aab', |
| 578 | 831 | '--wpbc_form-field-disabled-color' => 'rgba(0, 0, 0, 0.2)', |
| 832 | + '--wpbc_form-button-border-radius' => $custom['booking_form_custom_button_border_radius'], | |
| 833 | + '--wpbc_form-button-border-style' => 'solid', | |
| 834 | + '--wpbc_form-button-border-size' => $custom['booking_form_custom_button_border_width'], | |
| 579 | 835 | '--wpbc_form-button-background-color' => $custom['booking_form_custom_button_background_color'], |
| 580 | 836 | '--wpbc_form-button-background-color-alt' => $custom['booking_form_custom_button_background_color'], |
| 581 | 837 | '--wpbc_form-button-border-color' => $custom['booking_form_custom_button_border_color'], |
| 582 | 838 | '--wpbc_form-button-text-color' => $custom['booking_form_custom_button_text_color'], |
| @@ -588,8 +844,9 @@ | ||
| 588 | 844 | '--wpbc_form-choice-checked-color' => '#066aab', |
| 589 | 845 | '--wpbc_form-choice-focus-color' => '#066aab', |
| 590 | 846 | '--wpbc_form-button-light-background-color' => $custom['booking_form_custom_secondary_button_background_color'], |
| 591 | 847 | '--wpbc_form-button-light-border-color' => $custom['booking_form_custom_secondary_button_border_color'], |
| 848 | + '--wpbc_form-button-light-border-size' => $custom['booking_form_custom_button_border_width'], | |
| 592 | 849 | '--wpbc_form-button-light-text-color' => $custom['booking_form_custom_secondary_button_text_color'], |
| 593 | 850 | '--wpbc_form-button-light-box-shadow' => '0 2px 10px 2px #ffffff54', |
| 594 | 851 | '--wpbc_form-button-light-hover-background-color' => $custom['booking_form_custom_secondary_button_hover_background_color'], |
| 595 | 852 | '--wpbc_form-button-light-hover-border-color' => $custom['booking_form_custom_secondary_button_hover_border_color'], |
| @@ -597,8 +854,10 @@ | ||
| 597 | 854 | '--wpbc_form-button-light-hover-box-shadow' => '0 2px 10px 2px #ffffff54', |
| 598 | 855 | '--wpbc_form-button-primary-hover-border-color' => $custom['booking_form_custom_button_hover_border_color'], |
| 599 | 856 | '--wpbc_form-page-break-color' => '#066aab', |
| 600 | 857 | ); |
| 858 | + | |
| 859 | + return wpbc_bfb_settings__apply_form_accent_css_vars( $css_vars, $custom_options, true ); | |
| 601 | 860 | } |
| 602 | 861 | |
| 603 | 862 | /** |
| 604 | 863 | * Get form/settings JSON keys that belong to the global Form Style feature. |
| @@ -612,8 +871,10 @@ | ||
| 612 | 871 | |
| 613 | 872 | return array( |
| 614 | 873 | // New global Form Style model. |
| 615 | 874 | 'booking_form_style', |
| 875 | + 'booking_form_accent_enabled', | |
| 876 | + 'booking_form_accent_color', | |
| 616 | 877 | 'booking_form_custom_background_color', |
| 617 | 878 | 'booking_form_custom_border_color', |
| 618 | 879 | 'booking_form_custom_border_width', |
| 619 | 880 | 'booking_form_custom_border_radius', |
| @@ -634,8 +895,10 @@ | ||
| 634 | 895 | 'booking_form_custom_secondary_button_border_color', |
| 635 | 896 | 'booking_form_custom_secondary_button_hover_background_color', |
| 636 | 897 | 'booking_form_custom_secondary_button_hover_text_color', |
| 637 | 898 | 'booking_form_custom_secondary_button_hover_border_color', |
| 899 | + 'booking_form_custom_button_border_width', | |
| 900 | + 'booking_form_custom_button_border_radius', | |
| 638 | 901 | |
| 639 | 902 | // Retired per-form appearance model from the unreleased 11.4 work. |
| 640 | 903 | 'booking_form_theme', |
| 641 | 904 | 'booking_form_container_style', |
