feat(content): add recipe and tokens

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;
+}