refactor(badge): update padding for medium size (#29692)

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

@@ -1,4 +1,5 @@
-@import "./badge.vars";
+@import "../../themes/mixins";
+@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -13,8 +14,6 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
   --padding-top: #{$badge-padding-top};
   --padding-end: #{$badge-padding-end};
   --padding-bottom: #{$badge-padding-bottom};
@@ -30,7 +29,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
 

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

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.font";
 
 // Badge
 // --------------------------------------------------

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

@@ -1,12 +1,16 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./badge";
+@use "./badge.common";
 
 // Ionic Badge
 // --------------------------------------------------
 
 :host {
-  --padding-start: #{globals.$ionic-space-100};
+  // TODO(ROU-10872): replace this value the color function
-  --padding-end: #{globals.$ionic-space-100};
+  --background: #{globals.$ionic-color-blue-700};
+  // TODO(ROU-10872): replace this value the color function
+  --color: #{globals.$ionic-color-base-white};
+  --padding-start: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
   --padding-top: #{globals.$ionic-space-0};
   --padding-bottom: #{globals.$ionic-space-0};
 
@@ -23,23 +27,23 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-200);
+  @include globals.border-radius(globals.$ionic-border-radius-200);
 }
 
 :host(.badge-xxsmall.badge-soft),
 :host(.badge-xsmall.badge-soft),
 :host(.badge-small.badge-soft) {
-  @include border-radius(globals.$ionic-border-radius-100);
+  @include globals.border-radius(globals.$ionic-border-radius-100);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include border-radius(globals.$ionic-border-radius-full);
+  @include globals.border-radius(globals.$ionic-border-radius-full);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include border-radius(globals.$ionic-border-radius-0);
+  @include globals.border-radius(globals.$ionic-border-radius-0);
 }
 
 // Badge Sizes
@@ -47,6 +51,9 @@
 
 /* 2-Extra Small Badge */
 :host(.badge-xxsmall) {
+  --padding-start: #{globals.$ionic-space-050};
+  --padding-end: #{globals.$ionic-space-050};
+
   min-width: globals.$ionic-scale-400;
   height: globals.$ionic-scale-400;
 
@@ -57,6 +64,9 @@
 
 /* Extra Small Badge */
 :host(.badge-xsmall) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-600;
   height: globals.$ionic-scale-600;
 
@@ -67,6 +77,9 @@
 
 /* Small Badge */
 :host(.badge-small) {
+  --padding-start: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-100};
+
   min-width: globals.$ionic-scale-800;
   height: globals.$ionic-scale-800;
 
@@ -87,9 +100,6 @@
 
 /* Large Badge */
 :host(.badge-large) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1200;
   height: globals.$ionic-scale-1200;
 
@@ -100,9 +110,6 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
-  --padding-start: #{globals.$ionic-space-200};
-  --padding-end: #{globals.$ionic-space-200};
-
   min-width: globals.$ionic-scale-1400;
   height: globals.$ionic-scale-1400;
 

core/src/components/badge/badge.ios.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.ios.vars";
 
 // iOS Badge

core/src/components/badge/badge.md.scss

@@ -1,4 +1,4 @@
-@import "./badge";
+@import "./badge.native";
 @import "./badge.md.vars";
 
 // Material Design Badge

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

@@ -0,0 +1,13 @@
+@import "../../themes/native/native.globals.md";
+@import "./badge.common";
+@import "./badge.common.vars";
+
+// Badge
+// --------------------------------------------------
+
+:host {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+
+  font-family: $font-family-base;
+}