feat(newspack-ui): add stack layout and color utility classes

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds reusable utility systems to newspack-ui and normalises the spacing token/class conventions:

• Stack layout primitive (newspack-ui__stack): flexbox-based layout component with modifier classes for direction (--vertical, --horizontal), alignment (--align-*), justification (--justify-*), wrapping, and gap (--gap-1 through --gap-12).
• Color utility classes (newspack-ui__color--{scale}-{step}): token-driven text color helpers for all defined color scales (neutral, primary, success, error, warning).
• --newspack-ui-spacer-1 token added (8px) to complete the spacing scale; all consumer styles updated from --newspack-ui-spacer-base to --newspack-ui-spacer-1.
• Spacing utility classes (newspack-ui__spacing-{side}--{n}) refactored to use a SCSS map loop and switched to index-based suffixes (--1 through --12) consistent with the stack and spacer token naming.

These utilities are used to clean up the IP access verification page: layout and color are now expressed via composable utility classes instead of one-off inline styles and bespoke class names. The spinner gap and bold-text selector are also refined.

Several of these improvements were highlighted during the review of #4593.

How to test the changes in this Pull Request:

1. Enable a content gate with IP-based institutional access rules on a test post.
2. Visit the IP verification page (/newspack-access-check) in a browser.
3. Confirm the loading state shows the spinner, institution image (if set), the "Verifying your access…" message in medium weight, and a lighter "You'll be redirected in a few seconds." subtitle below it.
4. Simulate a timeout or network error (e.g., block the REST API request with DevTools) and confirm the error state shows the "Try again" and "Continue to site" buttons centered horizontally.
5. Confirm the institution image is constrained to 256×192px (previously 400×200px).
6. Test without an institution ID to confirm the generic "Verifying your access…" copy still appears.
7. Build the SCSS (n build newspack-plugin) and confirm no compilation errors.
8. Spot-check that existing spacing utility classes (e.g. on the My Account templates and the newspack-ui demo page) still apply the correct margins — note the class suffixes changed from pixel values to indices (e.g. --spacing-top--16 → --spacing-top--3).

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

Adds reusable layout/color utility systems to newspack-ui and applies them to the IP access verification loading page to reduce one-off styling.

Changes:

• Add newspack-ui__stack flexbox “stack” utility with alignment/justification/wrap/gap modifiers.
• Add token-driven text color utilities (newspack-ui__color--{scale}-{step}) and the missing --newspack-ui-spacer-1 token.
• Refactor the IP access verification page markup/styles to use the new utilities and adjust spinner spacing + image sizing.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/newspack-ui/scss/variables/_spacing.scss	Adds missing --newspack-ui-spacer-1 spacing token.
src/newspack-ui/scss/elements/forms/_spinner.scss	Updates spinner gap and refines which <p> gets bold weight.
src/newspack-ui/scss/elements/_stack.scss	Introduces stack layout utility classes and child margin suppression rules.
src/newspack-ui/scss/elements/_index.scss	Registers new stack and colors element modules.
src/newspack-ui/scss/elements/_colors.scss	Introduces token-based text color utility classes.
includes/content-gate/class-ip-access-rule.php	Refactors IP check loading page to use stack + color utilities and updates image constraints.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.