From cf4c9e9fe2186a5a1df4b4bc3b1d62d76530cbdc Mon Sep 17 00:00:00 2001 From: David Stone Date: Thu, 12 Feb 2026 22:27:45 -0700 Subject: [PATCH] Add form field normalization CSS for consistent styling across all themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Checkout and login forms had no base CSS for form controls — the plugin relied entirely on the active theme, causing narrow/unstyled inputs in block themes and inconsistent widths between password and text fields. - Populate checkout.css with scoped form normalization under .wu-styling - CSS custom properties (--wu-input-*, --wu-label-*, --wu-submit-*) with theme-aware accent color cascade (Elementor, Kadence, Beaver Builder, block themes, WP admin) - Replace inline styles on site URL prefix/suffix with .wu-input-addon classes - Add wu-styling as dependency for wu-checkout style registration - Enqueue wu-checkout in login form for consistent login/reset styling Co-Authored-By: Claude Opus 4.6 --- assets/css/checkout.css | 231 +++++++++++++++++- assets/css/checkout.min.css | 14 +- .../class-signup-field-site-url.php | 8 +- inc/class-scripts.php | 2 +- inc/ui/class-login-form-element.php | 3 + 5 files changed, 248 insertions(+), 10 deletions(-) diff --git a/assets/css/checkout.css b/assets/css/checkout.css index 28ff50f8c..df783ca59 100644 --- a/assets/css/checkout.css +++ b/assets/css/checkout.css @@ -1,3 +1,228 @@ -.nothing { - background: #000; -} \ No newline at end of file +/** + * Checkout form normalization styles. + * + * Provides consistent form field styling across all themes + * (classic, block, and page-builder themes). Scoped under + * .wu-styling to avoid collisions with theme styles. + * + * @since 2.4.0 + */ + +/** + * CSS Custom Properties for form field theming. + * + * Uses the same accent-color fallback cascade as password.css + * to automatically pick up theme colors from: + * - Elementor: --e-global-color-primary, --e-global-color-accent + * - Kadence Theme: --global-palette1, --global-palette2 + * - Beaver Builder: --fl-global-primary-color + * - Block Themes (theme.json): --wp--preset--color--primary, --wp--preset--color--accent + * - WordPress Admin: --wp-admin-theme-color + * + * Theme authors can override any --wu-input-* or --wu-label-* variable directly. + */ +:root { + /* Accent color cascade (mirrors password.css layers) */ + --wu-accent-fallback-wp: var( + --wp--preset--color--accent, + var( + --wp--preset--color--primary, + var(--wp-admin-theme-color, #2271b1) + ) + ); + --wu-accent-fallback-bb: var(--fl-global-primary-color, var(--wu-accent-fallback-wp)); + --wu-accent-fallback-kadence: var(--global-palette1, var(--wu-accent-fallback-bb)); + --wu-accent-color: var( + --e-global-color-accent, + var( + --e-global-color-primary, + var(--wu-accent-fallback-kadence) + ) + ); + + /* Input fields */ + --wu-input-bg: #fff; + --wu-input-color: #1e1e1e; + --wu-input-border-color: #949494; + --wu-input-border-radius: 4px; + --wu-input-padding: 8px 12px; + --wu-input-font-size: 16px; + --wu-input-line-height: 1.5; + --wu-input-focus-border-color: var(--wu-accent-color); + --wu-input-focus-shadow: 0 0 0 1px var(--wu-accent-color); + + /* Labels */ + --wu-label-font-size: 14px; + --wu-label-font-weight: 600; + --wu-label-color: inherit; + + /* Submit / primary buttons */ + --wu-submit-bg: var(--wu-accent-color); + --wu-submit-color: #fff; + --wu-submit-padding: 10px 24px; + --wu-submit-border-radius: 4px; + --wu-submit-font-size: 15px; + + /* Addon (prefix/suffix for site URL field) */ + --wu-addon-bg: rgba(0, 0, 0, 0.03); + --wu-addon-border-color: var(--wu-input-border-color); + --wu-addon-font-size: 90%; +} + +/** + * Base input normalization. + * + * Targets text, email, password, url, number, tel, search inputs + * and textareas that carry the .form-control class. + */ +.wu-styling .form-control { + width: 100%; + box-sizing: border-box; + padding: var(--wu-input-padding); + font-size: var(--wu-input-font-size); + line-height: var(--wu-input-line-height); + color: var(--wu-input-color); + background-color: var(--wu-input-bg); + border: 1px solid var(--wu-input-border-color); + border-radius: var(--wu-input-border-radius); + appearance: none; + -webkit-appearance: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; + max-width: 100%; +} + +.wu-styling .form-control:focus { + border-color: var(--wu-input-focus-border-color); + box-shadow: var(--wu-input-focus-shadow); + outline: none; +} + +.wu-styling .form-control::placeholder { + color: #949494; + opacity: 1; +} + +/** + * Select field normalization. + * + * Since appearance: none removes the native dropdown arrow, + * we add an SVG chevron via background-image. + */ +.wu-styling select.form-control { + padding-right: 36px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 12px 8px; +} + +/** + * Textarea normalization. + */ +.wu-styling textarea.form-control { + min-height: 80px; + resize: vertical; +} + +/** + * Label normalization. + * + * Targets the wu-block labels used in checkout field titles. + */ +.wu-styling label.wu-block { + display: block; + font-size: var(--wu-label-font-size); + font-weight: var(--wu-label-font-weight); + color: var(--wu-label-color); + margin-bottom: 4px; +} + +/** + * Password field container. + * + * Ensure the container is block-level so it matches the width + * of plain text inputs. The password-specific padding is handled + * by password.css (.wu-password-input). + */ +.wu-styling .wu-password-field-container { + display: block; + width: 100%; +} + +/** + * Input addon (prefix/suffix) for grouped fields like site URL. + * + * Replaces inline styles on the site URL prefix ("https://") + * and suffix (".domain.com") containers. + */ +.wu-styling .wu-input-addon { + display: flex; + align-items: center; + justify-content: center; + padding: 0 12px; + box-sizing: border-box; + font-family: monospace; + font-size: var(--wu-addon-font-size); + background-color: var(--wu-addon-bg); + border: 1px solid var(--wu-addon-border-color); + white-space: nowrap; +} + +.wu-styling .wu-input-addon-prefix { + margin-right: -1px; + border-top-left-radius: var(--wu-input-border-radius); + border-bottom-left-radius: var(--wu-input-border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.wu-styling .wu-input-addon-suffix { + margin-left: -1px; + border-top-right-radius: var(--wu-input-border-radius); + border-bottom-right-radius: var(--wu-input-border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/** + * Grouped input (between prefix and suffix). + * + * Removes border-radius so it butts cleanly against addons. + */ +.wu-styling .wu-input-grouped { + border-radius: 0; +} + +/** + * Submit / primary button normalization. + */ +.wu-styling button.button-primary, +.wu-styling input[type="submit"].button-primary { + display: inline-block; + box-sizing: border-box; + padding: var(--wu-submit-padding); + font-size: var(--wu-submit-font-size); + font-weight: 600; + line-height: 1.5; + color: var(--wu-submit-color); + background-color: var(--wu-submit-bg); + border: 1px solid transparent; + border-radius: var(--wu-submit-border-radius); + cursor: pointer; + text-align: center; + text-decoration: none; + appearance: none; + -webkit-appearance: none; + transition: filter 0.15s ease; +} + +.wu-styling button.button-primary:hover, +.wu-styling input[type="submit"].button-primary:hover { + filter: brightness(0.9); +} + +.wu-styling button.button-primary:focus, +.wu-styling input[type="submit"].button-primary:focus { + outline: 2px solid var(--wu-accent-color); + outline-offset: 2px; +} diff --git a/assets/css/checkout.min.css b/assets/css/checkout.min.css index cb17896b6..b0253c3a9 100644 --- a/assets/css/checkout.min.css +++ b/assets/css/checkout.min.css @@ -1 +1,13 @@ -.nothing{background:#000} \ No newline at end of file +:root{--wu-accent-fallback-wp:var( + --wp--preset--color--accent, + var( + --wp--preset--color--primary, + var(--wp-admin-theme-color, #2271b1) + ) + );--wu-accent-fallback-bb:var(--fl-global-primary-color, var(--wu-accent-fallback-wp));--wu-accent-fallback-kadence:var(--global-palette1, var(--wu-accent-fallback-bb));--wu-accent-color:var( + --e-global-color-accent, + var( + --e-global-color-primary, + var(--wu-accent-fallback-kadence) + ) + );--wu-input-bg:#fff;--wu-input-color:#1e1e1e;--wu-input-border-color:#949494;--wu-input-border-radius:4px;--wu-input-padding:8px 12px;--wu-input-font-size:16px;--wu-input-line-height:1.5;--wu-input-focus-border-color:var(--wu-accent-color);--wu-input-focus-shadow:0 0 0 1px var(--wu-accent-color);--wu-label-font-size:14px;--wu-label-font-weight:600;--wu-label-color:inherit;--wu-submit-bg:var(--wu-accent-color);--wu-submit-color:#fff;--wu-submit-padding:10px 24px;--wu-submit-border-radius:4px;--wu-submit-font-size:15px;--wu-addon-bg:rgba(0, 0, 0, 0.03);--wu-addon-border-color:var(--wu-input-border-color);--wu-addon-font-size:90%}.wu-styling .form-control{width:100%;box-sizing:border-box;padding:var(--wu-input-padding);font-size:var(--wu-input-font-size);line-height:var(--wu-input-line-height);color:var(--wu-input-color);background-color:var(--wu-input-bg);border:1px solid var(--wu-input-border-color);border-radius:var(--wu-input-border-radius);appearance:none;-webkit-appearance:none;transition:border-color .15s ease,box-shadow .15s ease;max-width:100%}.wu-styling .form-control:focus{border-color:var(--wu-input-focus-border-color);box-shadow:var(--wu-input-focus-shadow);outline:0}.wu-styling .form-control::placeholder{color:#949494;opacity:1}.wu-styling select.form-control{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}.wu-styling textarea.form-control{min-height:80px;resize:vertical}.wu-styling label.wu-block{display:block;font-size:var(--wu-label-font-size);font-weight:var(--wu-label-font-weight);color:var(--wu-label-color);margin-bottom:4px}.wu-styling .wu-password-field-container{display:block;width:100%}.wu-styling .wu-input-addon{display:flex;align-items:center;justify-content:center;padding:0 12px;box-sizing:border-box;font-family:monospace;font-size:var(--wu-addon-font-size);background-color:var(--wu-addon-bg);border:1px solid var(--wu-addon-border-color);white-space:nowrap}.wu-styling .wu-input-addon-prefix{margin-right:-1px;border-top-left-radius:var(--wu-input-border-radius);border-bottom-left-radius:var(--wu-input-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.wu-styling .wu-input-addon-suffix{margin-left:-1px;border-top-right-radius:var(--wu-input-border-radius);border-bottom-right-radius:var(--wu-input-border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.wu-styling .wu-input-grouped{border-radius:0}.wu-styling button.button-primary,.wu-styling input[type=submit].button-primary{display:inline-block;box-sizing:border-box;padding:var(--wu-submit-padding);font-size:var(--wu-submit-font-size);font-weight:600;line-height:1.5;color:var(--wu-submit-color);background-color:var(--wu-submit-bg);border:1px solid transparent;border-radius:var(--wu-submit-border-radius);cursor:pointer;text-align:center;text-decoration:none;appearance:none;-webkit-appearance:none;transition:filter .15s ease}.wu-styling button.button-primary:hover,.wu-styling input[type=submit].button-primary:hover{filter:brightness(.9)}.wu-styling button.button-primary:focus,.wu-styling input[type=submit].button-primary:focus{outline:2px solid var(--wu-accent-color);outline-offset:2px} \ No newline at end of file diff --git a/inc/checkout/signup-fields/class-signup-field-site-url.php b/inc/checkout/signup-fields/class-signup-field-site-url.php index 8d770b186..e0fb59a55 100644 --- a/inc/checkout/signup-fields/class-signup-field-site-url.php +++ b/inc/checkout/signup-fields/class-signup-field-site-url.php @@ -330,13 +330,12 @@ public function to_fields_array($attributes) { ]; if ($attributes['display_field_attachments']) { - $checkout_fields['site_url']['classes'] .= ' xs:wu-rounded-none'; + $checkout_fields['site_url']['classes'] .= ' wu-input-grouped'; $checkout_fields['site_url']['prefix'] = ' '; $checkout_fields['site_url']['prefix_html_attr'] = [ - 'class' => 'wu-flex wu-items-center wu-px-3 wu-mt-1 sm:wu-mb-1 wu-border-box wu-font-mono wu-justify-center sm:wu-border-r-0', - 'style' => 'background-color: rgba(0, 0, 0, 0.008); border: 1px solid #eee; margin-right: -1px; font-size: 90%;', + 'class' => 'wu-input-addon wu-input-addon-prefix wu-mt-1 sm:wu-mb-1', 'v-html' => 'is_subdomain ? "https://" : "https://" + site_domain + "/"', 'v-cloak' => 1, ]; @@ -344,8 +343,7 @@ public function to_fields_array($attributes) { $checkout_fields['site_url']['suffix'] = ' '; $checkout_fields['site_url']['suffix_html_attr'] = [ - 'class' => 'wu-flex wu-items-center wu-px-3 sm:wu-mt-1 wu-mb-1 wu-border-box wu-font-mono wu-justify-center sm:wu-border-l-0', - 'style' => 'background-color: rgba(0, 0, 0, 0.008); border: 1px solid #eee; margin-left: -1px; font-size: 90%;', + 'class' => 'wu-input-addon wu-input-addon-suffix sm:wu-mt-1 wu-mb-1', 'v-html' => '"." + site_domain', 'v-cloak' => 1, 'v-show' => 'is_subdomain', diff --git a/inc/class-scripts.php b/inc/class-scripts.php index 32fcc8bb6..f13a5e1ba 100644 --- a/inc/class-scripts.php +++ b/inc/class-scripts.php @@ -401,7 +401,7 @@ public function register_default_styles(): void { $this->register_style('wu-admin', wu_get_asset('admin.css', 'css'), ['wu-styling']); - $this->register_style('wu-checkout', wu_get_asset('checkout.css', 'css'), []); + $this->register_style('wu-checkout', wu_get_asset('checkout.css', 'css'), ['wu-styling']); $this->register_style('wu-flags', wu_get_asset('flags.css', 'css'), []); diff --git a/inc/ui/class-login-form-element.php b/inc/ui/class-login-form-element.php index 137b5e299..0ac89ee9f 100644 --- a/inc/ui/class-login-form-element.php +++ b/inc/ui/class-login-form-element.php @@ -302,6 +302,9 @@ public function register_scripts(): void { wp_enqueue_style('wu-admin'); + // Enqueue checkout form normalization styles. + wp_enqueue_style('wu-checkout'); + // Enqueue password styles (includes dashicons as dependency). wp_enqueue_style('wu-password');