feat(content): add recipe and tokens

BREAKING.md

@@ -19,6 +19,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Content](#version-9x-content)
   - [Grid](#version-9x-grid)
   - [Item Divider](#version-9x-item-divider)
   - [Spinner](#version-9x-spinner)
@@ -50,6 +51,46 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.
 
+<h4 id="version-9x-content">Content</h4>
+
+- **CSS Variable Replacements**:    `--background` and `--color` have been **removed**. Use the new token structure:
+```
+--background -> IonContent.background
+--color -> IonContent.color
+```
+
+`--padding-*` is still supported. `.ion-padding`, `.ion-padding-*` classes in `css/padding.scss` set `--padding-*` directly on the host. `ion-content` continues to honor those values (falling back to the new token when unset). Existing usage of the utility classes and direct `--padding-*` overrides will keep working.
+
+New code is encouraged to use the token-based API instead:
+```
+--padding-top -> IonContent.padding.top
+--padding-end -> IonContent.padding.end
+--padding-bottom -> IonContent.padding.bottom
+--padding-start -> IonContent.padding.start
+```
+_Note: `core/api.txt` only lists the new `--ion-content-padding-*` variables. The `--padding-*` overrides remain functional but are no longer part of the documented public API._
+
+If per-component customization is needed, the CSS variables can be used directly.
+```
+--background -> --ion-content-background
+--color -> --ion-content-color
+--padding-top -> --ion-content-padding-top
+--padding-end -> --ion-content-padding-end
+--padding-bottom -> --ion-content-padding-bottom
+--padding-start -> --ion-content-padding-start
+```
+
+- **Internal-only variables (no replacement)**: The following CSS variables were previously documented `@prop`s on `ion-content` and have been renamed to the `--internal-*` namespace, removing them from the public API:
+```
+--keyboard-offset -> --internal-keyboard-offset
+--offset-top      -> --internal-offset-top
+--offset-bottom   -> --internal-offset-bottom
+```
+
+These are managed by `ion-content` itself (keyboard avoidance and header/footer offsets) and were never intended for consumer override. There is no replacement - any code that was setting them directly should be removed.
+
+- **Theme classes**: Remove any instances that target the theme classes: `ion-content.md`, `ion-content.ios`.
+
 <h4 id="version-9x-grid">Grid</h4>
 
 - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.

core/api.txt

@@ -800,7 +800,6 @@ ion-content,prop,mode,"ios" | "md",undefined,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
 ion-content,prop,scrollX,boolean,false,false,false
 ion-content,prop,scrollY,boolean,true,false,false
-ion-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-content,method,getScrollElement,getScrollElement() => Promise<HTMLElement>
 ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise<void>
 ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise<void>
@@ -809,15 +808,14 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,css-prop,--background
-ion-content,css-prop,--color
-ion-content,css-prop,--keyboard-offset
-ion-content,css-prop,--offset-bottom
-ion-content,css-prop,--offset-top
-ion-content,css-prop,--padding-bottom
-ion-content,css-prop,--padding-end
-ion-content,css-prop,--padding-start
-ion-content,css-prop,--padding-top
+ion-content,css-prop,--ion-content-background
+ion-content,css-prop,--ion-content-color
+ion-content,css-prop,--ion-content-font-family
+ion-content,css-prop,--ion-content-overflow
+ion-content,css-prop,--ion-content-padding-bottom
+ion-content,css-prop,--ion-content-padding-end
+ion-content,css-prop,--ion-content-padding-start
+ion-content,css-prop,--ion-content-padding-top
 ion-content,part,background
 ion-content,part,scroll
 

core/scripts/testing/scripts.js

@@ -24,7 +24,7 @@ const DEFAULT_THEME = 'md';
 const DEFAULT_PALETTE = 'light';
 
 (function() {
-  
+
   /**
    * The `rtl` param is used to set the directionality of the 
    * document. This can be `true` or `false`.
@@ -128,6 +128,27 @@ const DEFAULT_PALETTE = 'light';
     );
   }
 
+  /**
+   * Deep merges two objects, with source properties overriding target properties
+   * @param target The target object to merge into
+   * @param source The source object to merge from
+   * @returns The merged object
+   */
+  // TODO(FW-6750): Remove this once the theme tokens can be imported directly into the test pages
+  const deepMerge = (target, source) => {
+    const result = { ...target };
+
+    for (const key in source) {
+      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        result[key] = deepMerge(result[key] ?? {}, source[key]);
+      } else {
+        result[key] = source[key];
+      }
+    }
+    return result;
+  };
+
+  // TODO(FW-6750): Determine if this function can be removed once the theme tokens can be imported directly into the test pages
   async function loadThemeTokens(themeName, paletteName) {
     try {
       // Store existing theme set from the app initialization
@@ -138,14 +159,7 @@ const DEFAULT_PALETTE = 'light';
 
       // Merge with existing theme to preserve any customizations
       if (customTheme) {
-        theme = {
-          ...theme,
-          ...customTheme,
-          palette: {
-            ...theme.palette,
-            ...customTheme.palette,
-          },
-        };
+        theme = deepMerge(theme, customTheme);
       }
 
       // If a specific palette is requested, modify the palette structure

core/src/components.d.ts

@@ -16,7 +16,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
-import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+import { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -58,7 +58,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
-export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
+export { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -1118,10 +1118,6 @@ export namespace Components {
           * @default true
          */
         "scrollY": boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**
@@ -7052,10 +7048,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "scrollY"?: boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**

core/src/components/action-sheet/action-sheet.scss

@@ -143,7 +143,6 @@
   flex-shrink: 2;
   overscroll-behavior-y: contain;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
   pointer-events: all;
 
   background: var(--background);

core/src/components/alert/alert.ios.scss

@@ -148,7 +148,6 @@
 
   border-top: $alert-ios-list-border-top;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 .alert-tappable {

core/src/components/alert/alert.scss

@@ -94,7 +94,6 @@
 .alert-message,
 .alert-input-group {
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }

core/src/components/card/test/shape/index.html

@@ -9,16 +9,33 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#dde2ef',
+                padding: {
+                  start: '16px',
+                  end: '16px',
+                  top: '16px',
+                  bottom: '16px',
+                },
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <!-- Styles only for testing purposes to identify the card shape -->
     <style>
-      ion-content {
-        --background: #dde2ef;
-      }
-
       .container {
         padding: 8px;
       }
@@ -33,7 +50,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
+      <ion-content class="ion-text-center" id="content" no-bounce>
         <h1>Default</h1>
         <div id="default" class="container">
           <ion-card>

core/src/components/card/test/theme-ionic/index.html

@@ -10,14 +10,26 @@
     />
     <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script>
+      // Need to be called before loading Ionic else
+      // the scripts.js logic runs too early.
+      window.Ionic = {
+        config: {
+          customTheme: {
+            components: {
+              IonContent: {
+                background: '#dde2ef',
+              },
+            },
+          },
+        },
+      };
+    </script>
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-content {
-        --background: #dde2ef;
-      }
       .ion-margin-top {
         margin-top: 32px;
       }
@@ -32,7 +44,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding-space-400" id="content" no-bounce>
+      <ion-content id="content" no-bounce>
         <h4>Preview options</h4>
 
         <p>

core/src/components/content/content-interface.ts → core/src/components/content/content.interfaces.ts

@@ -1,4 +1,5 @@
 import type { GestureDetail } from '../../interface';
+import type { IonPadding } from '../../themes/themes.interfaces';
 
 export interface ScrollBaseDetail {
   isScrolling: boolean;
@@ -19,3 +20,15 @@ export interface ScrollBaseCustomEvent extends CustomEvent {
 export interface ScrollCustomEvent extends ScrollBaseCustomEvent {
   detail: ScrollDetail;
 }
+
+export interface IonContentRecipe {
+  background?: string;
+  color?: string;
+
+  font?: {
+    family?: string;
+  };
+
+  overflow?: string;
+  padding?: IonPadding;
+}