Normalize form field styling across all themes

assets/css/checkout.css

@@ -1,3 +1,228 @@
-.nothing {
-  background: #000;
-}
+/**
+ * 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;
+}

inc/checkout/signup-fields/class-signup-field-site-url.php

@@ -330,22 +330,20 @@ 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,
 			];
 
 			$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',

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'), []);
 

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');