fix(themes): do not fallback to base color for foreground

Author: brandyscarney

core/src/utils/test/theme.spec.ts

@@ -385,7 +385,7 @@ describe('generateGlobalThemeCSS', () => {
         --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb)) !important;
         --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade)) !important;
         --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint)) !important;
-        --ion-color-foreground: var(--ion-color-primary, var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground))) !important;
+        --ion-color-foreground: var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground))  !important;
 
         --ion-color-subtle-base: var(--ion-color-primary-subtle) !important;
         --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb) !important;

core/src/utils/theme.ts

@@ -187,8 +187,7 @@ export const generateColorClasses = (theme: any): string => {
 
     // Generate CSS variables for bold variant
     // Includes base color variables without the bold modifier for
-    // backwards compatibility. The foreground variables falls back to the
-    // base color because it is new.
+    // backwards compatibility.
     // TODO: Remove the fallbacks once the bold variables are the default
     if (colorVariants.bold) {
       cssVariableRules.push(
@@ -198,7 +197,7 @@ export const generateColorClasses = (theme: any): string => {
         `--ion-color-contrast-rgb: var(--ion-color-${colorName}-contrast-rgb, var(--ion-color-${colorName}-bold-contrast-rgb)) !important;`,
         `--ion-color-shade: var(--ion-color-${colorName}-shade, var(--ion-color-${colorName}-bold-shade)) !important;`,
         `--ion-color-tint: var(--ion-color-${colorName}-tint, var(--ion-color-${colorName}-bold-tint)) !important;`,
-        `--ion-color-foreground: var(--ion-color-${colorName}, var(--ion-color-${colorName}-foreground, var(--ion-color-${colorName}-bold-foreground))) !important;`
+        `--ion-color-foreground: var(--ion-color-${colorName}-foreground, var(--ion-color-${colorName}-bold-foreground)) !important;`
       );
     }