fix(tokens): review the generation of utility-classes (#30498)

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently some utility-classes are not as effective as they could be,
because they don't affect, for example, the --background or --color css
API's.

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

- Changed the way the classes are generated, so that it affects the css
custom properties as well.
- Make the background classes to only be generated for the tokens that
contain 'bg'.
- Update the style for the body background on the ionic theme (this
triggered some snapshots differences).

## 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.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/scripts/tokens/utils.js

@@ -142,8 +142,12 @@ function generateTypographyOutput(prop, propName, isVariable) {
 
 // Generates a color based css utility-class from a color Design Token structure
 function generateColorUtilityClasses(prop, className) {
-  return `.${variablesPrefix}-${className} {\n  color: $${variablesPrefix}-${prop.name};\n}
+  const isBg = className.includes('bg');
-  .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
+  const cssProp = isBg ? 'background-color' : 'color';
+  return `.${variablesPrefix}-${className} {
+  --${cssProp}: $${variablesPrefix}-${prop.name};
+  ${cssProp}: $${variablesPrefix}-${prop.name};
+}`;
 }
 
 // Generates margin and padding utility classes to match the token-agnostic
@@ -264,7 +268,10 @@ function generateSpaceUtilityClasses(prop, className) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateRadiusUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --border-radius: $${variablesPrefix}-${propName};
+  border-radius: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a border based css utility-class from a font Design Token structure
@@ -282,7 +289,10 @@ function generateBorderUtilityClasses(prop, propName) {
     default:
       attribute = 'border-color';
   }
-  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --${attribute}: $${variablesPrefix}-${propName};
+  ${attribute}: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure
@@ -292,7 +302,10 @@ function generateFontUtilityClasses(prop, propName) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateShadowUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  box-shadow: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --box-shadow: $${variablesPrefix}-${propName};
+  box-shadow: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a utility class for a given token category and name

core/src/components/accordion-group/test/expand/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -88,7 +88,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">

core/src/components/accordion-group/test/shape/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #222;
+              --background: #222;
             }
           </style>
 

core/src/components/accordion/test/shape/accordion.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #222;
+              --background: #222;
             }
           </style>
 

core/src/components/progress-bar/test/shape/progress-bar.e2e.ts

@@ -8,7 +8,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         `
           <style>
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
 
             .container {
@@ -33,7 +33,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
         `
           <style>
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
 
             .container {

core/src/components/searchbar/test/shape/searchbar.e2e.ts

@@ -14,7 +14,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #000;
+              --background: #000;
             }
           </style>
 

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts

@@ -11,7 +11,7 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf
         `
         <style>
           :root {
-            background: #ccc7c7;
+            --background: #ccc7c7;
           }
         </style>
 

core/src/components/tab-bar/test/shape/tab-bar.e2e.ts

@@ -13,7 +13,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
 
@@ -49,7 +49,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
 
@@ -85,7 +85,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
           `
           <style>
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
 

core/src/css/ionic/core.ionic.scss

@@ -23,7 +23,7 @@ html {
 }
 
 body {
-  background: var(--ion-background-color);
+  background: var(--ion-background-color, #{globals.$ion-bg-body});
   color: var(--ion-text-color);
 }