feat(img): add recipe and tokens

BREAKING.md

@@ -22,6 +22,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Content](#version-9x-content)
   - [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)
@@ -251,6 +252,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

@@ -1068,7 +1068,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/src/components.d.ts

@@ -1552,10 +1552,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 {
         /**
@@ -7584,10 +7580,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}

core/src/components/img/test/basic/img.e2e.ts

@@ -4,8 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('img: basic'), () => {
-    // TODO FW-3596
-    test.describe.skip('image successfully loads', () => {
+    test.describe('image successfully loads', () => {
       let ionImgWillLoad: EventSpy;
       let ionImgDidLoad: EventSpy;
 
@@ -16,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               status: 200,
               contentType: 'image/png',
               body: Buffer.from(
-                'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIwAAAABJRU5ErkJggg==',
+                'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
                 'base64'
               ),
             });
@@ -52,7 +51,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       test('should emit ionImgDidLoad', async () => {
         await ionImgDidLoad.next();
 
-        expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+        expect(ionImgDidLoad).toHaveReceivedEventTimes(1);
       });
     });