feat(content): add recipe and tokens

core/api.txt

@@ -749,7 +749,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>
@@ -758,15 +757,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/src/components.d.ts

@@ -15,7 +15,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";
@@ -55,7 +55,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 {
         /**
@@ -7060,10 +7056,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/content/content-interface.ts → core/src/components/content/content.interfaces.ts

@@ -1,4 +1,19 @@
 import type { GestureDetail } from '../../interface';
+import type { IonPadding } from '../../themes/themes.interfaces';
+
+export interface IonContentRecipe {
+  background?: string;
+  color?: string;
+
+  font?: {
+    family?: string;
+  };
+
+  overflow?: string;
+  padding?: IonPadding;
+}
+
+export interface IonContentConfig {}
 
 export interface ScrollBaseDetail {
   isScrolling: boolean;

core/src/components/content/content.scss

@@ -1,34 +1,27 @@
-@import "../../themes/native/native.globals";
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as color;
 
 // Content
 // --------------------------------------------------
 
 :host {
   /**
-   * @prop --background: Background of the content
+   * @prop --ion-content-background: Background of the content
    *
-   * @prop --color: Color of the content
+   * @prop --ion-content-color: Color of the content
    *
-   * @prop --padding-top: Top padding of the content
-   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
-   * @prop --padding-bottom: Bottom padding of the content
-   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
+   * @prop --ion-content-font-family: Font family of the content
    *
-   * @prop --keyboard-offset: Keyboard offset of the content
+   * @prop --ion-content-overflow: Overflow behavior of the scrollable area
    *
-   * @prop --offset-top: Offset top of the content
-   * @prop --offset-bottom: Offset bottom of the content
+   * @prop --ion-content-padding-top: Top padding of the content
+   * @prop --ion-content-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
+   * @prop --ion-content-padding-bottom: Bottom padding of the content
+   * @prop --ion-content-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
    */
-  --background: #{$background-color};
-  --color: #{$text-color};
-  --padding-top: 0px;
-  --padding-bottom: 0px;
-  --padding-start: 0px;
-  --padding-end: 0px;
-  --keyboard-offset: 0px;
-  --offset-top: 0px;
-  --offset-bottom: 0px;
-  --overflow: auto;
+  --internal-keyboard-offset: 0px;
+  --internal-offset-top: 0px;
+  --internal-offset-bottom: 0px;
 
   display: block;
   position: relative;
@@ -44,36 +37,26 @@
   padding: 0 !important;
   /* stylelint-enable */
 
-  font-family: $font-family-base;
+  font-family: var(--ion-content-font-family);
 
   contain: size style;
 }
 
-:host(.ion-color) .inner-scroll {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-#background-content {
-  @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px);
-
-  position: absolute;
-
-  background: var(--background);
-}
+// Content Inner Scroll
+// ---------------------------------------------
 
 .inner-scroll {
-  @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px);
-  @include padding(
-    calc(var(--padding-top) + var(--offset-top)),
-    var(--padding-end),
-    calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)),
-    var(--padding-start)
+  @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px);
+  @include mixins.padding(
+    calc(var(--ion-content-padding-top) + var(--internal-offset-top)),
+    var(--ion-content-padding-end),
+    calc(var(--ion-content-padding-bottom) + var(--internal-keyboard-offset) + var(--internal-offset-bottom)),
+    var(--ion-content-padding-start)
   );
 
   position: absolute;
 
-  color: var(--color);
+  color: var(--ion-content-color);
 
   box-sizing: border-box;
 
@@ -89,10 +72,16 @@
   touch-action: pan-x pan-y pinch-zoom;
 }
 
