Change size of swatch on mobile

[jas7457]

PR Summary:

Changes the swatch size from 44px to 36px on the product details page, for mobile only.

Why are these changes introduced?

Fixes https://github.com/Shopify/custom-data-issues/issues/2334

What approach did you take?

Simply update the css variable.

Visual impact on existing themes

The swatches on PDP will be slightly smaller

Testing steps/scenarios

• View my Taxonomy Product and ensure that the swatch is 36px on mobile
• Ensure this style does not bleed to swatch filters
• Ensure this style does not bleed to the variant dropdown

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[alisterdev]

Thanks for tweaking this! 🙌
🎩

[jas7457]

Looks like I need 2 approvals - @mkoenig-shopify can you give it an approval too?

[mkoenig-shopify]

thank you!