feat(chip): add recipe and variables (#30873)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>

Author: 3 people

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,--border-radius
+ion-chip,css-prop,--color
+ion-chip,css-prop,--focus-ring-color
+ion-chip,css-prop,--focus-ring-style
+ion-chip,css-prop,--focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false

core/scripts/testing/scripts.js

@@ -130,9 +130,23 @@ const DEFAULT_PALETTE = 'light';
 
   async function loadThemeTokens(themeName, paletteName) {
     try {
+      // Store existing theme set from the app initialization
+      const customTheme = window.Ionic?.config?.customTheme;
       // Load the default tokens for the theme
       const defaultTokens = await import(`/themes/${themeName}/default.tokens.js`);
-      const theme = defaultTokens.defaultTheme;
+      let theme = defaultTokens.defaultTheme;
+
+      // Merge with existing theme to preserve any customizations
+      if (customTheme) {
+        theme = {
+          ...theme,
+          ...customTheme,
+          palette: {
+            ...theme.palette,
+            ...customTheme.palette,
+          },
+        };
+      }
 
       // If a specific palette is requested, modify the palette structure
       // to set the enabled property to 'always'
@@ -147,15 +161,42 @@ 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) {
+        /**
+         * New Page Load after Initial App Load or Playwright Test:
+         * 
+         * 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 or Browser Refresh:
+         * 
+         * 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,8 +872,11 @@ 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"`.
+         */
+        "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"`.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -882,21 +885,18 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @deprecated - Use fill="outline" instead
           * @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"`.
          */
         "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"`.
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
@@ -6846,8 +6846,11 @@ 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"`.
+         */
+        "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"`.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -6856,21 +6859,18 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @deprecated - Use fill="outline" instead
           * @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"`.
          */
         "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"`.
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**