fix(gap): target axis gap properties

[dancormier]

Summary

What this PR does

1. Adds the !important declaration to all gap property atomic classes
   We expect all of our atomic classes to include !important so they override the given style of a component in all cases.
2. Updates the .gx* and .gy* atomic classes so they only impact the the CSS property for a single axis, as intended.
   Prior to this PR, those properties set a gap property which included some value for both axes. This would result in the property potentially overwriting an existing gap value for the axis not intended to be set by the atomic class applied.
3. Updates the gap docs and Less snapshot to reflect these changes

Related Issue

STACKS-908

Changes

• Updates .g* classes to emit gap: var(--_gap-y, 0) var(--_gap-x, 0) !important.
• Updates .gx* classes to emit row-gap: var(--_gap-x) !important.
• Updates .gy* classes to emit column-gap: var(--_gap-y, 0) !important.
• Keeps the explicit selector lists in gap.less.
• Updates the gap docs tables to reflect the new emitted properties.

Testing

• npm run lint:css -w packages/stacks-classic
• npx vitest run lib/atomic/gap.less.test.ts -u
• npm run test:less -w packages/stacks-classic

[changeset-bot]

🦋 Changeset detected

Latest commit: 13a85f3

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

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks	Patch

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 ready!

Name	Link
🔨 Latest commit	13a85f3
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6a4bb3ba587f270008b90fe7
😎 Deploy Preview	https://deploy-preview-2315--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.

[asblanco]

I believe we have inverted the x/y axes. We had gap: <row-gap | gap-y> <column-gap | gap-x> and now we're setting row-gap to gx and column-gap to gy 👀

[dancormier]

I believe we have inverted the x/y axes. We had gap: <row-gap | gap-y> <column-gap | gap-x> and now we're setting row-gap to gx and column-gap to gy 👀

Oh wow, I can't believe I did that 🤦 Thank you for catching this! I've accepted your changes and have updated the Less snapshots so this should be ready for another review