feat(badge): add recipe and tokens

Author: thetaPC

core/src/components.d.ts

@@ -467,19 +467,19 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
          */
         "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"crisp"` for a badge with minimally rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners.  Defaults to `"soft"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round | rectangular';
+        "shape"?: 'crisp' | 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size.  Defaults to `"small"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
@@ -896,7 +896,7 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
+          * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'large';
     }
@@ -6402,19 +6402,19 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Defaults to `"bold"` if both the hue property and theme config are unset.
          */
         "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"crisp"` for a badge with minimally rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners.  Defaults to `"soft"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round | rectangular';
+        "shape"?: 'crisp' | 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size.  Defaults to `"small"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
@@ -6866,7 +6866,7 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
+          * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
         "size"?: 'small' | 'large';
     }

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

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./badge.common";
+@use "./badge";
 
 // Ionic Badge
 // --------------------------------------------------
@@ -51,21 +51,22 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include globals.border-radius(globals.$ion-soft-xs);
+  @include globals.border-radius(globals.$ion-soft-xs); // 8px
 }
 
+// TODO: add example that this needs to be done by passing props of small size ane crisp shape
 :host(.badge-small.badge-soft) {
-  @include globals.border-radius(globals.$ion-soft-2xs);
+  @include globals.border-radius(globals.$ion-soft-2xs); // 4px
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include globals.border-radius(globals.$ion-round-sm);
+  @include globals.border-radius(globals.$ion-round-sm); // 999px
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include globals.border-radius(globals.$ion-rectangular-sm);
+  @include globals.border-radius(globals.$ion-rectangular-sm); // 0
 }
 
 // Badge Sizes
@@ -77,7 +78,7 @@
   --padding-end: #{globals.$ion-space-050};
 
   min-width: globals.$ion-scale-400;
-  height: globals.$ion-scale-400;
+  height: globals.$ion-scale-400; // 16px
 }
 
 :host(.badge-small) ::slotted(ion-icon) {
@@ -92,10 +93,10 @@
   --padding-start: #{globals.$ion-space-100};
   --padding-end: #{globals.$ion-space-100};
 
-  @include globals.typography(globals.$ion-body-md-medium);
+  @include globals.typography(globals.$ion-body-md-medium); // TODO: Add this
 
   min-width: globals.$ion-scale-600;
-  height: globals.$ion-scale-600;
+  height: globals.$ion-scale-600; // 24px
 }
 
 :host(.badge-medium) ::slotted(ion-icon),
@@ -112,6 +113,7 @@
   --padding-end: 0;
 }
 
+// TODO: don't add since this is an equivalent of size medium so give example
 :host([vertical]:not(:empty)) {
   --padding-start: #{globals.$ion-scale-100};
   --padding-end: #{globals.$ion-scale-100};

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

@@ -1,5 +1,5 @@
 @import "../../themes/native/native.globals.md";
-@import "./badge.common";
+@import "./badge";
 @import "./badge.native.vars";
 
 // Badge
@@ -15,7 +15,7 @@
 
   min-width: $badge-min-width;
 
-  font-family: $font-family-base;
+  font-family: $font-family-base; // TODO: Add this
 
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;