Merge branch 'FW-6252' into FW-6252-chip

Author: brandyscarney

core/src/css/palettes/dark.scss

@@ -17,63 +17,54 @@ $colors: (
     contrast: #000,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
-    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #000,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
-    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #000,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
-    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #000,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
-    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #000,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
-    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #000,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
-    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #fff,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
-    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #000,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
-    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #000,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
-    foreground: $dark,
   ),
 );
 

core/src/css/palettes/high-contrast-dark.scss

@@ -17,63 +17,54 @@ $colors: (
     contrast: #000,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
-    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #000,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
-    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #000,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
-    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #000,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
-    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #000,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
-    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #000,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
-    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #fff,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
-    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #000,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
-    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #000,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
-    foreground: $dark,
   ),
 );
 

core/src/css/palettes/high-contrast.scss

@@ -17,63 +17,54 @@ $colors: (
     contrast: #fff,
     shade: get-color-shade($primary),
     tint: get-color-tint($primary),
-    foreground: $primary,
   ),
   secondary: (
     base: $secondary,
     contrast: #fff,
     shade: get-color-shade($secondary),
     tint: get-color-tint($secondary),
-    foreground: $secondary,
   ),
   tertiary: (
     base: $tertiary,
     contrast: #fff,
     shade: get-color-shade($tertiary),
     tint: get-color-tint($tertiary),
-    foreground: $tertiary,
   ),
   success: (
     base: $success,
     contrast: #fff,
     shade: get-color-shade($success),
     tint: get-color-tint($success),
-    foreground: $success,
   ),
   warning: (
     base: $warning,
     contrast: #fff,
     shade: get-color-shade($warning),
     tint: get-color-tint($warning),
-    foreground: $warning,
   ),
   danger: (
     base: $danger,
     contrast: #fff,
     shade: get-color-shade($danger),
     tint: get-color-tint($danger),
-    foreground: $danger,
   ),
   light: (
     base: $light,
     contrast: #000,
     shade: get-color-shade($light),
     tint: get-color-tint($light),
-    foreground: $light,
   ),
   medium: (
     base: $medium,
     contrast: #fff,
     shade: get-color-shade($medium),
     tint: get-color-tint($medium),
-    foreground: $medium,
   ),
   dark: (
     base: $dark,
     contrast: #fff,
     shade: get-color-shade($dark),
     tint: get-color-tint($dark),
-    foreground: $dark,
   ),
 );
 

core/src/themes/functions.color.scss

@@ -39,13 +39,20 @@
 
   $value: map.get($values, $variation);
 
-  // If the color requested is subtle we return `--ion-color-primary-subtle-contrast`
-  // Otherwise we return `--ion-color-primary-contrast`
+  // TODO(): this can be removed when foreground is required
+  // Fallback to "base" variant when "foreground" variant is undefined
+  @if ($variation == foreground and $value == null) {
+    $variation: base;
+    $value: map.get($values, $variation);
+  }
+
+  // If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,
+  // otherwise we return `--ion-color-{color}-contrast`.
   $variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
 
-  // If the variation being used is base, we do not include the variant so
-  // If the color requested is subtle we return `--ion-color-primary-subtle`
-  // Otherwise we return `--ion-color-primary`
+  // If the variation being used is "base", we do not include the variant.
+  // If the color requested is subtle we return `--ion-color-{color}-subtle`,
+  // otherwise we return `--ion-color-{color}`.
   @if ($variation == base) {
     $variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
   }
@@ -134,7 +141,6 @@
   $hue-colors: map.get($theme-colors, $color-name);
   $color-variants: map.get($hue-colors, $hue);
 
-  // Determine prefix based on hue value
   $prefix: if($hue == "subtle", "-subtle", "");
 
   // TODO this @if can be removed if we add subtle colors for ios and md