fix(tokens): color classes generation from tokens (#30725)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This pull request makes a minor update to the
`generateColorUtilityClasses` function to improve how CSS custom
property values are interpolated in the generated class definitions.

* In `core/scripts/tokens/utils.mjs`, the function now wraps the SCSS
variable reference for the custom property value in `#{...}` to ensure
proper interpolation when generating the CSS class.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: BenOsodrac

core/scripts/tokens/utils.mjs

@@ -151,7 +151,7 @@ export function generateColorUtilityClasses(prop, className) {
   const isBg = className.includes('bg');
   const cssProp = isBg ? 'background-color' : 'color';
   return `.${classAndScssPrefix}-${className} {
-  --${cssProp}: $${classAndScssPrefix}-${prop.name};
+  --${cssProp}: #{$${classAndScssPrefix}-${prop.name}};
   ${cssProp}: $${classAndScssPrefix}-${prop.name};
 }`;
 }
@@ -275,7 +275,7 @@ export function generateSpaceUtilityClasses(prop, className) {
 // Generates a valid box-shadow value from a shadow Design Token structure
 export function generateRadiusUtilityClasses(propName) {
   return `.${classAndScssPrefix}-${propName} {
-  --border-radius: $${classAndScssPrefix}-${propName};
+  --border-radius: #{$${classAndScssPrefix}-${propName}};
   border-radius: $${classAndScssPrefix}-${propName};
 }`;
 }
@@ -296,7 +296,7 @@ export function generateBorderUtilityClasses(prop, propName) {
       attribute = 'border-color';
   }
   return `.${classAndScssPrefix}-${propName} {
-  --${attribute}: $${classAndScssPrefix}-${propName};
+  --${attribute}: #{$${classAndScssPrefix}-${propName}};
   ${attribute}: $${classAndScssPrefix}-${propName};
 }`;
 }
@@ -309,7 +309,7 @@ export function generateFontUtilityClasses(prop, propName) {
 // Generates a valid box-shadow value from a shadow Design Token structure
 export function generateShadowUtilityClasses(propName) {
   return `.${classAndScssPrefix}-${propName} {
-  --box-shadow: $${classAndScssPrefix}-${propName};
+  --box-shadow: #{$${classAndScssPrefix}-${propName}};
   box-shadow: $${classAndScssPrefix}-${propName};
 }`;
 }