Normalize form field styling across all themes

[superdav42]

Summary

• Populates the empty checkout.css with scoped form normalization CSS (.wu-styling .form-control) for consistent input styling across block themes, classic themes, and page builder setups
• Adds CSS custom properties (--wu-input-*, --wu-label-*, --wu-submit-*) with a theme-aware accent color cascade that automatically picks up colors from Elementor, Kadence, Beaver Builder, block themes, and WP admin
• Replaces hardcoded inline styles on the site URL prefix/suffix with .wu-input-addon CSS classes
• Enqueues wu-checkout style on the login form so login/reset-password pages also get consistent form styling

Test plan

• Visit /register/ with Twenty Twenty-Five — fields should have consistent width, padding, borders
• Verify the payment_template hidden field is not visible (was exposed by display: block override — fixed by removing it)
• Password fields should match the width of email/username/site-title fields
• Site URL prefix ("https://") and suffix (".domain.com") should have matching borders and background
• Visit /login/ — login form inputs should also be styled
• Test with Astra, Kadence, GeneratePress, Storefront themes
• Test with Elementor and Beaver Builder active
• Override --wu-input-border-color etc. in dev tools to confirm custom properties work
• Run vendor/bin/phpunit — all 2871 tests pass

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced theming capabilities with customizable accent colors across multiple theme options.

• Style

  • Refined visual consistency across checkout and login forms with comprehensive updates to input fields, labels, and buttons.
  • Standardized form control appearance across all themes for a more polished, cohesive experience.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce a comprehensive checkout form styling system with CSS custom properties for theming and form control normalization. Related PHP files are updated to properly load and apply these styles, with the wu-checkout stylesheet now depending on wu-styling and login form elements enqueuing the checkout stylesheet.

Changes

Cohort / File(s)	Summary
Checkout stylesheet assets/css/checkout.css, assets/css/checkout.min.css	Replaces minimal styling with comprehensive checkout form normalization under .wu-styling scope. Adds CSS custom properties for accent color theming, and implements consistent styling for form controls, labels, password fields, input addons, grouped inputs, and primary buttons.
Asset loading configuration inc/class-scripts.php, inc/ui/class-login-form-element.php	Updates stylesheet dependencies and enqueue order. The wu-checkout style now depends on wu-styling, and login form elements enqueue the wu-checkout stylesheet before wu-password.
Site URL field styling inc/checkout/signup-fields/class-signup-field-site-url.php	Simplifies prefix and suffix HTML attribute class definitions to use streamlined wu-input-addon-prefix and wu-input-addon-suffix classes, replacing previous flex-based class strings and inline styles. Updates site_url field to use wu-input-grouped class.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 CSS now springs to life with colors bright,
Form controls dance in organized delight,
Dependencies linked like cottontail chains,
Checkout fields styled, no messy remains!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'Normalize form field styling across all themes' accurately reflects the main objective: adding comprehensive CSS styling to normalize form fields across different themes.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch normalize-checkout-form-styling

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🔨 Build Complete - Ready for Testing!

📦 Download Build Artifact (Recommended)

Download the zip build, upload to WordPress and test:

• Build: ultimate-multisite
• ⬇️ Download from GitHub Actions
• ⬇️ Download without Github Account (nightly.link)

🌐 Test in WordPress Playground (Very Experimental)

Click the link below to instantly test this PR in your browser - no installation needed!
Playground support for multisite is very limitied, hopefully it will get better in the future.

🚀 Launch in Playground

