feat(height, width): update to SHINE sizing

[dancormier]

SPARK-154

---

This PR updates our set of "sizing units" to the new batch detailed in SPARK-154. I also took this opportunity to clean up our sizing/spacing in general to make it easier to maintain.

Note

All the same classes are available. Only their values have changed. None have been removed unless they were undocumented and accidentally included previously.

How to test

Tip

Use your inspector's computed tab to see computed pixel values

Screenshot example of inspector

• Make sure the docs pages seem reasonable
  • height
  • width
• Verify that the following sets of classes are the same set as before (including classes that represent negative values and responsive classes)
  • height
  • width
  • spacing (margin, padding)
  • flex (specifically .ai-* and .ac-*)
  • positioning
• Verify that the classes represent the new values
  • height (.hs*, .hmn*, .hmx*)
  • width (.ws*, .wmn*, .wmx*)
• See the list of notable changes below and verify any that you have the time/energy/enthusiasm for 🙂

Notable changes

• All .ws* and .hs* values are updated to the new sizes
• Split width-height.html into width.html and height.html
  • I felt the single page was too difficult to traverse and too noisy.

Tests

• Added Less snapshot tests for flex, height, positioning, sizing, and width
• Updated Less snapshot tests for "spacing" (aka margin and padding)

Spacing class generation mixins

• Renamed .generate-spacing mixin to .generate-sizing
  • Moved .generate-sizing to packages/stacks-classic/lib/exports/mixins.less
  • Deleted packages/stacks-classic/lib/exports/spacing-mixins.less
• Created .generate-su-sizing mixin for generating classes based on sizing units.
• Replaced any references to --s-full and --s-step with their sizing unit counterparts (and retained them for legacy compatibility)
  • For example, calc(var(--s-step) * 10) becomes --su1024

Negative sizing unit custom properties

• Added negative sizing unit custom properties --sun*
• Replaced property calcs of negative values with --sun* custom properties
  • For example, calc(var(--su1) * -1)) becomes var(--sun1)
  • These changes represent the majority or .less files changed

Under the hood

• Consolidated two #build-classes Less functions into a single one
• Moved all sizing custom properties from lib/exports/constants-helpers.less and lib/atomic/spacing.less to lib/atomic/sizing.less
• Moved positioning class generation from lib/atomic/spacing.less to lib/atomic/positioning.less
• Split width-height.less into width.less and height.less

Other changes only indirectly related to sizing

• font-size: var(--fs-body1); is now only present on body and not html. This will allow the client's preferred font size to scale the UI.

[changeset-bot]

🦋 Changeset detected

Latest commit: 344be1f

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	344be1f
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69680c929a4ad300086404e0
😎 Deploy Preview	https://deploy-preview-2122--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	344be1f
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/69680c92fc0e530008c6cf9a
😎 Deploy Preview	https://deploy-preview-2122--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CGuindon]

WOAH! So nice! The docs are looking good with the new split.

(I didn't want to make it a blocker for this PR but since you mentioned looking at ai-* pages I noticed we have a custom orange badging all over the flex pages for marking something as default. Can we swap that custom code to use .s-badge__info (the blue informational badge component)?

[ttaylor-stack]

Thank you for doing these changes. height and width pages look good, unchanged values look the same and the new values look correct. Approved

[giamir]

Fantastic work @dancormier. I loved how you took the time to test out the resulting output of the less mixins. It made the review so much easier and honestly the snapshots act as great documentation for whoever will have to touch these utilities going forward. ❤️

[dancormier]

I'm getting a weird issue where a single visual regression test image is failing in Github but not locally. I'm going to merge to get this in asap and will investigate the failing image issue.