feat(chip): add recipe and variables

core/api.txt

@@ -599,20 +599,13 @@ ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-chip,css-prop,--background,ionic
-ion-chip,css-prop,--background,ios
-ion-chip,css-prop,--background,md
-ion-chip,css-prop,--border-radius,ionic
-ion-chip,css-prop,--border-radius,ios
-ion-chip,css-prop,--border-radius,md
-ion-chip,css-prop,--color,ionic
-ion-chip,css-prop,--color,ios
-ion-chip,css-prop,--color,md
-ion-chip,css-prop,--focus-ring-color,ionic
-ion-chip,css-prop,--focus-ring-width,ionic
+ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,false
+ion-chip,prop,size,"large" | "small" | undefined,'large',false,false
+ion-chip,css-prop,--background
+ion-chip,css-prop,--border-radius
+ion-chip,css-prop,--color
+ion-chip,css-prop,--focus-ring-color
+ion-chip,css-prop,--focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false

core/scripts/testing/scripts.js

@@ -128,10 +128,11 @@ const DEFAULT_THEME = 'md';
       window.Ionic.config = window.Ionic.config || {};
       window.Ionic.config.customTheme = theme;
 
-      // Re-apply the global theme
+      // Re-apply the global theme, needed for Playwright tests
       if (window.Ionic.config.get && window.Ionic.config.set) {
         const themeModule = await import('/themes/utils/theme.js');
         themeModule.applyGlobalTheme(theme);
+        themeModule.applyComponentsTheme(theme);
       }
     } catch (error) {
       console.error(`Failed to load theme tokens for ${themeName}:`, error);

core/src/components.d.ts

@@ -872,7 +872,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -886,17 +886,15 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
@@ -6846,7 +6844,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -6860,17 +6858,15 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**

core/src/components/chip/chip.interfaces.ts

@@ -0,0 +1,153 @@
+export type IonChip = {
+  cursor?: string;
+  margin: string | number;
+
+  fontWeight?: string | number;
+  gap?: string | number;
+  lineHeight?: string | number;
+  letterSpacing?: string | number;
+
+  padding?: {
+    vertical: string | number;
+    horizontal: string | number;
+  };
+
+  // Sizes
+  size: {
+    small: IonChipSizeDefinition;
+    large: IonChipSizeDefinition;
+  };
+
+  // States
+  state?: {
+    disabled?: {
+      opacity: string | number;
+    };
+
+    focus?: {
+      ring?: {
+        color: string;
+        width?: string | number;
+      };
+    };
+  };
+
+  // Shapes
+  shape: {
+    soft: IonChipShapeDefinition;
+    round: IonChipShapeDefinition;
+    rectangular: IonChipShapeDefinition;
+  };
+
+  // Hues
+  hue: {
+    bold: IonChipHueDefinition;
+    subtle: IonChipHueDefinition;
+  };
+
+  // Variants
+
+  variant?: {
+    outline: {
+      bg?: string;
+
+      border: {
+        color?: HueRef;
+        width?: string | number;
+      };
+
+      // Any of the semantic colors like primary, secondary, etc.
+      semantic?: {
+        bg?: HueRef;
+
+        border?: {
+          color?: HueRef;
+        };
+      };
+
+      state?: IonChipVariantState;
+    };
+  };
+
+  icon: IonChipIconDefinition;
+  avatar?: IonChipMediaDefinition;
+};
+
+type IonChipSizeDefinition = {
+  minHeight: string | number;
+
+  font: {
+    size: string | number;
+  };
+};
+
+type IonChipShapeDefinition = {
+  border: {
+    radius: string | number;
+  };
+};
+
+type IonChipHueDefinition = {
+  bg: string;
+  color: string;
+
+  semantic?: {
+    bg?: string;
+    color?: string;
+    state?: IonChipInteractionStates;
+  };
+
+  state?: IonChipInteractionStates;
+};
+
+type IonChipInteractionStates = {
+  focus?: {
+    bg?: string;
+  };
+
+  hover?: {
+    bg?: string;
+  };
+
+  activated?: {
+    bg?: string;
+  };
+};
+
+type IonChipVariantState = {
+  focus?: {
+    bg?: HueRef;
+  };
+  hover?: {
+    bg?: HueRef;
+  };
+  activated?: {
+    bg?: HueRef;
+  };
+};
+
+type HueRef = {
+  bold?: string;
+  subtle?: string;
+};
+
+type IonChipMediaDefinition = {
+  size: string | number;
+
+  // Styles for the media component only if it is the first element in the slot
+  firstChild?: IonChipMediaMargin;
+  // Styles for the media component only if it is the last element in the slot
+  lastChild?: IonChipMediaMargin;
+};
+
+type IonChipMediaMargin = {
+  margin?: {
+    vertical?: string | number;
+    start?: string | number;
+    end?: string | number;
+  };
+};
+
+type IonChipIconDefinition = IonChipMediaDefinition & {
+  color?: string;
+};