Add width, block gap and spacing presets

[carolinan]

Figma link: https://www.figma.com/design/dzGCSntVch4EQdVERTqyVK/Twenty-Twenty-Five?node-id=77-7931&t=qC1CDiog2u4tpIsg-4

I am interpreting the Figma file as follows:

Width

contentSize 645px
wideSize 1340px

Block gap

• Unknown

Spacing presets

Note that the slugs must be numeric.

1. One spacing preset that results in 20px (1.25 rem) on small/mobile screens and 50px (3.125 rem) on desktop,
   used to set the horizontal distance between the content and the edge of the browser.

2. Besides that, I do not know which of these must be fluid and what their min and max values need to be:

Extra tiny: 5px
Tiny: 10px
Extra small: 20px
Small: 30px
Regular: 50px
Large: 70px
Extra lage: 90px
XXL: 140px

[juanfra]

Pinging @beafialho @jasmussen @richtabor for visibility.

[richtabor]

Gaps should mostly be min/max values, not hard integers.

[beafialho]

Thanks for creating this issue. I confirm those are the widths.

Block gap I am still unsure if this will look as I intend in the editor, but we could try 20px and see how that looks.

Could you clarify what you mean with this? Do they have to be rem values?

Note that the slugs must be numeric.
One spacing preset that results in 20px (1.25 rem) on small/mobile screens and 50px (3.125 rem) on desktop,
used to set the horizontal distance between the content and the edge of the browser.

I think only Large, Extra Large and XXLarge need to be fluid. I added min and max values in the Figma library, they can be seen in the right sidebar:

[carolinan]

Do they have to be rem values?

I thought it was best practice to use relative units.

[joedolson]

I generally prefer that fonts and vertical spacing is done in relative units, and gaps and horizontal spacing is done in fixed units. This is largely because if a font size is increased by the user, it can become very problematic if the gaps and margins grow in the same way, making text line lengths decrease to a point that they're simply unreadable.

[richtabor]

Fix units for spacing is fine, as long as they're using min/max.

[carolinan]

I added min and max values in the Figma library, they can be seen in the right sidebar:

I don't know where in the Figma interface this is or if you are talking about something that is not already shared in this issue.
If I click on the Figma icon in the top left corner and select "Libraries" It only says "Includes two missing libraries" and it doesn't have anything related to spacing in it.

[carolinan]

If you already know which min() or clamp() values that are expected, kindly provide those.
Clamp needs a preferred value and only 2 values are mentioned.

[carolinan]

One more question 😄
7 is the max number of options that fits in the stepped control. 8 sizes or more will show as a drop down.
Should one of the sizes be a custom variable instead? One that can be used in templates but wont show in the spacing control. If so, which?

[beafialho]

Sorry for not being clearer @carolinan. Here's a quick screen recording of where those spacing presets are specified in the Figma file. I also just checked that these are published as a library, so you should be able to see them.

spacing-presets.mp4