feat(chip): add recipe and variables

core/api.txt

@@ -596,23 +596,17 @@ ion-checkbox,part,supporting-text
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
-ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
+ion-chip,prop,fill,"outline" | "solid" | undefined,undefined,false,false
+ion-chip,prop,hue,"bold" | "subtle" | undefined,undefined,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,css-prop,--bg
+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

@@ -147,15 +147,38 @@ const DEFAULT_PALETTE = 'light';
         theme.palette.highContrastDark.enabled = 'always';
       }
 
-      // Apply the theme tokens to Ionic config
-      window.Ionic = window.Ionic || {};
-      window.Ionic.config = window.Ionic.config || {};
-      window.Ionic.config.customTheme = theme;
+      if (window.Ionic?.config?.set) {
+        /**
+         * Playwright: If the Config instance exists, we must use the
+         * `set()` method. This ensures the internal private Map inside
+         * the `Config` class is updated with the loaded theme tokens.
+         * Without this, components would read 'undefined' or 'base'
+         * values from the stale Map when trying to access them through
+         * methods like `config.get()`.
+         */
+        window.Ionic.config.set('customTheme', theme);
+      } else {
+        /**
+         * App Initialization: If the Config instance doesn't exist yet,
+         * we attach the theme to the global Ionic object. The `initialize()`
+         * method in `ionic-global.ts` will later merge this into the new
+         * `Config` instance via `config.reset()`.
+         */
+        window.Ionic = window.Ionic || {};
+        window.Ionic.config = window.Ionic.config || {};
+        window.Ionic.config.customTheme = theme;
+      }
 
-      // Re-apply the global theme
-      if (window.Ionic.config.get && window.Ionic.config.set) {
+      /**
+       * Re-applying the global theme is critical for Playwright tests.
+       * Even if the config is set, the CSS variables for the specific theme 
+       * (e.g., md or ios) must be force-injected into the document head to 
+       * ensure visual assertions pass correctly.
+       */
+      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,31 +872,30 @@ 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.
-          * @default 'subtle'
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if no fill is set in the custom theme config.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if no hue is set in the custom theme config.
          */
         "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Display an outline style button.
+          * @deprecated - Use fill="outline" instead  Display an outline style button.
           * @default false
          */
         "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"` if no shape is set in the custom theme config.
          */
         "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"` if no size is set in the custom theme config.
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
@@ -6846,31 +6845,30 @@ 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.
-          * @default 'subtle'
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if no fill is set in the custom theme config.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if no hue is set in the custom theme config.
          */
         "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
-          * Display an outline style button.
+          * @deprecated - Use fill="outline" instead  Display an outline style button.
           * @default false
          */
         "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"` if no shape is set in the custom theme config.
          */
         "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"` if no size is set in the custom theme config.
          */
         "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,157 @@
+import type { IonPadding, IonMargin } from '../../themes/themes.interfaces.js';
+
+export type IonChipRecipe = {
+  cursor?: string;
+  margin?: IonMargin;
+
+  font?: {
+    weight?: string | number;
+  };
+
+  gap?: string | number;
+  lineHeight?: string | number;
+  letterSpacing?: string | number;
+
+  padding?: IonPadding;
+
+  // 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;
+  };
+
+  // Fills
+
+  fill?: {
+    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?: {
+    margin?: IonMargin;
+  };
+  // Styles for the media component only if it is the last element in the slot
+  lastChild?: {
+    margin?: IonMargin;
+  };
+};
+
+type IonChipIconDefinition = IonChipMediaDefinition & {
+  color?: string;
+};
+
+export type IonChipConfig = {
+  hue?: 'bold' | 'subtle';
+  size?: 'small' | 'large';
+  shape?: 'soft' | 'round' | 'rectangular';
+};