| @@ -206,15 +206,37 @@ | ||
| 206 | 206 | public static function get_style_attr( $form_id ) { |
| 207 | 207 | $settings = self::get_settings( $form_id ); |
| 208 | 208 | $vars = []; |
| 209 | 209 | |
| 210 | - // Colors. | |
| 210 | + // Colors. Color-derived tints are emitted per-form so they track the | |
| 211 | + // chosen color: the static :root @supports defaults in _variables.scss are | |
| 212 | + // computed from the default brand/text colors and cannot see a per-form | |
| 213 | + // override (they live on :root, the override on the form container), so | |
| 214 | + // without this the button hover and field tints stay default. Ratios | |
| 215 | + // mirror that @supports block and SureForms' inc/generate-form-markup.php. | |
| 216 | + // Keep in sync with buildStyleVars() in src/editor/form-style-vars.js. | |
| 211 | 217 | if ( '' !== $settings['primaryColor'] ) { |
| 212 | - $vars['--sd-color-scheme-primary'] = $settings['primaryColor']; | |
| 218 | + $primary = $settings['primaryColor']; | |
| 219 | + $vars['--sd-color-scheme-primary'] = $primary; | |
| 220 | + $vars['--sd-color-scheme-primary-hover'] = "hsl(from {$primary} h s l / 0.9)"; | |
| 221 | + $vars['--sd-color-input-border-hover'] = "hsl(from {$primary} h s l / 0.65)"; | |
| 222 | + $vars['--sd-color-input-border-focus-glow'] = "hsl(from {$primary} h s l / 0.15)"; | |
| 223 | + $vars['--sd-color-input-selected'] = "hsl(from {$primary} h s l / 0.1)"; | |
| 213 | 224 | } |
| 214 | 225 | if ( '' !== $settings['textColor'] ) { |
| 215 | - $vars['--sd-color-input-text'] = $settings['textColor']; | |
| 216 | - $vars['--sd-color-input-label'] = $settings['textColor']; | |
| 226 | + $text = $settings['textColor']; | |
| 227 | + $vars['--sd-color-input-text'] = $text; | |
| 228 | + $vars['--sd-color-input-label'] = $text; | |
| 229 | + $vars['--sd-color-input-description'] = "hsl(from {$text} h s l / 0.65)"; | |
| 230 | + $vars['--sd-color-input-placeholder'] = "hsl(from {$text} h s l / 0.5)"; | |
| 231 | + $vars['--sd-color-input-background'] = "hsl(from {$text} h s l / 0.02)"; | |
| 232 | + $vars['--sd-color-input-background-hover'] = "hsl(from {$text} h s l / 0.05)"; | |
| 233 | + $vars['--sd-color-input-border'] = "hsl(from {$text} h s l / 0.25)"; | |
| 234 | + $vars['--sd-color-donation-amount-svg'] = "hsl(from {$text} h s l / 0.7)"; | |
| 235 | + $vars['--sd-color-input-prefix'] = "hsl(from {$text} h s l / 0.65)"; | |
| 236 | + $vars['--sd-disabled-color'] = "hsl(from {$text} h s l / 0.5)"; | |
| 237 | + $vars['--sd-disabled-background-color'] = "hsl(from {$text} h s l / 0.07)"; | |
| 238 | + $vars['--sd-disabled-border'] = "hsl(from {$text} h s l / 0.15)"; | |
| 217 | 239 | } |
| 218 | 240 | if ( '' !== $settings['textOnPrimaryColor'] ) { |
| 219 | 241 | $vars['--sd-btn-text-color'] = $settings['textOnPrimaryColor']; |
| 220 | 242 | } |
| @@ -393,8 +415,17 @@ | ||
| 393 | 415 | return $value; |
| 394 | 416 | } |
| 395 | 417 | // Named color — letters only, so it cannot contain parens/url()/escapes. |
| 396 | 418 | if ( preg_match( '/^[a-z]+$/i', $value ) ) { |
| 419 | + return $value; | |
| 420 | + } | |
| 421 | + // CSS custom-property reference for theme/global palette colors, e.g. | |
| 422 | + // var(--wp--preset--color--primary), with an optional safe fallback | |
| 423 | + // (hex / named / numeric rgb()|hsl() / one nested var). The property name | |
| 424 | + // is restricted to [A-Za-z0-9_-] and the whole value is anchored, so it | |
| 425 | + // cannot contain quotes, semicolons, url() or escapes that would break out | |
| 426 | + // of the inline style attribute. | |
| 427 | + if ( preg_match( '/^var\(\s*--[A-Za-z0-9_-]+\s*(,\s*(#[A-Fa-f0-9]{3,8}|[A-Za-z]+|(?:rgb|rgba|hsl|hsla)\([0-9.,%\/\s]+\)|var\(\s*--[A-Za-z0-9_-]+\s*\)))?\s*\)$/i', $value ) ) { | |
| 397 | 428 | return $value; |
| 398 | 429 | } |
| 399 | 430 | return ''; |
| 400 | 431 | } |