Login credentials: admin / password

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@assets/css/checkout.min.css`:
- Around line 1-13: The :root block is not fully minified (retains
newlines/tabs) while the rest of the stylesheet (e.g., the :root selector and
the .wu-styling rules) is minified; regenerate or re-minify checkout.css so the
:root custom-property block is collapsed to a single line consistent with the
rest of the file—run your CSS minifier over the source checkout.css (fix any
syntax that prevents proper minification in the :root block), or restore the
original source for :root then re-run the build so :root and .wu-styling are
uniformly minified.

🧹 Nitpick comments (4)

assets/css/checkout.css (4)

1-70: Well-structured theming foundation with CSS custom properties.

The accent color cascade and custom property system is well-designed for multi-theme compatibility. The documentation comments are thorough and helpful.

One Stylelint fix needed on line 67 — use modern color function notation:

🔧 Proposed fix for Stylelint errors

-	--wu-addon-bg: rgba(0, 0, 0, 0.03);
+	--wu-addon-bg: rgb(0 0 0 / 3%);

---

86-92: -webkit-appearance: none flagged by Stylelint but likely intentional for Safari compatibility.

Stylelint flags this as property-no-vendor-prefix, but appearance: none still needs the -webkit- prefix for older Safari versions (pre-15.4). If the project's browser support matrix includes those versions, this is fine — consider adding a stylelint-disable comment to suppress the warning.

🔧 Suppress lint warning if intentional

 	appearance: none;
+	/* stylelint-disable-next-line property-no-vendor-prefix -- needed for Safari < 15.4 */
 	-webkit-appearance: none;

---

171-185: Use shorthand border-radius to satisfy Stylelint and reduce verbosity.

Both .wu-input-addon-prefix and .wu-input-addon-suffix use four longhand border-radius properties. Stylelint flags these as declaration-block-no-redundant-longhand-properties.

♻️ Proposed fix using shorthand

 .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;
+	border-radius: var(--wu-input-border-radius) 0 0 var(--wu-input-border-radius);
 }
 
 .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;
+	border-radius: 0 var(--wu-input-border-radius) var(--wu-input-border-radius) 0;
 }

---

94-98: Focus style removes outline — verify adequate visual indicator.

outline: none on Line 97 suppresses the default focus ring for .form-control:focus. The replacement box-shadow on Line 96 provides a visual indicator, but note that box-shadow is not visible in Windows High Contrast Mode (forced-colors). Consider adding a transparent outline for forced-colors accessibility:

♿ Proposed a11y improvement

 .wu-styling .form-control:focus {
 	border-color: var(--wu-input-focus-border-color);
 	box-shadow: var(--wu-input-focus-shadow);
-	outline: none;
+	outline: 2px solid transparent; /* visible in forced-colors / High Contrast Mode */
 }

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Minified file appears partially minified.

The :root block (Lines 1-13) retains tabs and newlines while the rest of the file is properly minified on a single line. This suggests the minification tool may not be handling CSS custom property blocks correctly, or the file was hand-edited. Regenerate this file from the source after applying fixes to checkout.css.

🧰 Tools

🪛 Stylelint (17.2.0)

[error] 13-13: Expected "0.03" to be "3%" (alpha-value-notation)

(alpha-value-notation)

---

[error] 13-13: Expected "rgba" to be "rgb" (color-function-alias-notation)

(color-function-alias-notation)

---

[error] 13-13: Expected modern color-function notation (color-function-notation)

(color-function-notation)

---

[error] 13-13: Expected shorthand property "border-radius" (declaration-block-no-redundant-longhand-properties)

(declaration-block-no-redundant-longhand-properties)

---

[error] 13-13: Expected shorthand property "border-radius" (declaration-block-no-redundant-longhand-properties)

(declaration-block-no-redundant-longhand-properties)

---

[error] 13-13: Unexpected vendor-prefixed property "-webkit-appearance" (property-no-vendor-prefix)

(property-no-vendor-prefix)

---

[error] 13-13: Unexpected vendor-prefixed property "-webkit-appearance" (property-no-vendor-prefix)

(property-no-vendor-prefix)

---

[error] 13-13: Expected quotes around "submit" (selector-attribute-quotes)

(selector-attribute-quotes)

---

[error] 13-13: Expected quotes around "submit" (selector-attribute-quotes)

(selector-attribute-quotes)

---

[error] 13-13: Expected quotes around "submit" (selector-attribute-quotes)

(selector-attribute-quotes)

🤖 Prompt for AI Agents

In `@assets/css/checkout.min.css` around lines 1 - 13, The :root block is not
fully minified (retains newlines/tabs) while the rest of the stylesheet (e.g.,
the :root selector and the .wu-styling rules) is minified; regenerate or
re-minify checkout.css so the :root custom-property block is collapsed to a
single line consistent with the rest of the file—run your CSS minifier over the
source checkout.css (fix any syntax that prevents proper minification in the
:root block), or restore the original source for :root then re-run the build so
:root and .wu-styling are uniformly minified.