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

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}
-  .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
+  const isBg = className.includes('bg');
+  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/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);
 }