+:host(.ion-color) .inner-scroll {
+  background: color.current-color(base);
+  color: color.current-color(contrast);
+}
+
+// Content Scroll
+// ---------------------------------------------
+
 .scroll-y,
 .scroll-x {
-  -webkit-overflow-scrolling: touch;
-
   /**
    * This adds `.inner-scroll` as part of the
    * stacking context in WebKit. Without it,
@@ -115,15 +104,29 @@
 }
 
 .scroll-y {
-  overflow-y: var(--overflow);
+  overflow-y: var(--ion-content-overflow);
   overscroll-behavior-y: contain;
 }
 
 .scroll-x {
-  overflow-x: var(--overflow);
+  overflow-x: var(--ion-content-overflow);
   overscroll-behavior-x: contain;
 }
 
+// Content Background
+// ---------------------------------------------
+
+#background-content {
+  @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px);
+
+  position: absolute;
+
+  background: var(--ion-content-background);
+}
+
+// Content Overscroll
+// ---------------------------------------------
+
 .overscroll::before,
 .overscroll::after {
   position: absolute;
@@ -142,6 +145,9 @@
   top: -1px;
 }
 
+// Content Sizing
+// ---------------------------------------------
+
 :host(.content-sizing) {
   display: flex;
 
@@ -159,6 +165,7 @@
 
   contain: none;
 }
+
 :host(.content-sizing) .inner-scroll {
   position: relative;
 
@@ -172,11 +179,37 @@
   top: 0;
   bottom: 0;
 
-  margin-top: calc(var(--offset-top) * -1);
-  margin-bottom: calc(var(--offset-bottom) * -1);
+  margin-top: calc(var(--internal-offset-top) * -1);
+  margin-bottom: calc(var(--internal-offset-bottom) * -1);
 }
 
+// Content Slotted Elements
+// ---------------------------------------------
+
+// Elements with the "fixed" slot
+::slotted([slot="fixed"]) {
+  position: absolute;
+
+  /**
+   * When presenting ion-content inside of an ion-modal, the .inner-scroll
+   * element is composited. In WebKit, the fixed content is not composited
+   * causing it to appear under the main scrollable content as a result.
+   * The fixed content is correctly composited in other browsers. Adding
+   * the translateZ forces the fixed content to be composited so it correctly
+   * shows on top of the scrollable content. Setting a negative z-index will
+   * still allow the fixed content to appear under the scroll content if specified.
+   */
+  transform: translateZ(0);
+}
+
+// Content: iOS Mode Transition
+// The transition shadow effect is only animated by the iOS transition
+// builder, so these styles are only rendered in iOS mode.
+// ---------------------------------------------
+
 .transition-effect {
+  @include mixins.position-horizontal(-100%);
+
   display: none;
   position: absolute;
 
@@ -188,18 +221,6 @@
   pointer-events: none;
 }
 
-:host(.content-ltr) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  left: -100%;
-  /* stylelint-enable property-disallowed-list */
-}
-
-:host(.content-rtl) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  right: -100%;
-  /* stylelint-enable property-disallowed-list */
-}
-
 .transition-cover {
   position: absolute;
 
@@ -216,6 +237,8 @@
 }
 
 .transition-shadow {
+  @include mixins.position-horizontal(null, 0);
+
   display: block;
   position: absolute;
 
@@ -225,34 +248,6 @@
   box-shadow: inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);
 }
 
-:host(.content-ltr) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  right: 0;
-  /* stylelint-enable property-disallowed-list */
-}
-
 :host(.content-rtl) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  left: 0;
-  /* stylelint-enable property-disallowed-list */
-
   transform: scaleX(-1);
 }
-
-// Content: Fixed
-// --------------------------------------------------
-
-::slotted([slot="fixed"]) {
-  position: absolute;
-
-  /**
-   * When presenting ion-content inside of an ion-modal, the .inner-scroll
-   * element is composited. In WebKit, the fixed content is not composited
-   * causing it to appear under the main scrollable content as a result.
-   * The fixed content is correctly composited in other browsers. Adding
-   * the translateZ forces the fixed content to be composited so it correctly
-   * shows on top of the scrollable content. Setting a negative z-index will
-   * still allow the fixed content to appear under the scroll content if specified.
-   */
-  transform: translateZ(0);
-}