Changes proposed in this Pull Request:

Closes #46008.

This PR introduces the following changes:

1. Border and outline color adjustments:

   • Modified input fields (email address, country, order note, etc.) to use $universal-border-light as the outline/border color with a width of 1px when not focused.
   • Changed input fields to use $input-border-gray for the outline/border/box-shadow color with a width of 2px when focused.

2. Field height and label text size adjustments:

   • Ensured that text input fields have a consistent height of 50px.
   • Updated the labels of text fields to use a font size of approximately 12px when the input field contains text (with a scaling factor of 0.75 when text is present).

3. Dropdown chevron icon behavior:

   • Updated dropdown fields to display a down-facing chevron when closed.
   • Changed the chevron icon to an up-facing one when the dropdown is open.

4. Inherit global colors:

   • Ensure that the input labels, values, and outlines inherit the color that if globally defined as the font color.

5. Spacing adjustments for coupon code:

   • Added a top margin of 4px to the coupon code .wc-block-components-totals-discount__coupon-list.
   • Ensured that the top margin is consistent on both the cart and checkout pages.

Testing Instructions:

The testing instructions provided guide the tester through verifying each of these changes in detail, ensuring that the changes work as intended and that the UI behaves consistently when interacting with the updated elements.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions

Before all test cases

1. Install and activate the Twenty Twenty-Four theme.
2. Create a test page and add the Checkout block to it.
3. Go to /wp-admin/edit.php?post_type=shop_coupon and create a test coupon.
4. Go to the frontend.
5. Add a product to the cart.
6. Open the test page that contains the Checkout block.

Outline colors

1. Click into the email address field.
2. Verify that the text input fields (e.g., email address, country, order note) use $universal-border-light as the outline/border color and that the outline/border width is 1px.
3. Individually select each text input field from the previous step.
4. Verify that they use $input-border-gray for outline/border/box-shadow color, and that the outline/border/box-shadow width is 2px.
5. Use both the mouse and keyboard to navigate and ensure the outline colors remain consistent when the fields are focused.
6. Verify that the outlines of the radio input and checkboxes are consistent with the outlines of the text input fields → 1px when not being focued / 2px when being focued.

Before:

After (default):

After (focused):

Field height and label text size

1. Verify that the text input fields (email, address, coupon, etc.) have a height of 50px.
2. Verify that the labels of the text fields use a font size of approximately 12px. (Note: When inspecting the label font size, 16.8px will be displayed, which is the size when the input field is empty. When the input field contains text, the label scales down by a factor of 0.75.)

Before:

After:

Dropdown chevron icon

1. Look at the dropdown field, such as the country field.
2. Verify that it shows a down-facing chevron when the dropdown field is closed.
3. Open the dropdown field.
4. Verify that it shows an up-facing chevron when the dropdown field is open.

Before:

After (closed):

After (opened):

Inherit global colors

1. Go to Apperance » Editor » Pages » Checkout.
2. Open the styles sidebar in the upper-right corner.
3. Click on Browse styles.
4. Select the style Rust:

5. Verify that all input labels, values, and outlines appear in red. Checkboxes and radio buttons also appear in red, when being active or focused, and appear in grey otherwise.
6. Look up the Checkout block in the frontend.
7. Verify that all input labels, values, and outlines appear in red. Checkboxes and radio buttons also appear in red, when being active or focused, and appear in grey otherwise.

8. Go back to the site editor.
9. Open the colors section and change the text color to #5E81AC.
10. Verify that all input labels, values, and outlines appear in blue. Checkboxes and radio buttons also appear in blue, when being active or focused, and appear in grey otherwise.
11. Look up the Checkout block in the frontend.
12. Verify that all input labels, values, and outlines appear in blue. Checkboxes and radio buttons also appear in blue, when being active or focused, and appear in grey otherwise.

Spacing between coupon title and coupon code

1. Apply the coupon code.
2. Verify that the coupon code .wc-block-components-totals-discount__coupon-list has a top margin of 4px.
3. Go to the cart page.
4. Verify that the coupon code also shows a top margin of 4px.

Before:

After:

Changelog entry

• Automatically create a changelog entry from the details below.