refactor(gallery): migrate to modular theming

core/api.txt

@@ -1056,11 +1056,11 @@ ion-gallery,prop,columns,BreakpointMap<string | number> | number | string,{
   xl: 8,
   xxl: 10,
 },false,false
-ion-gallery,prop,gap,BreakpointMap<string | number> | number | string,'16px',false,false
+ion-gallery,prop,gap,BreakpointMap<string | number> | number | string | undefined,undefined,false,false
 ion-gallery,prop,layout,"masonry" | "uniform",'uniform',false,false
 ion-gallery,prop,mode,"ios" | "md",undefined,false,false
 ion-gallery,prop,order,"best-fit" | "sequential" | undefined,undefined,false,false
-ion-gallery,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-gallery,css-prop,--ion-gallery-gap
 
 ion-gallery-item,shadow
 ion-gallery-item,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -21,7 +21,7 @@ import { IonColValue } from "./components/col/col.interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { FooterScrollEffect } from "./components/footer/footer-interface";
-import { GalleryColumns, GalleryGap } from "./components/gallery/gallery-interface";
+import { IonGalleryColumns, IonGalleryGap } from "./components/gallery/gallery.interface";
 import { HeaderScrollEffect } from "./components/header/header-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -68,7 +68,7 @@ export { IonColValue } from "./components/col/col.interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { FooterScrollEffect } from "./components/footer/footer-interface";
-export { GalleryColumns, GalleryGap } from "./components/gallery/gallery-interface";
+export { IonGalleryColumns, IonGalleryGap } from "./components/gallery/gallery.interface";
 export { HeaderScrollEffect } from "./components/header/header-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
@@ -1506,12 +1506,11 @@ export namespace Components {
           * The number of columns to display. Can be set as a number or an object of breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.
           * @default {   xs: 2,   sm: 3,   md: 4,   lg: 6,   xl: 8,   xxl: 10, }
          */
-        "columns": GalleryColumns;
+        "columns": IonGalleryColumns;
         /**
-          * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage) values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`, CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel values). Can also be set as a breakpoint map (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.
-          * @default '16px'
+          * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage) values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`, CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel values). Can also be set as a breakpoint map (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.  When unset, invalid, or missing for the active breakpoint, the gap comes from the theme's `--ion-gallery-gap` token.
          */
-        "gap": GalleryGap;
+        "gap"?: IonGalleryGap;
         /**
           * The visual layout of the gallery. When `uniform`, rows take up the height of the tallest item and are spaced evenly across the gallery. Additionally, items will have an aspect ratio of 1/1, forcing them to be square unless a height is explicitly set. When `masonry`, items will be positioned under each other with only the specified gap between them.
           * @default 'uniform'
@@ -1525,10 +1524,6 @@ export namespace Components {
           * The order in which items are positioned. Only applies when layout is `masonry`. When `sequential`, items are positioned in the order they are placed in the DOM. When `best-fit`, items are positioned under the column with the most available space. Defaults to `sequential` when layout is `masonry` and `order` is not explicitly set.
          */
         "order"?: 'sequential' | 'best-fit';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonGalleryItem {
         /**
@@ -7378,12 +7373,11 @@ declare namespace LocalJSX {
           * The number of columns to display. Can be set as a number or an object of breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.
           * @default {   xs: 2,   sm: 3,   md: 4,   lg: 6,   xl: 8,   xxl: 10, }
          */
-        "columns"?: GalleryColumns;
+        "columns"?: IonGalleryColumns;
         /**
-          * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage) values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`, CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel values). Can also be set as a breakpoint map (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.
-          * @default '16px'
+          * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage) values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`, CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel values). Can also be set as a breakpoint map (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.  Breakpoints are matched against the gallery's own width rather than the screen width. The width each breakpoint activates at can be changed with the `screenBreakpoints` config.  When unset, invalid, or missing for the active breakpoint, the gap comes from the theme's `--ion-gallery-gap` token.
          */
-        "gap"?: GalleryGap;
+        "gap"?: IonGalleryGap;
         /**
           * The visual layout of the gallery. When `uniform`, rows take up the height of the tallest item and are spaced evenly across the gallery. Additionally, items will have an aspect ratio of 1/1, forcing them to be square unless a height is explicitly set. When `masonry`, items will be positioned under each other with only the specified gap between them.
           * @default 'uniform'
@@ -7397,10 +7391,6 @@ declare namespace LocalJSX {
           * The order in which items are positioned. Only applies when layout is `masonry`. When `sequential`, items are positioned in the order they are placed in the DOM. When `best-fit`, items are positioned under the column with the most available space. Defaults to `sequential` when layout is `masonry` and `order` is not explicitly set.
          */
         "order"?: 'sequential' | 'best-fit';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonGalleryItem {
         /**

core/src/components/gallery-item/gallery-item.scss

@@ -47,5 +47,5 @@
 :host(.in-gallery-layout-masonry) {
   // The spacing between stacked items. Applies to all items except
   // for the last item in each column to remove any trailing space.
-  margin-bottom: var(--internal-gallery-gap, 16px);
+  margin-bottom: var(--internal-gallery-gap);
 }

core/src/components/gallery/gallery.constant.ts

@@ -0,0 +1,10 @@
+import type { IonGalleryColumns } from './gallery.interface';
+
+export const DEFAULT_COLUMNS = {
+  xs: 2,
+  sm: 3,
+  md: 4,
+  lg: 6,
+  xl: 8,
+  xxl: 10,
+} satisfies IonGalleryColumns;

core/src/components/gallery/gallery.interface.ts

@@ -0,0 +1,10 @@
+import type { BreakpointMap } from '@utils/breakpoints';
+
+export type IonGalleryRecipe = {
+  gap?: string;
+};
+
+export type IonGalleryBreakpointValues = BreakpointMap<string | number>;
+
+export type IonGalleryColumns = string | number | IonGalleryBreakpointValues;
+export type IonGalleryGap = string | number | IonGalleryBreakpointValues;

core/src/components/gallery/gallery.scss

@@ -2,6 +2,15 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --ion-gallery-gap: The space between gallery items when the `gap` property is not set
+   */
+
+  // The gap comes from the theme's token unless the `gap` property is set,
+  // in which case the component sets this variable inline. Gallery items
+  // inherit it for the spacing between stacked items in the masonry layout.
+  --internal-gallery-gap: var(--ion-gallery-gap);
+
   display: grid;
   grid-template-columns: repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr));
 }
@@ -10,7 +19,7 @@
 // --------------------------------------------------
 
 :host(.gallery-layout-uniform) {
-  gap: var(--internal-gallery-gap, 16px);
+  gap: var(--internal-gallery-gap);
 }
 
 // Layout: Masonry
@@ -19,7 +28,7 @@
 :host(.gallery-layout-masonry) {
   align-items: start;
 
-  column-gap: var(--internal-gallery-gap, 16px);
+  column-gap: var(--internal-gallery-gap);
   row-gap: 0;
 
   // Each item's row span is computed from its height, so the row track must be