chore(pds-box): replace deprecated Sass if() with @if directive

[pixelflips]

Description

Replace deprecated Sass if() function with @if/@else directives to resolve deprecation warnings when running Storybook.

Solution

The Sass if() function is deprecated in favor of the native CSS if() function. To resolve this, the conditional class name assignment was refactored to use @if/@else directives instead.

The pattern declares a variable with a default value first, then uses @if to conditionally reassign it when a prefix/direction is provided. This produces identical CSS output while avoiding the deprecation warning.

Three mixins were updated in pds-box.mixins.scss:

• generate-spacing-classes - generates pds-spacing-* utility classes
• generate-columns - generates pds-box-* column width classes
• generate-column-offsets - generates pds-box-offset-* classes

Fixes DSS-90

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• tested manually
• Verified build passes
• Verified all CSS classes are generated correctly (pds-box-, pds-box-offset-, pds-spacing-*)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings
• New and existing tests pass locally with my changes

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	478fe87
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6973d7ee2cba170008a75861
😎 Deploy Preview	https://deploy-preview-644--pine-design-system.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.

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pds-box.mixins.scss file was refactored to change how three SCSS mixins (generate-spacing-classes, generate-columns, generate-column-offsets) construct class names. The implementation was updated from using inline conditional operators to a two-step approach: first setting the non-directional class name, then conditionally overriding it with the directional variant when applicable. This modification preserves the original output mappings and behavior while removing stylelint disable comments and simplifying the internal logic. No changes were made to the public API or signatures.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: replacing deprecated Sass if() function with @if directive in the pds-box component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description includes all required sections: summary of changes, issue reference (DSS-90), type of change (bug fix), testing approach (manual testing with verification), and completed checklist items.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}