Merge branch 'next' into ionic-colors-support

core/scripts/tokens/utilities.js

@@ -122,8 +122,8 @@ function generateTypographyUtilityClass(prop, dictionary) {
 
 // Generates a color based css utility-class from a color Design Token structure
 function generateColorUtilityClasses(prop, className) {
-  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
-  .${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+  return `.${variablesPrefix}-${className} {\n  --color: $ionic-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  --background: $ionic-${prop.name};\n}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure

core/src/utils/theme.ts

@@ -6,15 +6,20 @@ export const hostContext = (selector: string, el: HTMLElement): boolean => {
 };
 
 /**
- * Create the mode and color classes for the component based on the classes passed in
+ * Create the mode and color classes for the component based on the classes passed in and the theme being used
  */
 export const createColorClasses = (color: Color | undefined | null, cssClassMap: CssClassMap): CssClassMap => {
   return typeof color === 'string' && color.length > 0
-    ? {
-        'ion-color': true,
-        [`ion-color-${color}`]: true,
-        ...cssClassMap,
-      }
+    ? cssClassMap.ionic === true
+      ? {
+          [`ionic-background-color-${color}`]: true,
+          ...cssClassMap,
+        }
+      : {
+          'ion-color': true,
+          [`ion-color-${color}`]: true,
+          ...cssClassMap,
+        }
     : cssClassMap;
 };