javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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. -->
This commit is contained in:
Bernardo Cardoso
2025-10-13 15:14:50 +01:00
committed by GitHub
parent 9a1d3ca8d7
commit 635edaf733
2 changed files with 450 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/scripts/tokens/utils.mjs
View File

@ -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};
}`;
}