fix: return typed values from scss functions instead of strings

[Copilot]

Proposed changes

The px-to-rem() and px-to-em() functions returned strings via interpolation (#{...}rem), preventing calculations with their output. Changed to return properly typed values by multiplying the numeric result by 1rem/1em.

Before:

@function px-to-rem($pxValue) {
  @return #{$pxValue * 0.0625}rem;  // Returns string "1rem"
}

$spacing: px-to-rem(16) * 2;  // ❌ Error: Undefined operation "1rem * 2"

After:

@function px-to-rem($pxValue) {
  @return ($pxValue * 0.0625) * 1rem;  // Returns typed rem value
}

$spacing: px-to-rem(16) * 2;  // ✅ Returns 2rem

String interpolation (#{px-to-rem(24)}) continues to work unchanged.

Types of changes

• Bugfix (non-breaking change that fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (improvements to existing components or architectural decisions)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Further comments

Both functions now return SASS typed values compatible with arithmetic operations while maintaining backward compatibility with existing string interpolation usage throughout the codebase.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>px-to-rem() returns a string instead of a rem value</issue_title>
<issue_description>### Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

The current implementation of px-to-rem() does not return a value but a string. I stumbled upon this issue while creating a very similar function in our code. The way it is currently implemented does not allow calculations with the value:

core-web/packages/foundations/scss/helpers/_functions.scss

Lines 5 to 7 in 8f07e55

	@function px-to-rem($pxValue) {
	@return #{$pxValue * 0.0625}rem;
	}

Expected Behaviour

The return value should be a rem value, therefore the function neede to be adjusted in this way:

instead of: @return #{$pxValue * 0.0625}rem;
use this: @return ($pxValue * 0.0625) * 1rem;

For completeness, I also found it here: sass/sass#2356 (comment)

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

Which DB business unit do you work for?

Delivery-Team Web Development 1 (TO.IP D-T-037)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

No response

What project are you working on?

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes px-to-rem() returns a string instead of a rem value #5533

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/copilot/fix-px-to-rem-function

[changeset-bot]

🦋 Changeset detected

Latest commit: 46027e9

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

This PR includes changesets to release 9 packages

Name	Type
@db-ux/core-foundations	Patch
@db-ux/core-components	Patch
@db-ux/ngx-core-components	Patch
@db-ux/react-core-components	Patch
@db-ux/wc-core-components	Patch
@db-ux/v-core-components	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	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

[Copilot]

Pull request overview

This PR fixes a bug in the px-to-rem() and px-to-em() SCSS helper functions that returned string values instead of properly typed Sass values, preventing arithmetic operations on their output. The fix changes from string interpolation (#{...}rem) to proper type multiplication (* 1rem), enabling calculations while maintaining backward compatibility.

Key changes:

• Modified px-to-rem() to return typed rem values by multiplying the result by 1rem
• Modified px-to-em() to return typed em values by multiplying the result by 1em
• Added changeset documenting the bug fix

Reviewed changes

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

File	Description
packages/foundations/scss/helpers/_functions.scss	Fixed px-to-rem() and px-to-em() functions to return typed values instead of strings by replacing string interpolation with proper multiplication
.changeset/heavy-spiders-check.md	Added changeset file to document the bug fix for the affected packages