CR

Author: OS-pedrolourenco

core/src/components/badge/badge.common.scss

@@ -63,20 +63,3 @@
 :host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
   bottom: 0;
 }
-
-// Badge in Button
-// --------------------------------------------------
-
-:host(:not(:empty).in-button) {
-  min-width: $badge-size-in-button;
-  height: $badge-size-in-button;
-
-  font-size: $badge-font-size-in-button;
-
-  line-height: $badge-line-height-in-button;
-
-  ::slotted(ion-icon) {
-    width: $badge-icon-size-in-button;
-    height: $badge-icon-size-in-button;
-  }
-}

core/src/components/badge/badge.common.vars.scss

@@ -1,5 +1,4 @@
 @import "../../themes/functions.font";
-@import "../../themes/functions.sizes";
 
 // Badge
 // --------------------------------------------------
@@ -27,15 +26,3 @@ $badge-font-size: dynamic-font($badge-baseline-font-size);
 
 /// @prop - Font weight of the badge
 $badge-font-weight: bold;
-
-/// @prop - Size of the badge when inside button
-$badge-size-in-button: 16px;
-
-/// @prop - Font size of the badge when inside button
-$badge-font-size-in-button: px-to-rem(12);
-
-/// @prop - Line height of the badge when inside button
-$badge-line-height-in-button: 20px;
-
-/// @prop - Size of of the badge icon when inside button
-$badge-icon-size-in-button: 12px;

core/src/components/badge/badge.ionic.scss

@@ -213,3 +213,17 @@
 :host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
   @include globals.position(null, globals.$ion-space-050);
 }
+
+:host(:not(:empty).in-button) {
+  min-width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+
+  font-size: globals.$ion-font-size-300;
+
+  line-height: globals.$ion-font-line-height-500;
+
+  ::slotted(ion-icon) {
+    width: globals.$ion-scale-300;
+    height: globals.$ion-scale-300;
+  }
+}

core/src/components/badge/badge.native.scss

@@ -29,3 +29,20 @@
 
   line-height: 10px;
 }
+
+// Badge in Button
+// --------------------------------------------------
+
+:host(:not(:empty).in-button) {
+  min-width: $badge-size-in-button;
+  height: $badge-size-in-button;
+
+  font-size: $badge-font-size-in-button;
+
+  line-height: $badge-line-height-in-button;
+
+  ::slotted(ion-icon) {
+    width: $badge-icon-size-in-button;
+    height: $badge-icon-size-in-button;
+  }
+}

core/src/components/badge/badge.native.vars.scss

@@ -1,4 +1,5 @@
 @import "../../themes/functions.font";
+@import "../../themes/functions.sizes";
 
 // Badge
 // --------------------------------------------------
@@ -8,3 +9,15 @@ $badge-hint-baseline-font-size: 8px;
 
 /// @prop - Font size of the badge hint
 $badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);
+
+/// @prop - Size of the badge when inside button
+$badge-size-in-button: 16px;
+
+/// @prop - Font size of the badge when inside button
+$badge-font-size-in-button: px-to-rem(12);
+
+/// @prop - Line height of the badge when inside button
+$badge-line-height-in-button: 20px;
+
+/// @prop - Size of of the badge icon when inside button
+$badge-icon-size-in-button: 12px;