feat(badge): add recipe and tokens

core/api.txt

@@ -316,28 +316,84 @@ ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
+ion-badge,prop,shape,"crisp" | "rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
-ion-badge,css-prop,--background,ionic
-ion-badge,css-prop,--background,ios
-ion-badge,css-prop,--background,md
-ion-badge,css-prop,--color,ionic
-ion-badge,css-prop,--color,ios
-ion-badge,css-prop,--color,md
-ion-badge,css-prop,--padding-bottom,ionic
-ion-badge,css-prop,--padding-bottom,ios
-ion-badge,css-prop,--padding-bottom,md
-ion-badge,css-prop,--padding-end,ionic
-ion-badge,css-prop,--padding-end,ios
-ion-badge,css-prop,--padding-end,md
-ion-badge,css-prop,--padding-start,ionic
-ion-badge,css-prop,--padding-start,ios
-ion-badge,css-prop,--padding-start,md
-ion-badge,css-prop,--padding-top,ionic
-ion-badge,css-prop,--padding-top,ios
-ion-badge,css-prop,--padding-top,md
+ion-badge,css-prop,--ion-badge-font-family - the font family of the badge text Bold
+ion-badge,css-prop,--ion-badge-hue-bold-default-background - Background color of the `bold` hue in default state
+ion-badge,css-prop,--ion-badge-hue-bold-default-border-radius - Border radius of the `bold` hue in default state
+ion-badge,css-prop,--ion-badge-hue-bold-default-color - Text color of the `bold` hue in default state
+ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-background - Background color of the `bold` hue when a semantic color is applied
+ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-border-radius - Border radius of the `bold` hue when a semantic color is applied Subtle
+ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-color - Text color of the `bold` hue when a semantic color is applied
+ion-badge,css-prop,--ion-badge-hue-subtle-default-background - Background color of the `subtle` hue in default state
+ion-badge,css-prop,--ion-badge-hue-subtle-default-border-radius - Border radius of the `subtle` hue in default state
+ion-badge,css-prop,--ion-badge-hue-subtle-default-color - Text color of the `subtle` hue in default state
+ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-background - Background color of the `subtle` hue when a semantic color is applied
+ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-border-radius - Border radius of the `subtle` hue when a semantic color is applied Shapes
+ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-color - Text color of the `subtle` hue when a semantic color is applied
+ion-badge,css-prop,--ion-badge-shape-crisp-border-radius - Border radius of the `crisp` shape
+ion-badge,css-prop,--ion-badge-shape-rectangular-border-radius - Border radius of the `rectangular` shape Sizes
+ion-badge,css-prop,--ion-badge-shape-round-border-radius - Border radius of the `round` shape
+ion-badge,css-prop,--ion-badge-shape-soft-border-radius - Border radius of the `soft` shape
+ion-badge,css-prop,--ion-badge-size-large-content-font-size - Font size of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-font-weight - Font weight of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-height - Height of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-icon-height - Height of the slotted `ion-icon` of the `large` size Sizes
+ion-badge,css-prop,--ion-badge-size-large-content-icon-width - Width of the slotted `ion-icon` of the `large` size
+ion-badge,css-prop,--ion-badge-size-large-content-letter-spacing - Letter spacing of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-line-height - Line height of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-min-height - Minimum height of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-min-width - Minimum width of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-padding-bottom - Bottom padding of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-content-padding-top - Top padding of the `large` size when badge has content
+ion-badge,css-prop,--ion-badge-size-large-dot-height - Height of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-large-dot-min-width - Minimum width of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-bottom - Bottom padding of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-large-dot-padding-top - Top padding of the `large` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-content-font-size - Font size of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-font-weight - Font weight of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-height - Height of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-icon-height - Height of the slotted `ion-icon` of the `medium` size
+ion-badge,css-prop,--ion-badge-size-medium-content-icon-width - Width of the slotted `ion-icon` of the `medium` size
+ion-badge,css-prop,--ion-badge-size-medium-content-letter-spacing - Letter spacing of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-line-height - Line height of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-min-height - Minimum height of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-min-width - Minimum width of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-bottom - Bottom padding of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-content-padding-top - Top padding of the `medium` size when badge has content
+ion-badge,css-prop,--ion-badge-size-medium-dot-height - Height of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-dot-min-width - Minimum width of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-bottom - Bottom padding of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-medium-dot-padding-top - Top padding of the `medium` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-content-font-size - Font size of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-font-weight - Font weight of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-height - Height of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-icon-height - Height of the slotted `ion-icon` of the `small` size
+ion-badge,css-prop,--ion-badge-size-small-content-icon-width - Width of the slotted `ion-icon` of the `small` size
+ion-badge,css-prop,--ion-badge-size-small-content-letter-spacing - Letter spacing of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-line-height - Line height of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-min-height - Minimum height of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-min-width - Minimum width of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-padding-bottom - Bottom padding of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-content-padding-top - Top padding of the `small` size when badge has content
+ion-badge,css-prop,--ion-badge-size-small-dot-height - Height of the `small` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-dot-min-width - Minimum width of the `small` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-bottom - Bottom padding of the `small` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-end - Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-start - Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge is empty
+ion-badge,css-prop,--ion-badge-size-small-dot-padding-top - Top padding of the `small` size when badge is empty
 
 ion-breadcrumb,shadow
 ion-breadcrumb,prop,active,boolean,false,false,false

core/src/components.d.ts

@@ -11,6 +11,7 @@ import { ActionSheetButton } from "./components/action-sheet/action-sheet-interf
 import { OverlayEventDetail } from "./utils/overlays-interface";
 import { IonicSafeString } from "./utils/sanitization";
 import { AlertButton, AlertInput } from "./components/alert/alert-interface";
+import { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces";
 import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
@@ -51,6 +52,7 @@ export { ActionSheetButton } from "./components/action-sheet/action-sheet-interf
 export { OverlayEventDetail } from "./utils/overlays-interface";
 export { IonicSafeString } from "./utils/sanitization";
 export { AlertButton, AlertInput } from "./components/alert/alert-interface";
+export { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces";
 export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
@@ -469,29 +471,29 @@ 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';
+        "hue"?: IonBadgeHue;
         /**
           * 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 even slightly 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"?: IonBadgeShape;
         /**
-          * 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';
+        "size"?: IonBadgeSize;
         /**
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
           * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "vertical"?: 'top' | 'bottom';
+        "vertical"?: IonBadgeVerticalPosition;
     }
     interface IonBreadcrumb {
         /**
@@ -898,7 +900,7 @@ export namespace Components {
          */
         "shape"?: IonChipShape;
         /**
-          * 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"?: IonChipSize;
     }
@@ -6400,29 +6402,29 @@ 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';
+        "hue"?: IonBadgeHue;
         /**
           * 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 even slightly 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"?: IonBadgeShape;
         /**
-          * 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';
+        "size"?: IonBadgeSize;
         /**
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
           * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
          */
-        "vertical"?: 'top' | 'bottom';
+        "vertical"?: IonBadgeVerticalPosition;
     }
     interface IonBreadcrumb {
         /**
@@ -6864,7 +6866,7 @@ declare namespace LocalJSX {
          */
         "shape"?: IonChipShape;
         /**
-          * 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"?: IonChipSize;
     }