From 20a4a3370c5e6f2e784b71869f0990b41f6d35b5 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 11 Mar 2026 16:15:19 -0700 Subject: [PATCH 01/19] feat(item-divider): add recipe and tokens --- .../item-divider/item-divider.ios.scss | 5 +- .../item-divider/item-divider.md.scss | 16 +- .../components/item-divider/item-divider.scss | 339 ++++++++++++++++-- .../components/item-divider/item-divider.tsx | 7 +- core/src/components/thumbnail/thumbnail.scss | 5 +- core/src/themes/ionic/default.tokens.ts | 284 ++++++++++++++- core/src/themes/ionic/shared.tokens.ts | 159 ++++++++ core/src/themes/ios/default.tokens.ts | 186 +++++++++- core/src/themes/ios/shared.tokens.ts | 84 +++++ core/src/themes/md/default.tokens.ts | 291 ++++++++++++++- core/src/themes/md/shared.tokens.ts | 162 +++++++++ core/src/themes/themes.interfaces.ts | 1 + core/src/utils/theme.ts | 19 + 13 files changed, 1506 insertions(+), 52 deletions(-) create mode 100644 core/src/themes/ionic/shared.tokens.ts create mode 100644 core/src/themes/ios/shared.tokens.ts create mode 100644 core/src/themes/md/shared.tokens.ts diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index d6d9007011e..66f09e7baeb 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -12,7 +12,7 @@ @include border-radius(0); - position: relative; + position: relative; // doesn't seem to be needed?, no issues with it being missing for sticky min-height: $item-divider-ios-min-height; @@ -33,6 +33,7 @@ ); } +// all of these are null :host([slot="end"]) { @include margin( $item-ios-slot-end-margin-top, @@ -82,7 +83,7 @@ font-size: $item-ios-paragraph-font-size; - line-height: normal; + line-height: normal; // not needed since it's the default text-overflow: inherit; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 02ead8975e6..f78959f15ef 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -11,22 +11,26 @@ --padding-start: #{$item-divider-md-padding-start}; --inner-padding-end: #{$item-divider-md-padding-end}; - min-height: $item-divider-md-min-height; + min-height: $item-divider-md-min-height; // for ionic this should be the default - border-bottom: $item-divider-md-border-bottom; + border-bottom: $item-divider-md-border-bottom; // for ionic this should be null - font-size: dynamic-font($item-divider-md-font-size); + font-size: dynamic-font($item-divider-md-font-size); // for ionic this should be the default } // Material Design Item Divider Slots // -------------------------------------------------- ::slotted([slot="start"]) { - @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end); + @include margin-horizontal( + $item-md-start-slot-margin-start, + //null + $item-md-start-slot-margin-end + ); // for ionic this should be 0 } ::slotted([slot="end"]) { - @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); + @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); //null } // Material Design Slotted Label @@ -52,7 +56,7 @@ } :host(.ion-color) ::slotted(ion-icon) { - color: current-color(contrast); + color: current-color(contrast); // for ionic this should be currentColor, inherit } ::slotted(ion-icon[slot]) { diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index aaae4b93d40..2a3e63fa8fc 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -1,6 +1,7 @@ -@import "../../themes/native/native.globals"; +@use "../../themes/mixins" as mixins; +@use "../../themes/functions.color" as colors; -// Item Divider +// Item Divider: Common Styles // -------------------------------------------------- :host { @@ -19,26 +20,29 @@ * @prop --inner-padding-bottom: Bottom inner padding of the item divider * @prop --inner-padding-start: Start inner padding of the item divider */ - --padding-top: 0px; - --padding-end: 0px; - --padding-bottom: 0px; - --padding-start: 0px; - --inner-padding-top: 0px; - --inner-padding-end: 0px; - --inner-padding-bottom: 0px; - --inner-padding-start: 0px; - - @include font-smoothing(); - @include margin(0); - @include padding(var(--padding-top), null, var(--padding-bottom), null); + --background: var(--ion-item-divider-background); + --color: var(--ion-item-divider-color); + --padding-top: var(--ion-item-divider-padding-top); + --padding-end: var(--ion-item-divider-padding-end); + --padding-bottom: var(--ion-item-divider-padding-bottom); + --padding-start: var(--ion-item-divider-padding-start); + --inner-padding-top: var(--ion-item-divider-inner-padding-top); + --inner-padding-end: var(--ion-item-divider-inner-padding-end); + --inner-padding-bottom: var(--ion-item-divider-inner-padding-bottom); + --inner-padding-start: var(--ion-item-divider-inner-padding-start); + + @include mixins.font-smoothing(); + @include mixins.margin(0); + @include mixins.padding(var(--padding-top), null, var(--padding-bottom), null); + @include mixins.border-radius(0); /* stylelint-disable */ - @include ltr() { + @include mixins.ltr() { padding-right: var(--padding-end); padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); } - @include rtl() { + @include mixins.rtl() { padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px)); padding-left: var(--padding-end); } @@ -51,19 +55,26 @@ width: 100%; + min-height: var(--ion-item-divider-min-height); + + border-bottom: var(--ion-item-divider-border-bottom); + background: var(--background); color: var(--color); - font-family: $font-family-base; + font-family: var(--ion-font-family, inherit); + font-size: var(--ion-item-divider-font-size); + font-weight: var(--ion-item-divider-font-weight); overflow: hidden; - z-index: $z-index-item-divider; + + z-index: var(--ion-item-divider-z-index, auto); box-sizing: border-box; } :host(.ion-color) { - background: current-color(base); - color: current-color(contrast); + background: colors.current-color("base"); + color: colors.current-color("contrast"); } :host(.item-divider-sticky) { @@ -72,16 +83,16 @@ } .item-divider-inner { - @include margin(0); - @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom), null); + @include mixins.margin(0); + @include mixins.padding(var(--inner-padding-top), null, var(--inner-padding-bottom), null); /* stylelint-disable */ - @include ltr() { + @include mixins.ltr() { padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)); padding-left: var(--inner-padding-start); } - @include rtl() { + @include mixins.rtl() { padding-right: var(--inner-padding-start); padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end)); } @@ -113,3 +124,283 @@ overflow: hidden; } + +// Item Divider Slots +// -------------------------------------------------- + +:host([slot="start"]) { + @include mixins.margin( + var(--ion-item-divider-leading-anchor-margin-top, revert-layer), + var(--ion-item-divider-leading-anchor-margin-end, revert-layer), + var(--ion-item-divider-leading-anchor-margin-bottom, revert-layer), + var(--ion-item-divider-leading-anchor-margin-start, revert-layer) + ); +} + +::slotted([slot="start"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-leading-edge-margin-start, revert-layer), + var(--ion-item-divider-leading-edge-margin-end, revert-layer) + ); // for ionic this should be 0 +} + +::slotted([slot="end"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-trailing-edge-margin-start, revert-layer), + var(--ion-item-divider-trailing-edge-margin-end, revert-layer) + ); +} + +// Slotted Label +// -------------------------------------------------- + +::slotted(ion-label) { + @include mixins.margin( + var(--ion-item-divider-label-margin-top), + var(--ion-item-divider-label-margin-end), + var(--ion-item-divider-label-margin-bottom), + var(--ion-item-divider-label-margin-start) + ); +} + +// Slotted Icon +// -------------------------------------------------- + +::slotted(ion-icon) { + color: var(--ion-item-divider-icon-default-color); + + font-size: var(--ion-item-divider-icon-font-size); +} + +:host(.ion-color) ::slotted(ion-icon) { + color: var(--ion-item-divider-icon-semantic-default-color); +} + +::slotted(ion-icon[slot="start"]) { + @include mixins.margin( + var(--ion-item-divider-icon-leading-edge-margin-top, revert-layer), + var(--ion-item-divider-icon-leading-edge-margin-end, revert-layer), + var(--ion-item-divider-icon-leading-edge-margin-bottom, revert-layer), + var(--ion-item-divider-icon-leading-edge-margin-start, revert-layer) + ); +} + +::slotted(ion-icon[slot="end"]) { + @include mixins.margin( + var(--ion-item-divider-icon-trailing-edge-margin-top, revert-layer), + var(--ion-item-divider-icon-trailing-edge-margin-end, revert-layer), + var(--ion-item-divider-icon-trailing-edge-margin-bottom, revert-layer), + var(--ion-item-divider-icon-trailing-edge-margin-start, revert-layer) + ); +} + +// Slotted Note +// -------------------------------------------------- + +::slotted(ion-note) { + @include mixins.margin( + var(--ion-item-divider-note-margin-top), + var(--ion-item-divider-note-margin-end), + var(--ion-item-divider-note-margin-bottom), + var(--ion-item-divider-note-margin-start) + ); + + align-self: flex-start; + + font-size: var(--ion-item-divider-note-font-size); +} + +::slotted(ion-note[slot]) { + @include mixins.padding( + var(--ion-item-divider-note-padding-top), + var(--ion-item-divider-note-padding-end), + var(--ion-item-divider-note-padding-bottom), + var(--ion-item-divider-note-padding-start) + ); +} + +// Slotted Avatar +// -------------------------------------------------- + +::slotted(ion-avatar) { + @include mixins.margin( + var(--ion-item-divider-avatar-margin-top), + var(--ion-item-divider-avatar-margin-end), + var(--ion-item-divider-avatar-margin-bottom), + var(--ion-item-divider-avatar-margin-start) + ); + + width: var(--ion-item-divider-avatar-width, revert-layer); + height: var(--ion-item-divider-avatar-height, revert-layer); +} + +::slotted(ion-avatar[slot="start"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-avatar-leading-edge-margin-start), + var(--ion-item-divider-avatar-leading-edge-margin-end) + ); +} + +::slotted(ion-avatar[slot="end"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-avatar-trailing-edge-margin-start), + var(--ion-item-divider-avatar-trailing-edge-margin-end) + ); +} + +// Slotted Thumbnail +// -------------------------------------------------- + +::slotted(ion-thumbnail) { + // TODO(): separate width and height tokens for thumbnails + --size: var(--ion-item-divider-thumbnail-width); + + @include mixins.margin( + var(--ion-item-divider-thumbnail-margin-top), + var(--ion-item-divider-thumbnail-margin-end), + var(--ion-item-divider-thumbnail-margin-bottom), + var(--ion-item-divider-thumbnail-margin-start) + ); +} + +::slotted(ion-thumbnail[slot="start"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-thumbnail-leading-edge-margin-start), + var(--ion-item-divider-thumbnail-leading-edge-margin-end) + ); +} + +::slotted(ion-thumbnail[slot="end"]) { + @include mixins.margin-horizontal( + var(--ion-item-divider-thumbnail-trailing-edge-margin-start), + var(--ion-item-divider-thumbnail-trailing-edge-margin-end) + ); +} + +// Slotted Content +// -------------------------------------------------- + +::slotted(h1) { + @include mixins.margin( + var(--ion-item-divider-header1-margin-top), + var(--ion-item-divider-header1-margin-end), + var(--ion-item-divider-header1-margin-bottom), + var(--ion-item-divider-header1-margin-start) + ); +} + +::slotted(h2) { + @include mixins.margin( + var(--ion-item-divider-header2-margin-top), + var(--ion-item-divider-header2-margin-end), + var(--ion-item-divider-header2-margin-bottom), + var(--ion-item-divider-header2-margin-start) + ); +} + +::slotted(h2:last-child) { + @include mixins.margin( + var(--ion-item-divider-header2-trailing-margin-top), + var(--ion-item-divider-header2-trailing-margin-end), + var(--ion-item-divider-header2-trailing-margin-bottom, 0), + var(--ion-item-divider-header2-trailing-margin-start) + ); +} + +::slotted(h3) { + @include mixins.margin( + var(--ion-item-divider-header3-margin-top), + var(--ion-item-divider-header3-margin-end), + var(--ion-item-divider-header3-margin-bottom), + var(--ion-item-divider-header3-margin-start) + ); +} + +::slotted(h3:last-child) { + @include mixins.margin( + var(--ion-item-divider-header3-trailing-margin-top), + var(--ion-item-divider-header3-trailing-margin-end), + var(--ion-item-divider-header3-trailing-margin-bottom, 0), + var(--ion-item-divider-header3-trailing-margin-start) + ); +} + +::slotted(h4) { + @include mixins.margin( + var(--ion-item-divider-header4-margin-top), + var(--ion-item-divider-header4-margin-end), + var(--ion-item-divider-header4-margin-bottom), + var(--ion-item-divider-header4-margin-start) + ); +} + +::slotted(h4:last-child) { + @include mixins.margin( + var(--ion-item-divider-header4-trailing-margin-top), + var(--ion-item-divider-header4-trailing-margin-end), + var(--ion-item-divider-header4-trailing-margin-bottom, 0), + var(--ion-item-divider-header4-trailing-margin-start) + ); +} + +::slotted(h5) { + @include mixins.margin( + var(--ion-item-divider-header5-margin-top), + var(--ion-item-divider-header5-margin-end), + var(--ion-item-divider-header5-margin-bottom), + var(--ion-item-divider-header5-margin-start) + ); +} + +::slotted(h5:last-child) { + @include mixins.margin( + var(--ion-item-divider-header5-trailing-margin-top), + var(--ion-item-divider-header5-trailing-margin-end), + var(--ion-item-divider-header5-trailing-margin-bottom, 0), + var(--ion-item-divider-header5-trailing-margin-start) + ); +} + +::slotted(h6) { + @include mixins.margin( + var(--ion-item-divider-header6-margin-top), + var(--ion-item-divider-header6-margin-end), + var(--ion-item-divider-header6-margin-bottom), + var(--ion-item-divider-header6-margin-start) + ); +} + +::slotted(h6:last-child) { + @include mixins.margin( + var(--ion-item-divider-header6-trailing-margin-top), + var(--ion-item-divider-header6-trailing-margin-end), + var(--ion-item-divider-header6-trailing-margin-bottom, 0), + var(--ion-item-divider-header6-trailing-margin-start) + ); +} + +::slotted(p) { + @include mixins.margin( + var(--ion-item-divider-paragraph-margin-top), + var(--ion-item-divider-paragraph-margin-end), + var(--ion-item-divider-paragraph-margin-bottom), + var(--ion-item-divider-paragraph-margin-start) + ); + + color: var(--ion-item-divider-paragraph-color); + + font-size: var(--ion-item-divider-paragraph-font-size); + + text-overflow: var(--ion-item-divider-paragraph-text-overflow); + + overflow: var(--ion-item-divider-paragraph-overflow); // native are the same, can ionic be the same? +} + +::slotted(p:last-child) { + @include mixins.margin( + var(--ion-item-divider-paragraph-trailing-margin-top), + var(--ion-item-divider-paragraph-trailing-margin-end), + var(--ion-item-divider-paragraph-trailing-margin-bottom, 0), + var(--ion-item-divider-paragraph-trailing-margin-start) + ); +} diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 96198e6f1a9..3f992ed2dbf 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -15,11 +15,7 @@ import type { Color } from '../../interface'; */ @Component({ tag: 'ion-item-divider', - styleUrls: { - ios: 'item-divider.ios.scss', - md: 'item-divider.md.scss', - ionic: 'item-divider.md.scss', - }, + styleUrl: 'item-divider.scss', shadow: true, }) export class ItemDivider implements ComponentInterface { @@ -43,6 +39,7 @@ export class ItemDivider implements ComponentInterface { render() { const theme = getIonTheme(this); + console.log('theme', theme); return ( { + return `${size / baselinePixelSize}${unit}`; +}; From 829581951379758753dd0b60695f1686d093fe81 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 11 Mar 2026 18:20:34 -0700 Subject: [PATCH 02/19] chore(): run build --- core/api.txt | 40 ++++++++++------------------------------ 1 file changed, 10 insertions(+), 30 deletions(-) diff --git a/core/api.txt b/core/api.txt index 9551b242b94..04a418968d9 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1245,36 +1245,16 @@ ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | ion-item-divider,prop,mode,"ios" | "md",undefined,false,false ion-item-divider,prop,sticky,boolean,false,false,false ion-item-divider,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-item-divider,css-prop,--background,ionic -ion-item-divider,css-prop,--background,ios -ion-item-divider,css-prop,--background,md -ion-item-divider,css-prop,--color,ionic -ion-item-divider,css-prop,--color,ios -ion-item-divider,css-prop,--color,md -ion-item-divider,css-prop,--inner-padding-bottom,ionic -ion-item-divider,css-prop,--inner-padding-bottom,ios -ion-item-divider,css-prop,--inner-padding-bottom,md -ion-item-divider,css-prop,--inner-padding-end,ionic -ion-item-divider,css-prop,--inner-padding-end,ios -ion-item-divider,css-prop,--inner-padding-end,md -ion-item-divider,css-prop,--inner-padding-start,ionic -ion-item-divider,css-prop,--inner-padding-start,ios -ion-item-divider,css-prop,--inner-padding-start,md -ion-item-divider,css-prop,--inner-padding-top,ionic -ion-item-divider,css-prop,--inner-padding-top,ios -ion-item-divider,css-prop,--inner-padding-top,md -ion-item-divider,css-prop,--padding-bottom,ionic -ion-item-divider,css-prop,--padding-bottom,ios -ion-item-divider,css-prop,--padding-bottom,md -ion-item-divider,css-prop,--padding-end,ionic -ion-item-divider,css-prop,--padding-end,ios -ion-item-divider,css-prop,--padding-end,md -ion-item-divider,css-prop,--padding-start,ionic -ion-item-divider,css-prop,--padding-start,ios -ion-item-divider,css-prop,--padding-start,md -ion-item-divider,css-prop,--padding-top,ionic -ion-item-divider,css-prop,--padding-top,ios -ion-item-divider,css-prop,--padding-top,md +ion-item-divider,css-prop,--background +ion-item-divider,css-prop,--color +ion-item-divider,css-prop,--inner-padding-bottom +ion-item-divider,css-prop,--inner-padding-end +ion-item-divider,css-prop,--inner-padding-start +ion-item-divider,css-prop,--inner-padding-top +ion-item-divider,css-prop,--padding-bottom +ion-item-divider,css-prop,--padding-end +ion-item-divider,css-prop,--padding-start +ion-item-divider,css-prop,--padding-top ion-item-group,none ion-item-group,prop,mode,"ios" | "md",undefined,false,false From 38145a3b3e03d47d3a2da957c3a9ac1801f6471d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 09:27:21 -0700 Subject: [PATCH 03/19] chore(item-divider): remove theme sass files --- .../item-divider/item-divider.ios.scss | 99 ----------- .../item-divider/item-divider.ios.vars.scss | 26 --- .../item-divider/item-divider.md.scss | 164 ------------------ .../item-divider/item-divider.md.vars.scss | 26 --- .../components/item-divider/item-divider.tsx | 2 +- 5 files changed, 1 insertion(+), 316 deletions(-) delete mode 100644 core/src/components/item-divider/item-divider.ios.scss delete mode 100644 core/src/components/item-divider/item-divider.ios.vars.scss delete mode 100644 core/src/components/item-divider/item-divider.md.scss delete mode 100644 core/src/components/item-divider/item-divider.md.vars.scss diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss deleted file mode 100644 index 66f09e7baeb..00000000000 --- a/core/src/components/item-divider/item-divider.ios.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "./item-divider"; -@import "./item-divider.ios.vars"; - -// iOS Item Divider -// -------------------------------------------------- - -:host { - --background: #{$item-divider-ios-background}; - --color: #{$item-divider-ios-color}; - --padding-start: #{$item-divider-ios-padding-start}; - --inner-padding-end: #{$item-divider-ios-padding-end * 0.5}; - - @include border-radius(0); - - position: relative; // doesn't seem to be needed?, no issues with it being missing for sticky - - min-height: $item-divider-ios-min-height; - - font-size: $item-divider-ios-font-size; - - font-weight: $item-divider-ios-font-weight; -} - -// iOS Item Divider Slots -// -------------------------------------------------- - -:host([slot="start"]) { - @include margin( - $item-ios-slot-start-margin-top, - $item-ios-slot-start-margin-end, - $item-ios-slot-start-margin-bottom, - $item-ios-slot-start-margin-start - ); -} - -// all of these are null -:host([slot="end"]) { - @include margin( - $item-ios-slot-end-margin-top, - $item-ios-slot-end-margin-end, - $item-ios-slot-end-margin-bottom, - $item-ios-slot-end-margin-start - ); -} - -::slotted(ion-icon[slot="start"]), -::slotted(ion-icon[slot="end"]) { - @include margin( - $item-ios-icon-slot-margin-top, - $item-ios-icon-slot-margin-end, - $item-ios-icon-slot-margin-bottom, - $item-ios-icon-slot-margin-start - ); -} - -// iOS Item Divider Content -// -------------------------------------------------- - -::slotted(h1) { - @include margin(0, 0, 2px); -} - -::slotted(h2) { - @include margin(0, 0, 2px); -} - -::slotted(h3), -::slotted(h4), -::slotted(h5), -::slotted(h6) { - @include margin(0, 0, 3px); -} - -::slotted(p) { - @include margin( - $item-ios-paragraph-margin-top, - $item-ios-paragraph-margin-end, - $item-ios-paragraph-margin-bottom, - $item-ios-paragraph-margin-start - ); - - color: $item-ios-paragraph-text-color; - - font-size: $item-ios-paragraph-font-size; - - line-height: normal; // not needed since it's the default - - text-overflow: inherit; - - overflow: inherit; -} - -::slotted(h2:last-child) ::slotted(h3:last-child), -::slotted(h4:last-child), -::slotted(h5:last-child), -::slotted(h6:last-child), -::slotted(p:last-child) { - @include margin(null, null, 0, null); -} diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss deleted file mode 100644 index 89901c1f13e..00000000000 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../themes/native/native.globals.ios"; -@import "../item/item.ios.vars"; - -// iOS Item Divider -// -------------------------------------------------- - -/// @prop - Minimum height for the divider -$item-divider-ios-min-height: 28px; - -/// @prop - Font size of the item -$item-divider-ios-font-size: dynamic-font(17px); - -/// @prop - Font weight of the item -$item-divider-ios-font-weight: 600; - -/// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100; - -/// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150; - -/// @prop - Padding start for the divider -$item-divider-ios-padding-start: $item-ios-padding-start; - -/// @prop - Padding end for the divider -$item-divider-ios-padding-end: $item-ios-padding-end; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss deleted file mode 100644 index f78959f15ef..00000000000 --- a/core/src/components/item-divider/item-divider.md.scss +++ /dev/null @@ -1,164 +0,0 @@ -@use "sass:math"; -@import "./item-divider"; -@import "./item-divider.md.vars"; - -// Material Design Item Divider -// -------------------------------------------------- - -:host { - --background: #{$item-divider-md-background}; - --color: #{$item-divider-md-color}; - --padding-start: #{$item-divider-md-padding-start}; - --inner-padding-end: #{$item-divider-md-padding-end}; - - min-height: $item-divider-md-min-height; // for ionic this should be the default - - border-bottom: $item-divider-md-border-bottom; // for ionic this should be null - - font-size: dynamic-font($item-divider-md-font-size); // for ionic this should be the default -} - -// Material Design Item Divider Slots -// -------------------------------------------------- - -::slotted([slot="start"]) { - @include margin-horizontal( - $item-md-start-slot-margin-start, - //null - $item-md-start-slot-margin-end - ); // for ionic this should be 0 -} - -::slotted([slot="end"]) { - @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); //null -} - -// Material Design Slotted Label -// -------------------------------------------------- - -::slotted(ion-label) { - @include margin(13px, 0, 10px, 0); -} - -// Material Design Slotted Icon -// -------------------------------------------------- - -::slotted(ion-icon) { - color: $item-md-icon-slot-color; - - // The icon's font size should use em units to support - // font scaling but evaluate to 24px at 100% font size. - // The value in em units is calculated by dividing - // the icon's font size in pixels by the item divider's - // font size in pixels. - // e.g. 24px / 14px = 1.7142857143em - font-size: math.div($item-md-icon-slot-font-size, $item-divider-md-font-size) * 1em; -} - -:host(.ion-color) ::slotted(ion-icon) { - color: current-color(contrast); // for ionic this should be currentColor, inherit -} - -::slotted(ion-icon[slot]) { - @include margin( - $item-md-icon-slot-margin-top, - $item-md-icon-slot-margin-end, - $item-md-icon-slot-margin-bottom, - $item-md-icon-slot-margin-start - ); -} - -::slotted(ion-icon[slot="start"]) { - @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end); -} - -::slotted(ion-icon[slot="end"]) { - @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end); -} - -// Material Design Slotted Note -// -------------------------------------------------- - -::slotted(ion-note) { - @include margin(0); - - align-self: flex-start; - - font-size: $item-md-note-slot-font-size; -} - -::slotted(ion-note[slot]) { - @include padding( - $item-md-note-slot-padding-top, - $item-md-note-slot-padding-end, - $item-md-note-slot-padding-bottom, - $item-md-note-slot-padding-start - ); -} - -// Material Design Item Divider Avatar -// -------------------------------------------------- - -::slotted(ion-avatar) { - width: $item-md-avatar-width; - height: $item-md-avatar-height; -} - -// Material Design Item Divider Thumbnail -// -------------------------------------------------- - -::slotted(ion-thumbnail) { - --size: #{$item-md-thumbnail-size}; -} - -// Material Design Item Divider Avatar/Thumbnail -// -------------------------------------------------- - -::slotted(ion-avatar), -::slotted(ion-thumbnail) { - @include margin( - $item-md-media-slot-margin-top, - $item-md-media-slot-margin-end, - $item-md-media-slot-margin-bottom, - $item-md-media-slot-margin-start - ); -} - -::slotted(ion-avatar[slot="start"]), -::slotted(ion-thumbnail[slot="start"]) { - @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end); -} - -::slotted(ion-avatar[slot="end"]), -::slotted(ion-thumbnail[slot="end"]) { - @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end); -} - -// Material Design Item Divider Content -// -------------------------------------------------- - -::slotted(h1) { - @include margin(0, 0, 2px); -} - -::slotted(h2) { - @include margin(2px, 0); -} - -::slotted(h3, h4, h5, h6) { - @include margin(2px, 0); -} - -::slotted(p) { - @include margin(0, 0, 2px); - - color: $item-md-paragraph-text-color; - - font-size: dynamic-font(14px); - - line-height: normal; - - text-overflow: inherit; - - overflow: inherit; -} diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss deleted file mode 100644 index 97a58f09b24..00000000000 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../themes/native/native.globals.md"; -@import "../item/item.md.vars"; - -// Material Design Item Divider -// -------------------------------------------------- - -/// @prop - Minimum height for the divider -$item-divider-md-min-height: 30px; - -/// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600; - -/// @prop - Background for the divider -$item-divider-md-background: $background-color; - -/// @prop - Font size for the divider -$item-divider-md-font-size: 14px; - -/// @prop - Border bottom for the divider -$item-divider-md-border-bottom: 1px solid $item-md-border-color; - -/// @prop - Padding start for the divider -$item-divider-md-padding-start: $item-md-padding-start; - -/// @prop - Padding end for the divider -$item-divider-md-padding-end: $item-md-padding-end; diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 3f992ed2dbf..9ed9477a5f4 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -39,7 +39,7 @@ export class ItemDivider implements ComponentInterface { render() { const theme = getIonTheme(this); - console.log('theme', theme); + return ( Date: Thu, 12 Mar 2026 09:31:30 -0700 Subject: [PATCH 04/19] feat(item-divider): remove theme usage --- core/api.txt | 1 - core/src/components.d.ts | 8 -------- core/src/components/item-divider/item-divider.tsx | 9 +++------ packages/angular/src/directives/proxies.ts | 4 ++-- packages/angular/standalone/src/directives/proxies.ts | 4 ++-- 5 files changed, 7 insertions(+), 19 deletions(-) diff --git a/core/api.txt b/core/api.txt index 04a418968d9..23d02b891b0 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1244,7 +1244,6 @@ ion-item-divider,shadow ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-item-divider,prop,mode,"ios" | "md",undefined,false,false ion-item-divider,prop,sticky,boolean,false,false,false -ion-item-divider,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-item-divider,css-prop,--background ion-item-divider,css-prop,--color ion-item-divider,css-prop,--inner-padding-bottom diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5bc8b061e63..b779cda88b2 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1920,10 +1920,6 @@ export namespace Components { * @default false */ "sticky": boolean; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonItemGroup { /** @@ -7918,10 +7914,6 @@ declare namespace LocalJSX { * @default false */ "sticky"?: boolean; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonItemGroup { /** diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 9ed9477a5f4..be520226478 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -2,12 +2,10 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, h } from '@stencil/core'; import { createColorClasses } from '@utils/theme'; -import { getIonTheme } from '../../global/ionic-global'; import type { Color } from '../../interface'; /** * @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. * * @slot - Content is placed between the named slots if provided without a slot. * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL. @@ -38,13 +36,12 @@ export class ItemDivider implements ComponentInterface { @Prop() sticky = false; render() { - const theme = getIonTheme(this); + const { color, sticky } = this; return ( diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 19731f54a06..806eccc98f8 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1150,14 +1150,14 @@ export declare interface IonItem extends Components.IonItem {} @ProxyCmp({ - inputs: ['color', 'mode', 'sticky', 'theme'] + inputs: ['color', 'mode', 'sticky'] }) @Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'sticky', 'theme'], + inputs: ['color', 'mode', 'sticky'], }) export class IonItemDivider { protected el: HTMLIonItemDividerElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 15cfacbfdc1..a8440cac6d5 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1058,14 +1058,14 @@ export declare interface IonItem extends Components.IonItem {} @ProxyCmp({ defineCustomElementFn: defineIonItemDivider, - inputs: ['color', 'mode', 'sticky', 'theme'] + inputs: ['color', 'mode', 'sticky'] }) @Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'sticky', 'theme'], + inputs: ['color', 'mode', 'sticky'], standalone: true }) export class IonItemDivider { From 4b170f0303d718d2861c76e22c74371cd787b682 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 09:37:37 -0700 Subject: [PATCH 05/19] docs(item-divider): add todo for border --- core/src/components/item-divider/item-divider.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 2a3e63fa8fc..e26058e87a5 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -57,6 +57,7 @@ min-height: var(--ion-item-divider-min-height); + // TODO(FW-6848): remove border-bottom and replace it with the `ion-divider` border-bottom: var(--ion-item-divider-border-bottom); background: var(--background); From c66561e38b638d69b7bc474b5fc7d4867b7a4404 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 11:01:57 -0700 Subject: [PATCH 06/19] refactor(tokens): rearrange shared tokens --- core/src/themes/base/shared.tokens.ts | 23 +++++++++++++ core/src/themes/ionic/default.tokens.ts | 11 ++++--- core/src/themes/ionic/shared.tokens.ts | 35 ++++++-------------- core/src/themes/ios/default.tokens.ts | 17 +++++----- core/src/themes/ios/shared.tokens.ts | 29 ++++------------- core/src/themes/md/default.tokens.ts | 21 ++++++------ core/src/themes/md/shared.tokens.ts | 43 ++++++++++--------------- 7 files changed, 82 insertions(+), 97 deletions(-) create mode 100644 core/src/themes/base/shared.tokens.ts diff --git a/core/src/themes/base/shared.tokens.ts b/core/src/themes/base/shared.tokens.ts new file mode 100644 index 00000000000..e3e614c195b --- /dev/null +++ b/core/src/themes/base/shared.tokens.ts @@ -0,0 +1,23 @@ +/** + * Tokens shared between the theme files. + */ + +const hexColors = { + white: '#ffffff', + black: '#000000', +}; + +const rgbColors = { + white: '255, 255, 255', + black: '0, 0, 0', +}; + +export const colors = { + ...hexColors, + + backgroundColor: `var(--ion-background-color, ${hexColors.white})`, + backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`, + + textColor: `var(--ion-text-color, ${hexColors.black})`, + textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`, +}; diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index b26869a2ce5..2571c30cdfd 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -1,10 +1,11 @@ import { currentColor, mix, dynamicFont } from '../../utils/theme'; import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; +import { colors as baseColors } from '../base/shared.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; import { lightTheme } from './light.tokens'; -import { fontSizes, colors, components } from './shared.tokens'; +import { components } from './shared.tokens'; export const defaultTheme: DefaultTheme = { ...baseDefaultTheme, @@ -264,8 +265,8 @@ export const defaultTheme: DefaultTheme = { }, IonItemDivider: { - background: `var(--ion-background-color, ${colors.white})`, - color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`, + background: baseColors.backgroundColor, + color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`, minHeight: 'var(--ion-scaling-750)', zIndex: 100, @@ -290,7 +291,7 @@ export const defaultTheme: DefaultTheme = { }, font: { - size: dynamicFont(fontSizes.itemDividerBase), + size: dynamicFont(components.itemDivider.font.size), }, leading: { @@ -332,7 +333,7 @@ export const defaultTheme: DefaultTheme = { * font size in pixels. * e.g. 24px / 14px = 1.7142857143em */ - size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`, + size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`, }, leading: { diff --git a/core/src/themes/ionic/shared.tokens.ts b/core/src/themes/ionic/shared.tokens.ts index 506b70a07dc..361f59a86d8 100644 --- a/core/src/themes/ionic/shared.tokens.ts +++ b/core/src/themes/ionic/shared.tokens.ts @@ -4,30 +4,7 @@ */ import { mix, rgba } from '../../utils/theme'; - -const hexColors = { - white: '#ffffff', - black: '#000000', -}; - -const rgbColors = { - white: '255, 255, 255', - black: '0, 0, 0', -}; - -export const colors = { - ...hexColors, - - backgroundColor: `var(--ion-background-color, ${hexColors.white})`, - backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`, - - textColor: `var(--ion-text-color, ${hexColors.black})`, - textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`, -}; - -export const fontSizes = { - itemDividerBase: 14, -}; +import { colors as baseColors } from '../base/shared.tokens'; export const components = { item: { @@ -68,7 +45,7 @@ export const components = { icon: { slot: { - color: rgba(colors.textColorRgb, 0.54), + color: rgba(baseColors.textColorRgb, 0.54), font: { size: 24, @@ -153,7 +130,13 @@ export const components = { }, paragraph: { - color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`, + color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`, + }, + }, + + itemDivider: { + font: { + size: 14, }, }, }; diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index a819503f874..3d7cefc7af4 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -1,12 +1,13 @@ import { rgba, currentColor, clamp, mix, dynamicFont } from '../../utils/theme'; import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; +import { colors as baseColors } from '../base/shared.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; import { highContrastDarkTheme } from './high-contrast-dark.tokens'; import { highContrastTheme } from './high-contrast.tokens'; import { lightTheme } from './light.tokens'; -import { fontSizes, colors, components } from './shared.tokens'; +import { global, components } from './shared.tokens'; export const defaultTheme: DefaultTheme = { ...baseDefaultTheme, @@ -113,7 +114,7 @@ export const defaultTheme: DefaultTheme = { font: { size: clamp( 'var(--ion-font-size-xs)', - `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`, + `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`, 'var(--ion-font-size-xl)' ), }, @@ -123,7 +124,7 @@ export const defaultTheme: DefaultTheme = { minHeight: 'var(--ion-scaling-md)', font: { - size: clamp('13px', `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`, '22px'), + size: clamp('13px', `${(components.chip.font.size / global.root).toFixed(2)}rem`, '22px'), }, }, }, @@ -351,7 +352,7 @@ export const defaultTheme: DefaultTheme = { color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54), font: { - size: `${(20 / fontSizes.chipBase).toFixed(2)}em`, + size: `${(20 / components.chip.font.size).toFixed(2)}em`, }, // Targets `:first-child` @@ -376,8 +377,8 @@ export const defaultTheme: DefaultTheme = { }, avatar: { - height: `${(24 / fontSizes.chipBase).toFixed(2)}em`, - width: `${(24 / fontSizes.chipBase).toFixed(2)}em`, + height: `${(24 / components.chip.font.size).toFixed(2)}em`, + width: `${(24 / components.chip.font.size).toFixed(2)}em`, // Targets `:first-child` leading: { @@ -402,8 +403,8 @@ export const defaultTheme: DefaultTheme = { }, IonItemDivider: { - background: `var(--ion-background-color-step-100, ${mix(colors.black, colors.white, '90%')})`, - color: `var(--ion-text-color-step-150, ${mix(colors.white, colors.black, '85%')})`, + background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`, + color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`, minHeight: 'var(--ion-scaling-sm)', padding: { diff --git a/core/src/themes/ios/shared.tokens.ts b/core/src/themes/ios/shared.tokens.ts index 0be264607a2..c019ae35cf1 100644 --- a/core/src/themes/ios/shared.tokens.ts +++ b/core/src/themes/ios/shared.tokens.ts @@ -6,32 +6,17 @@ import { dynamicFont } from '../../utils/theme'; import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; -const hexColors = { - white: '#ffffff', - black: '#000000', -}; - -const rgbColors = { - white: '255, 255, 255', - black: '0, 0, 0', -}; - -export const colors = { - ...hexColors, - - backgroundColor: `var(--ion-background-color, ${hexColors.white})`, - backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`, - - textColor: `var(--ion-text-color, ${hexColors.black})`, - textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`, -}; - -export const fontSizes = { - chipBase: 14, +export const global = { root: parseFloat(baseDefaultTheme.fontSize!.root as string), }; export const components = { + chip: { + font: { + size: 14, + }, + }, + item: { padding: { start: 'var(--ion-spacing-lg)', diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index 64614cf842b..38bcb0fda64 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -1,12 +1,13 @@ import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme'; import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; +import { colors as baseColors } from '../base/shared.tokens'; import type { DefaultTheme } from '../themes.interfaces'; import { darkTheme } from './dark.tokens'; import { highContrastDarkTheme } from './high-contrast-dark.tokens'; import { highContrastTheme } from './high-contrast.tokens'; import { lightTheme } from './light.tokens'; -import { fontSizes, colors, components } from './shared.tokens'; +import { global, components } from './shared.tokens'; export const defaultTheme: DefaultTheme = { ...baseDefaultTheme, @@ -114,14 +115,14 @@ export const defaultTheme: DefaultTheme = { minHeight: 'var(--ion-scaling-xs)', font: { - size: `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`, + size: `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`, }, }, large: { minHeight: 'var(--ion-scaling-md)', font: { - size: `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`, + size: `${(components.chip.font.size / global.root).toFixed(2)}rem`, }, }, }, @@ -349,7 +350,7 @@ export const defaultTheme: DefaultTheme = { color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54), font: { - size: `${(20 / fontSizes.chipBase).toFixed(2)}em`, + size: `${(20 / components.chip.font.size).toFixed(2)}em`, }, leading: { @@ -373,8 +374,8 @@ export const defaultTheme: DefaultTheme = { // Targets `ion-avatar` avatar: { - height: `${(24 / fontSizes.chipBase).toFixed(2)}em`, - width: `${(24 / fontSizes.chipBase).toFixed(2)}em`, + height: `${(24 / components.chip.font.size).toFixed(2)}em`, + width: `${(24 / components.chip.font.size).toFixed(2)}em`, leading: { margin: { @@ -397,8 +398,8 @@ export const defaultTheme: DefaultTheme = { }, IonItemDivider: { - background: `var(--ion-background-color, ${colors.white})`, - color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`, + background: baseColors.backgroundColor, + color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`, minHeight: 'var(--ion-scaling-750)', zIndex: 100, @@ -423,7 +424,7 @@ export const defaultTheme: DefaultTheme = { }, font: { - size: dynamicFont(fontSizes.itemDividerBase), + size: dynamicFont(components.itemDivider.font.size), }, leading: { @@ -465,7 +466,7 @@ export const defaultTheme: DefaultTheme = { * font size in pixels. * e.g. 24px / 14px = 1.7142857143em */ - size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`, + size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`, }, leading: { diff --git a/core/src/themes/md/shared.tokens.ts b/core/src/themes/md/shared.tokens.ts index 97b59d749c4..dc8361e91ad 100644 --- a/core/src/themes/md/shared.tokens.ts +++ b/core/src/themes/md/shared.tokens.ts @@ -5,34 +5,19 @@ import { mix, rgba } from '../../utils/theme'; import { defaultTheme as baseDefaultTheme } from '../base/default.tokens'; +import { colors as baseColors } from '../base/shared.tokens'; -const hexColors = { - white: '#ffffff', - black: '#000000', -}; - -const rgbColors = { - white: '255, 255, 255', - black: '0, 0, 0', -}; - -export const colors = { - ...hexColors, - - backgroundColor: `var(--ion-background-color, ${hexColors.white})`, - backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`, - - textColor: `var(--ion-text-color, ${hexColors.black})`, - textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`, -}; - -export const fontSizes = { - chipBase: 14, +export const global = { root: parseFloat(baseDefaultTheme.fontSize!.root as string), - itemDividerBase: 14, }; export const components = { + chip: { + font: { + size: 14, + }, + }, + item: { padding: { start: 'var(--ion-spacing-lg)', @@ -46,7 +31,7 @@ export const components = { border: { color: `var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, ${rgba( - '0, 0, 0', + baseColors.textColorRgb, 0.13 )})))`, }, @@ -71,7 +56,7 @@ export const components = { icon: { slot: { - color: rgba(colors.textColorRgb, 0.54), + color: rgba(baseColors.textColorRgb, 0.54), font: { size: 24, @@ -156,7 +141,13 @@ export const components = { }, paragraph: { - color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`, + color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`, }, }, + + itemDivider: { + font: { + size: 14, + } + } }; From fda52f5fde69b8dace0bb782ab28ff87d3dfde85 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 11:05:30 -0700 Subject: [PATCH 07/19] docs(tokens): update shared file comments --- core/src/themes/base/shared.tokens.ts | 2 +- core/src/themes/ionic/shared.tokens.ts | 3 +-- core/src/themes/ios/shared.tokens.ts | 3 +-- core/src/themes/md/shared.tokens.ts | 7 +++---- 4 files changed, 6 insertions(+), 9 deletions(-) diff --git a/core/src/themes/base/shared.tokens.ts b/core/src/themes/base/shared.tokens.ts index e3e614c195b..cad22cab922 100644 --- a/core/src/themes/base/shared.tokens.ts +++ b/core/src/themes/base/shared.tokens.ts @@ -1,5 +1,5 @@ /** - * Tokens shared between the theme files. + * Common tokens utilized multiple times across all theme files. */ const hexColors = { diff --git a/core/src/themes/ionic/shared.tokens.ts b/core/src/themes/ionic/shared.tokens.ts index 361f59a86d8..33e7004e8d9 100644 --- a/core/src/themes/ionic/shared.tokens.ts +++ b/core/src/themes/ionic/shared.tokens.ts @@ -1,6 +1,5 @@ /** - * Tokens shared between the MD theme files or are being used in the files - * multiple times. + * Common tokens utilized multiple times across `ionic` theme files. */ import { mix, rgba } from '../../utils/theme'; diff --git a/core/src/themes/ios/shared.tokens.ts b/core/src/themes/ios/shared.tokens.ts index c019ae35cf1..17379e39f14 100644 --- a/core/src/themes/ios/shared.tokens.ts +++ b/core/src/themes/ios/shared.tokens.ts @@ -1,6 +1,5 @@ /** - * Tokens shared between the iOS theme files or are being used in the files - * multiple times. + * Common tokens utilized multiple times across `ios` theme files. */ import { dynamicFont } from '../../utils/theme'; diff --git a/core/src/themes/md/shared.tokens.ts b/core/src/themes/md/shared.tokens.ts index dc8361e91ad..cf36676db0e 100644 --- a/core/src/themes/md/shared.tokens.ts +++ b/core/src/themes/md/shared.tokens.ts @@ -1,6 +1,5 @@ /** - * Tokens shared between the MD theme files or are being used in the files - * multiple times. + * Common tokens utilized multiple times across `md` theme files. */ import { mix, rgba } from '../../utils/theme'; @@ -148,6 +147,6 @@ export const components = { itemDivider: { font: { size: 14, - } - } + }, + }, }; From eac584c6fd844397316462267cd86b03b968f56d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 11:36:00 -0700 Subject: [PATCH 08/19] test(item): update divider snapshots --- core/src/components/chip/chip.scss | 1 - .../components/item-divider/item-divider.scss | 10 ++++----- .../components/item/test/dividers/index.html | 19 ++++++++++++++++++ ...iders-diff-ios-ltr-Mobile-Chrome-linux.png | Bin 40026 -> 43678 bytes ...ders-diff-ios-ltr-Mobile-Firefox-linux.png | Bin 57320 -> 61403 bytes ...iders-diff-ios-ltr-Mobile-Safari-linux.png | Bin 54019 -> 58929 bytes ...iders-diff-ios-rtl-Mobile-Chrome-linux.png | Bin 40008 -> 43629 bytes ...ders-diff-ios-rtl-Mobile-Firefox-linux.png | Bin 57577 -> 61529 bytes ...iders-diff-ios-rtl-Mobile-Safari-linux.png | Bin 54914 -> 60125 bytes ...viders-diff-md-ltr-Mobile-Chrome-linux.png | Bin 35848 -> 39760 bytes ...iders-diff-md-ltr-Mobile-Firefox-linux.png | Bin 50169 -> 55158 bytes ...viders-diff-md-ltr-Mobile-Safari-linux.png | Bin 49390 -> 54604 bytes ...viders-diff-md-rtl-Mobile-Chrome-linux.png | Bin 35839 -> 39722 bytes ...iders-diff-md-rtl-Mobile-Firefox-linux.png | Bin 51144 -> 55744 bytes ...viders-diff-md-rtl-Mobile-Safari-linux.png | Bin 49073 -> 54132 bytes 15 files changed, 24 insertions(+), 6 deletions(-) diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index a3056ea97e2..df998204af9 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -1,5 +1,4 @@ @use "../../themes/mixins" as mixins; -@use "../../themes/functions.color" as colors; // Chip: Common Styles // -------------------------------------------------- diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index e26058e87a5..25fc7616fa9 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -303,7 +303,7 @@ @include mixins.margin( var(--ion-item-divider-header2-trailing-margin-top), var(--ion-item-divider-header2-trailing-margin-end), - var(--ion-item-divider-header2-trailing-margin-bottom, 0), + var(--ion-item-divider-header2-trailing-margin-bottom), var(--ion-item-divider-header2-trailing-margin-start) ); } @@ -321,7 +321,7 @@ @include mixins.margin( var(--ion-item-divider-header3-trailing-margin-top), var(--ion-item-divider-header3-trailing-margin-end), - var(--ion-item-divider-header3-trailing-margin-bottom, 0), + var(--ion-item-divider-header3-trailing-margin-bottom), var(--ion-item-divider-header3-trailing-margin-start) ); } @@ -339,7 +339,7 @@ @include mixins.margin( var(--ion-item-divider-header4-trailing-margin-top), var(--ion-item-divider-header4-trailing-margin-end), - var(--ion-item-divider-header4-trailing-margin-bottom, 0), + var(--ion-item-divider-header4-trailing-margin-bottom), var(--ion-item-divider-header4-trailing-margin-start) ); } @@ -357,7 +357,7 @@ @include mixins.margin( var(--ion-item-divider-header5-trailing-margin-top), var(--ion-item-divider-header5-trailing-margin-end), - var(--ion-item-divider-header5-trailing-margin-bottom, 0), + var(--ion-item-divider-header5-trailing-margin-bottom), var(--ion-item-divider-header5-trailing-margin-start) ); } @@ -375,7 +375,7 @@ @include mixins.margin( var(--ion-item-divider-header6-trailing-margin-top), var(--ion-item-divider-header6-trailing-margin-end), - var(--ion-item-divider-header6-trailing-margin-bottom, 0), + var(--ion-item-divider-header6-trailing-margin-bottom), var(--ion-item-divider-header6-trailing-margin-start) ); } diff --git a/core/src/components/item/test/dividers/index.html b/core/src/components/item/test/dividers/index.html index 9ae573d551c..2960796ba68 100644 --- a/core/src/components/item/test/dividers/index.html +++ b/core/src/components/item/test/dividers/index.html @@ -71,6 +71,12 @@

Secondary header

+ + + + Light + + @@ -103,9 +109,15 @@

H1 Title Text

+ + + + + + Primary @@ -122,6 +134,13 @@

H1 Title Text

Column 3 + + + +

Header 2

+

Header 2 Last Child

+ +