See #105 — The new designs use flexible spacing, the values are described in this codepen. The new spacing variables are almost identical to the existing values, with some minor changes.
Small: not actually listed in the codepen, but I noticed a bunch of places that used a 30/50 scale so I've mapped that to this value. It's --wp--preset--spacing--40: clamp(30px, 5vw, 50px);
Large: This was set to be 20/80 scale using the same values as production, but I felt the scale was off, too broad— it wouldn't reach 80px until 1440px wide, and wouldn't hit 20px until 360px wide, which is pretty small for modern phones. I've changed this scale to be more consistent across the variables, so now it starts at 20px until 600px, and scales until it hits 80px at a 1000px viewport.
Medium, 2X-Large, 3X-Large: These were also tweaked so that the scale has more consistent breakpoints, and so the scale value is simplified.
See #105 — The new designs use flexible spacing, the values are described in this codepen. The new spacing variables are almost identical to the existing values, with some minor changes.
--wp--preset--spacing--40: clamp(30px, 5vw, 50px);I've also updated the docs for these values.
Before & After values at different sizes
At 450px wide
| Name | Before | After | |--------------|--------|-------| | Small | 40px | 30px | | Medium | 40px | 40px | | Large | 25px | 20px | | 2X-Large | 80px | 80px | | 3X-Large | 80px | 80px |At 800px wide
| Name | Before | After | |--------------|--------|-------| | Small | 40px | 40px | | Medium | 50px | 50px | | Large | 44px | 40px | | 2X-Large | 114px | 93px | | 3X-Large | 114px | 106px |At 1320px wide
| Name | Before | After | |--------------|--------|-------| | Small | 40px | 50px | | Medium | 60px | 60px | | Large | 73px | 80px | | 2X-Large | 120px | 120px | | 3X-Large | 160px | 160px |At 1920px wide
| Name | Before | After | |--------------|--------|-------| | Small | 40px | 50px | | Medium | 60px | 60px | | Large | 80px | 80px | | 2X-Large | 120px | 120px | | 3X-Large | 160px | 160px |How to test the changes in this Pull Request: