feat(img): add recipe and tokens

BREAKING.md

@@ -21,6 +21,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Chip](#version-9x-chip)
   - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
+  - [Image](#version-9x-image)
   - [Input Otp](#version-9x-input-otp)
   - [Item Divider](#version-9x-item-divider)
   - [Radio Group](#version-9x-radio-group)
@@ -202,6 +203,16 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
+<h4 id="version-9x-image">Image</h4>
+
+The following breaking changes apply to `ion-img`:
+
+1. Theme classes (`ion-img.md`, `ion-img.ios`) are no longer supported.
+
+<h5>Theme classes</h5>
+
+Remove any instances that target the theme classes: `ion-img.md`, `ion-img.ios`.
+
 <h4 id="version-9x-input-otp">Input Otp</h4>
 
 Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

core/api.txt

@@ -1060,7 +1060,6 @@ ion-img,shadow
 ion-img,prop,alt,string | undefined,undefined,false,false
 ion-img,prop,mode,"ios" | "md",undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
-ion-img,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-img,event,ionError,void,true
 ion-img,event,ionImgDidLoad,void,true
 ion-img,event,ionImgWillLoad,void,true

core/scripts/vercel-build.sh

@@ -48,6 +48,7 @@ echo "Copying core output..."
 cp -r "${CORE_DIR}/src" "${OUTPUT_DIR}/src"
 cp -r "${CORE_DIR}/dist" "${OUTPUT_DIR}/dist"
 cp -r "${CORE_DIR}/css" "${OUTPUT_DIR}/css"
+cp -r "${CORE_DIR}/themes" "${OUTPUT_DIR}/themes"
 mkdir -p "${OUTPUT_DIR}/scripts"
 cp -r "${CORE_DIR}/scripts/testing" "${OUTPUT_DIR}/scripts/testing"
 

core/src/components.d.ts

@@ -1525,10 +1525,6 @@ export namespace Components {
           * The image URL. This attribute is mandatory for the `<img>` element.
          */
         "src"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInfiniteScroll {
         /**
@@ -7525,10 +7521,6 @@ declare namespace LocalJSX {
           * The image URL. This attribute is mandatory for the `<img>` element.
          */
         "src"?: string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInfiniteScroll {
         /**

core/src/components/img/img.tsx

@@ -3,11 +3,8 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';
 
-import { getIonTheme } from '../../global/ionic-global';
-
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @part image - The inner `img` element.
  */
@@ -124,13 +121,8 @@ export class Img implements ComponentInterface {
   render() {
     const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
     const { draggable } = inheritedAttributes;
-    const theme = getIonTheme(this);
     return (
-      <Host
-        class={{
-          [theme]: true,
-        }}
-      >
+      <Host>
         <img
           decoding="async"
           src={loadSrc}

packages/angular/src/directives/proxies.ts

@@ -891,14 +891,14 @@ export declare interface IonIcon extends Components.IonIcon {}
 
 
 @ProxyCmp({
-  inputs: ['alt', 'mode', 'src', 'theme']
+  inputs: ['alt', 'mode', 'src']
 })
 @Component({
   selector: 'ion-img',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alt', 'mode', 'src', 'theme'],
+  inputs: ['alt', 'mode', 'src'],
 })
 export class IonImg {
   protected el: HTMLIonImgElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -914,14 +914,14 @@ export declare interface IonHeader extends Components.IonHeader {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonImg,
-  inputs: ['alt', 'mode', 'src', 'theme']
+  inputs: ['alt', 'mode', 'src']
 })
 @Component({
   selector: 'ion-img',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alt', 'mode', 'src', 'theme'],
+  inputs: ['alt', 'mode', 'src'],
   standalone: true
 })
 export class IonImg {