From 960c3b62ae310178f1c8fe092578ba5f836765bc Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 19 Nov 2024 17:46:19 -0500
Subject: [PATCH] feat(theming): add support for bold and subtle as maps

---
 core/src/components/button/button.ionic.scss  |  17 +-
 .../components/button/test/basic/index.html   | 215 +++++++++---------
 core/src/themes/functions.color.scss          |  81 +++++--
 .../src/themes/ionic/ionic.theme.default.scss | 153 +++++++++----
 .../themes/native/native.theme.default.scss   |  90 +++++---
 5 files changed, 349 insertions(+), 207 deletions(-)

diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 2650cabdf4..e790d1a34b 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -53,8 +53,9 @@
 }
 
 :host(.button-solid.button-subtle) {
-  --background: #{globals.ion-color(primary, subtle)};
-  --color: #{globals.ion-color(primary, base)};
+  --background: #{globals.ion-color(primary, base, $subtle: true)};
+  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
+  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
 }
 
 // Outline Button
@@ -87,8 +88,16 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-solid.button-subtle.ion-color) .button-native {
-  background: globals.current-color(subtle);
-  color: globals.current-color(base);
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
+:host(.button-solid.button-subtle.ion-color.ion-activated) .button-native::after {
+  background: globals.current-color(shade, $subtle: true);
+}
+
+:host(.button-solid.button-subtle.ion-color.ion-focused) .button-native::after {
+  background: globals.current-color(tint, $subtle: true);
 }
 
 :host(.button-solid.ion-color) ion-ripple-effect {
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index 3976c6abf1..4f1283d5f8 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -14,6 +14,11 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+      }
+
       ion-button {
         margin: 8px 4px;
       }
@@ -29,129 +34,135 @@
       </ion-header>
 
       <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
-        <h2>Bold (default) Buttons</h2>
+        <div class="container">
+          <div class="item">
+            <h2>Bold (default) Buttons</h2>
 
-        <p>
-          <ion-button id="default">Default</ion-button>
-          <ion-button class="ion-focused">Default.focused</ion-button>
-          <ion-button class="ion-activated">Default.activated</ion-button>
-        </p>
+            <p>
+              <ion-button id="default">Default</ion-button>
+              <ion-button class="ion-focused">Default.focused</ion-button>
+              <ion-button class="ion-activated">Default.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="primary">Primary</ion-button>
-          <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
-          <ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="primary">Primary</ion-button>
+              <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
+              <ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="secondary">Secondary</ion-button>
-          <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
-          <ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="secondary">Secondary</ion-button>
+              <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
+              <ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="tertiary">Tertiary</ion-button>
-          <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-          <ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="tertiary">Tertiary</ion-button>
+              <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
+              <ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="success">Success</ion-button>
-          <ion-button class="ion-focused" color="success">Success.focused</ion-button>
-          <ion-button class="ion-activated" color="success">Success.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="success">Success</ion-button>
+              <ion-button class="ion-focused" color="success">Success.focused</ion-button>
+              <ion-button class="ion-activated" color="success">Success.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="warning">Warning</ion-button>
-          <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
-          <ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="warning">Warning</ion-button>
+              <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
+              <ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="danger">Danger</ion-button>
-          <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
-          <ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="danger">Danger</ion-button>
+              <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
+              <ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="light">Light</ion-button>
-          <ion-button class="ion-focused" color="light">Light.focused</ion-button>
-          <ion-button class="ion-activated" color="light">Light.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="light">Light</ion-button>
+              <ion-button class="ion-focused" color="light">Light.focused</ion-button>
+              <ion-button class="ion-activated" color="light">Light.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="medium">Medium</ion-button>
-          <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
-          <ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="medium">Medium</ion-button>
+              <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
+              <ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button color="dark">Dark</ion-button>
-          <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
-          <ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
-        </p>
+            <p>
+              <ion-button color="dark">Dark</ion-button>
+              <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
+              <ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
+            </p>
+          </div>
 
-        <h2>Subtle Buttons</h2>
+          <div class="item">
+            <h2>Subtle Buttons</h2>
 
-        <p>
-          <ion-button hue="subtle" id="default">Default</ion-button>
-          <ion-button hue="subtle" class="ion-focused">Default.focused</ion-button>
-          <ion-button hue="subtle" class="ion-activated">Default.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" id="default">Default</ion-button>
+              <ion-button hue="subtle" class="ion-focused">Default.focused</ion-button>
+              <ion-button hue="subtle" class="ion-activated">Default.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="primary">Primary</ion-button>
-          <ion-button hue="subtle" color="primary" class="ion-focused">Primary.focused</ion-button>
-          <ion-button hue="subtle" color="primary" class="ion-activated">Primary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="primary">Primary</ion-button>
+              <ion-button hue="subtle" color="primary" class="ion-focused">Primary.focused</ion-button>
+              <ion-button hue="subtle" color="primary" class="ion-activated">Primary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="secondary">Secondary</ion-button>
-          <ion-button hue="subtle" class="ion-focused" color="secondary">Secondary.focused</ion-button>
-          <ion-button hue="subtle" class="ion-activated" color="secondary">Secondary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="secondary">Secondary</ion-button>
+              <ion-button hue="subtle" class="ion-focused" color="secondary">Secondary.focused</ion-button>
+              <ion-button hue="subtle" class="ion-activated" color="secondary">Secondary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="tertiary">Tertiary</ion-button>
-          <ion-button hue="subtle" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-          <ion-button hue="subtle" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="tertiary">Tertiary</ion-button>
+              <ion-button hue="subtle" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
+              <ion-button hue="subtle" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="success">Success</ion-button>
-          <ion-button hue="subtle" color="success" class="ion-focused">Success.focused</ion-button>
-          <ion-button hue="subtle" color="success" class="ion-activated">Success.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="success">Success</ion-button>
+              <ion-button hue="subtle" color="success" class="ion-focused">Success.focused</ion-button>
+              <ion-button hue="subtle" color="success" class="ion-activated">Success.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="warning">Warning</ion-button>
-          <ion-button hue="subtle" color="warning" class="ion-focused">Warning.focused</ion-button>
-          <ion-button hue="subtle" color="warning" class="ion-activated">Warning.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="warning">Warning</ion-button>
+              <ion-button hue="subtle" color="warning" class="ion-focused">Warning.focused</ion-button>
+              <ion-button hue="subtle" color="warning" class="ion-activated">Warning.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="danger">Danger</ion-button>
-          <ion-button hue="subtle" color="danger" class="ion-focused">Danger.focused</ion-button>
-          <ion-button hue="subtle" color="danger" class="ion-activated">Danger.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="danger">Danger</ion-button>
+              <ion-button hue="subtle" color="danger" class="ion-focused">Danger.focused</ion-button>
+              <ion-button hue="subtle" color="danger" class="ion-activated">Danger.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="light">Light</ion-button>
-          <ion-button hue="subtle" color="light" class="ion-focused">Light.focused</ion-button>
-          <ion-button hue="subtle" color="light" class="ion-activated">Light.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="light">Light</ion-button>
+              <ion-button hue="subtle" color="light" class="ion-focused">Light.focused</ion-button>
+              <ion-button hue="subtle" color="light" class="ion-activated">Light.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="medium">Medium</ion-button>
-          <ion-button hue="subtle" color="medium" class="ion-focused">Medium.focused</ion-button>
-          <ion-button hue="subtle" color="medium" class="ion-activated">Medium.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="medium">Medium</ion-button>
+              <ion-button hue="subtle" color="medium" class="ion-focused">Medium.focused</ion-button>
+              <ion-button hue="subtle" color="medium" class="ion-activated">Medium.activated</ion-button>
+            </p>
 
-        <p>
-          <ion-button hue="subtle" color="dark">Dark</ion-button>
-          <ion-button hue="subtle" color="dark" class="ion-focused">Dark.focused</ion-button>
-          <ion-button hue="subtle" color="dark" class="ion-activated">Dark.activated</ion-button>
-        </p>
+            <p>
+              <ion-button hue="subtle" color="dark">Dark</ion-button>
+              <ion-button hue="subtle" color="dark" class="ion-focused">Dark.focused</ion-button>
+              <ion-button hue="subtle" color="dark" class="ion-activated">Dark.activated</ion-button>
+            </p>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/themes/functions.color.scss b/core/src/themes/functions.color.scss
index f3989ff763..f71f9f09fe 100644
--- a/core/src/themes/functions.color.scss
+++ b/core/src/themes/functions.color.scss
@@ -10,11 +10,13 @@
 // current-color(base) => var(--ion-color-base)
 // current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
 // --------------------------------------------------------------------------------------------
-@function current-color($variation, $alpha: null) {
+@function current-color($variation, $alpha: null, $subtle: false) {
+  $variable: if($subtle, "--ion-color-subtle-#{$variation}", "--ion-color-#{$variation}");
+
   @if $alpha == null {
-    @return var(--ion-color-#{$variation});
+    @return var(#{$variable});
   } @else {
-    @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+    @return rgba(var(#{$variable}-rgb), $alpha);
   }
 }
 
@@ -25,17 +27,25 @@
 // ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
 // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
 // --------------------------------------------------------------------------------------------
-@function ion-color($name, $variation, $alpha: null, $rgb: null) {
+@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
   @if not($theme-colors) {
     @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
   }
 
   $values: map-get($theme-colors, $name);
-  $value: map-get($values, $variation);
-  $variable: --ion-color-#{$name}-#{$variation};
+  $values: map-get($values, if($subtle, subtle, bold));
 
+  $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`
+  $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 ($variation == base) {
-    $variable: --ion-color-#{$name};
+    $variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
   }
 
   @if ($alpha) {
@@ -87,21 +97,41 @@
     @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
   }
 
-  $value: map-get($theme-colors, $color-name);
+  $colors: map-get($theme-colors, $color-name);
+  $bold-colors: map-get($colors, bold);
 
-  $base: map-get($value, base);
-  $contrast: map-get($value, contrast);
-  $shade: map-get($value, shade);
-  $tint: map-get($value, tint);
-  $subtle: map-get($value, subtle);
+  // Grab the bold color variants
+  $base: map-get($bold-colors, base);
+  $contrast: map-get($bold-colors, contrast);
+  $shade: map-get($bold-colors, shade);
+  $tint: map-get($bold-colors, tint);
 
+  // Generate default (bold) color variables
   --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
   --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
   --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
   --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
   --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
   --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
-  --ion-color-subtle: var(--ion-color-#{$color-name}-subtle, #{$subtle}) !important;
+
+  // Grab the subtle colors map if it exists
+  $subtle-colors: map-get($colors, subtle);
+
+  // Grab the subtle color variants
+  @if $subtle-colors != null {
+    $base: map-get($subtle-colors, base);
+    $contrast: map-get($subtle-colors, contrast);
+    $shade: map-get($subtle-colors, shade);
+    $tint: map-get($subtle-colors, tint);
+  }
+
+  // Generate subtle color variables
+  @if $subtle-colors != null {
+    --ion-color-subtle-base: var(--ion-color-#{$color-name}-subtle, #{$base}) !important;
+    --ion-color-subtle-contrast: var(--ion-color-#{$color-name}-subtle-contrast, #{$contrast}) !important;
+    --ion-color-subtle-shade: var(--ion-color-#{$color-name}-subtle-shade, #{$shade}) !important;
+    --ion-color-subtle-tint: var(--ion-color-#{$color-name}-subtle-tint, #{$tint}) !important;
+  }
 }
 
 // Generates the CSS variables for each color
@@ -113,11 +143,22 @@
   }
 
   @each $color-name, $value in $theme-colors {
-    --ion-color-#{$color-name}: #{map-get($value, base)};
-    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($value, base))};
-    --ion-color-#{$color-name}-contrast: #{map-get($value, contrast)};
-    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($value, contrast))};
-    --ion-color-#{$color-name}-shade: #{map-get($value, shade)};
-    --ion-color-#{$color-name}-tint: #{map-get($value, tint)};
+    $bold-colors: map-get($value, bold);
+    @if $bold-colors != null {
+      --ion-color-#{$color-name}: #{map-get($bold-colors, base)};
+      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($bold-colors, base))};
+      --ion-color-#{$color-name}-contrast: #{map-get($bold-colors, contrast)};
+      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($bold-colors, contrast))};
+      --ion-color-#{$color-name}-shade: #{map-get($bold-colors, shade)};
+      --ion-color-#{$color-name}-tint: #{map-get($bold-colors, tint)};
+    }
+
+    $subtle-colors: map-get($value, subtle);
+    @if $subtle-colors != null {
+      --ion-color-#{$color-name}-subtle: #{map-get($subtle-colors, base)};
+      --ion-color-#{$color-name}-subtle-contrast: #{map-get($subtle-colors, contrast)};
+      --ion-color-#{$color-name}-subtle-shade: #{map-get($subtle-colors, shade)};
+      --ion-color-#{$color-name}-subtle-tint: #{map-get($subtle-colors, tint)};
+    }
   }
 }
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
index b13e52aeb4..14934c002a 100644
--- a/core/src/themes/ionic/ionic.theme.default.scss
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -19,67 +19,130 @@
 // ios and md. This will allow us to have a single color map.
 $ionic-colors: (
   primary: (
-    base: globals.$ion-semantics-primary-base,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-semantics-primary-800,
-    tint: globals.$ion-semantics-primary-500,
-    subtle: globals.$ion-semantics-primary-100,
+    bold: (
+      base: globals.$ion-semantics-primary-base,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-semantics-primary-800,
+      tint: globals.$ion-semantics-primary-500,
+    ),
+    subtle: (
+      base: globals.$ion-semantics-primary-100,
+      contrast: globals.$ion-semantics-primary-base,
+      shade: globals.$ion-semantics-primary-300,
+      tint: globals.$ion-semantics-primary-200,
+    ),
   ),
   secondary: (
-    base: globals.$ion-semantics-info-base,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-semantics-info-800,
-    tint: globals.$ion-semantics-info-500,
-    subtle: globals.$ion-semantics-info-100,
+    bold: (
+      base: globals.$ion-semantics-info-base,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-semantics-info-800,
+      tint: globals.$ion-semantics-info-500,
+    ),
+    subtle: (
+      base: globals.$ion-semantics-info-100,
+      contrast: globals.$ion-semantics-info-base,
+      shade: globals.$ion-semantics-info-300,
+      tint: globals.$ion-semantics-info-200,
+    ),
   ),
   tertiary: (
-    base: globals.$ion-primitives-violet-700,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-primitives-violet-800,
-    tint: globals.$ion-primitives-violet-500,
-    subtle: globals.$ion-primitives-violet-100,
+    bold: (
+      base: globals.$ion-primitives-violet-700,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-primitives-violet-800,
+      tint: globals.$ion-primitives-violet-500,
+    ),
+    subtle: (
+      base: globals.$ion-primitives-violet-100,
+      contrast: globals.$ion-primitives-violet-700,
+      shade: globals.$ion-primitives-violet-300,
+      tint: globals.$ion-primitives-violet-200,
+    ),
   ),
   success: (
-    base: globals.$ion-semantics-success-base,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-semantics-success-800,
-    tint: globals.$ion-semantics-success-500,
-    subtle: globals.$ion-semantics-success-100,
+    bold: (
+      base: globals.$ion-semantics-success-base,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-semantics-success-800,
+      tint: globals.$ion-semantics-success-500,
+    ),
+    subtle: (
+      base: globals.$ion-semantics-success-100,
+      contrast: globals.$ion-semantics-success-base,
+      shade: globals.$ion-semantics-success-300,
+      tint: globals.$ion-semantics-success-200,
+    ),
   ),
   warning: (
-    base: globals.$ion-semantics-warning-base,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-semantics-warning-800,
-    tint: globals.$ion-semantics-warning-500,
-    subtle: globals.$ion-semantics-warning-100,
+    bold: (
+      base: globals.$ion-semantics-warning-base,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-semantics-warning-800,
+      tint: globals.$ion-semantics-warning-500,
+    ),
+    subtle: (
+      base: globals.$ion-semantics-warning-100,
+      contrast: globals.$ion-semantics-warning-base,
+      shade: globals.$ion-semantics-warning-300,
+      tint: globals.$ion-semantics-warning-200,
+    ),
   ),
   danger: (
-    base: globals.$ion-semantics-danger-base,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-semantics-danger-800,
-    tint: globals.$ion-semantics-danger-500,
-    subtle: globals.$ion-semantics-danger-100,
+    bold: (
+      base: globals.$ion-semantics-danger-base,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-semantics-danger-800,
+      tint: globals.$ion-semantics-danger-500,
+    ),
+    subtle: (
+      base: globals.$ion-semantics-danger-100,
+      contrast: globals.$ion-semantics-danger-base,
+      shade: globals.$ion-semantics-danger-300,
+      tint: globals.$ion-semantics-danger-200,
+    ),
   ),
   light: (
-    base: globals.$ion-primitives-neutral-200,
-    contrast: globals.$ion-primitives-base-black,
-    shade: globals.$ion-primitives-neutral-300,
-    tint: globals.$ion-primitives-neutral-100,
-    subtle: globals.$ion-primitives-neutral-100,
+    bold: (
+      base: globals.$ion-primitives-neutral-200,
+      contrast: globals.$ion-primitives-base-black,
+      shade: globals.$ion-primitives-neutral-300,
+      tint: globals.$ion-primitives-neutral-100,
+    ),
+    subtle: (
+      base: globals.$ion-primitives-neutral-100,
+      contrast: globals.$ion-primitives-neutral-700,
+      shade: globals.$ion-primitives-neutral-300,
+      tint: globals.$ion-primitives-neutral-200,
+    ),
   ),
   medium: (
-    base: globals.$ion-primitives-neutral-700,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-primitives-neutral-800,
-    tint: globals.$ion-primitives-neutral-500,
-    subtle: globals.$ion-primitives-neutral-100,
+    bold: (
+      base: globals.$ion-primitives-neutral-700,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-primitives-neutral-800,
+      tint: globals.$ion-primitives-neutral-500,
+    ),
+    subtle: (
+      base: globals.$ion-primitives-neutral-100,
+      contrast: globals.$ion-primitives-neutral-700,
+      shade: globals.$ion-primitives-neutral-300,
+      tint: globals.$ion-primitives-neutral-200,
+    ),
   ),
   dark: (
-    base: globals.$ion-primitives-neutral-1100,
-    contrast: globals.$ion-primitives-base-white,
-    shade: globals.$ion-primitives-neutral-1200,
-    tint: globals.$ion-primitives-neutral-900,
-    subtle: globals.$ion-primitives-neutral-100,
+    bold: (
+      base: globals.$ion-primitives-neutral-1100,
+      contrast: globals.$ion-primitives-base-white,
+      shade: globals.$ion-primitives-neutral-1200,
+      tint: globals.$ion-primitives-neutral-900,
+    ),
+    subtle: (
+      base: globals.$ion-primitives-neutral-100,
+      contrast: globals.$ion-primitives-neutral-1100,
+      shade: globals.$ion-primitives-neutral-300,
+      tint: globals.$ion-primitives-neutral-200,
+    ),
   ),
 );
 
diff --git a/core/src/themes/native/native.theme.default.scss b/core/src/themes/native/native.theme.default.scss
index 80beeb17be..e991c3afaf 100644
--- a/core/src/themes/native/native.theme.default.scss
+++ b/core/src/themes/native/native.theme.default.scss
@@ -24,58 +24,76 @@ $dark: #222428;
 
 $colors: (
   primary: (
-    base: $primary,
-    contrast: #fff,
-    shade: get-color-shade($primary),
-    tint: get-color-tint($primary),
+    bold: (
+      base: $primary,
+      contrast: #fff,
+      shade: get-color-shade($primary),
+      tint: get-color-tint($primary),
+    ),
   ),
   secondary: (
-    base: $secondary,
-    contrast: #fff,
-    shade: get-color-shade($secondary),
-    tint: get-color-tint($secondary),
+    bold: (
+      base: $secondary,
+      contrast: #fff,
+      shade: get-color-shade($secondary),
+      tint: get-color-tint($secondary),
+    ),
   ),
   tertiary: (
-    base: $tertiary,
-    contrast: #fff,
-    shade: get-color-shade($tertiary),
-    tint: get-color-tint($tertiary),
+    bold: (
+      base: $tertiary,
+      contrast: #fff,
+      shade: get-color-shade($tertiary),
+      tint: get-color-tint($tertiary),
+    ),
   ),
   success: (
-    base: $success,
-    contrast: #000,
-    shade: get-color-shade($success),
-    tint: get-color-tint($success),
+    bold: (
+      base: $success,
+      contrast: #000,
+      shade: get-color-shade($success),
+      tint: get-color-tint($success),
+    ),
   ),
   warning: (
-    base: $warning,
-    contrast: #000,
-    shade: get-color-shade($warning),
-    tint: get-color-tint($warning),
+    bold: (
+      base: $warning,
+      contrast: #000,
+      shade: get-color-shade($warning),
+      tint: get-color-tint($warning),
+    ),
   ),
   danger: (
-    base: $danger,
-    contrast: #fff,
-    shade: get-color-shade($danger),
-    tint: get-color-tint($danger),
+    bold: (
+      base: $danger,
+      contrast: #fff,
+      shade: get-color-shade($danger),
+      tint: get-color-tint($danger),
+    ),
   ),
   light: (
-    base: $light,
-    contrast: #000,
-    shade: get-color-shade($light),
-    tint: get-color-tint($light),
+    bold: (
+      base: $light,
+      contrast: #000,
+      shade: get-color-shade($light),
+      tint: get-color-tint($light),
+    ),
   ),
   medium: (
-    base: $medium,
-    contrast: #fff,
-    shade: get-color-shade($medium),
-    tint: get-color-tint($medium),
+    bold: (
+      base: $medium,
+      contrast: #fff,
+      shade: get-color-shade($medium),
+      tint: get-color-tint($medium),
+    ),
   ),
   dark: (
-    base: $dark,
-    contrast: #fff,
-    shade: get-color-shade($dark),
-    tint: get-color-tint($dark),
+    bold: (
+      base: $dark,
+      contrast: #fff,
+      shade: get-color-shade($dark),
+      tint: get-color-tint($dark),
+    ),
   ),
 );