+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
-
-
-
-
-
-
-
+
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
- 1
+ 1
-
-
-
-
-
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -241,18 +249,18 @@
Inside Tab Button - Top Icon
-
-
-
-
-
-
-
+
Tab One
9
+ 9
Tab Two
+
@@ -260,28 +268,28 @@
Tab Three
999
+ 999
Tab Four
-
+
Tab One
9
+ 9
Tab Two
+
@@ -289,13 +297,13 @@
Tab Three
999
+ 999
Tab Four
@@ -306,18 +314,18 @@
Inside Tab Button - Bottom Icon
-
+
Tab One
9
+ 9
Tab Two
+
@@ -325,28 +333,28 @@
Tab Three
999
+ 999
Tab Four
-
+
Tab One
9
+ 9
Tab Two
+
@@ -354,13 +362,13 @@
Tab Three
999
+ 999
Tab Four
@@ -370,22 +378,22 @@
Inside Button - Top Placement
-
+
1
+ 1
99+
+ 99+
+
@@ -396,22 +404,22 @@
Inside Button - Bottom Placement
-
+
1
+ 1
99+
+ 99+
+
@@ -421,40 +429,40 @@
Inside Button - Button Size
-
+
1
+ 1
1
+ 1
1
+ 1
1
+ 1
-
+
1
+ 1
1
+ 1
1
+ 1
1
+ 1
diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss
index b7e43f2e411..67e6f9acc9e 100644
--- a/core/src/components/button/button.common.scss
+++ b/core/src/components/button/button.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/mixins";
+@use "../../themes/mixins" as mixins;
@import "../../themes/functions.color";
// Button
@@ -95,7 +95,7 @@
}
:host(.button-block) .button-native {
- @include margin-horizontal(0);
+ @include mixins.margin-horizontal(0);
width: 100%;
@@ -116,7 +116,7 @@
}
:host(.button-full) .button-native {
- @include margin-horizontal(0);
+ @include mixins.margin-horizontal(0);
width: 100%;
@@ -124,18 +124,18 @@
}
:host(.button-full:not(.button-round)) .button-native {
- @include border-radius(0);
+ @include mixins.border-radius(0);
border-right-width: 0;
border-left-width: 0;
}
.button-native {
- @include border-radius(var(--border-radius));
- @include font-smoothing();
- @include margin(0);
- @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
- @include text-inherit();
+ @include mixins.border-radius(var(--border-radius));
+ @include mixins.font-smoothing();
+ @include mixins.margin(0);
+ @include mixins.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+ @include mixins.text-inherit();
display: flex;
@@ -223,7 +223,7 @@ ion-ripple-effect {
// --------------------------------------------------
.button-native::after {
- @include button-state();
+ @include mixins.button-state();
}
// Button Focused
@@ -300,21 +300,24 @@ ion-ripple-effect {
color: #{var(--ion-toolbar-background, var(--color))};
}
-// Button Badge
-// --------------------------------------------------
-
.button-native ion-ripple-effect,
.button-native::after {
- @include border-radius(inherit);
+ @include mixins.border-radius(inherit);
}
+// Button Slotted Elements
+// ---------------------------------------------
+
+// Badge Indicator
:host(.button-has-badge) .button-native {
--overflow: visible;
}
:host ::slotted(ion-badge[vertical]:not(:empty)) {
- display: flex;
-
- align-items: center;
- justify-content: center;
+ @include mixins.padding(
+ --ion-button-default-padding-top,
+ --ion-button-default-padding-end,
+ --ion-button-default-padding-bottom,
+ --ion-button-default-padding-start
+ );
}
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 21371acf605..51c1c7b4ea6 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -295,39 +295,3 @@
--padding-top: #{globals.$ion-space-0};
--padding-bottom: #{globals.$ion-space-0};
}
-
-:host(.button-small) ::slotted(ion-badge) {
- @include globals.position(null, calc(-1 * globals.$ion-space-050), null, null);
-}
-
-:host(.button-medium) {
- ::slotted(ion-badge.long-badge.badge-vertical-top) {
- @include globals.position($top: globals.$ion-space-100);
- }
- ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
- @include globals.position($bottom: globals.$ion-space-100);
- }
-
- ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
- @include globals.position(globals.$ion-space-100, globals.$ion-space-150, null, null);
- }
- ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
- @include globals.position(null, globals.$ion-space-150, globals.$ion-space-100, null);
- }
-}
-
-:host(.button-large) {
- ::slotted(ion-badge.long-badge.badge-vertical-top) {
- @include globals.position($top: globals.$ion-space-200);
- }
- ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
- @include globals.position($bottom: globals.$ion-space-200);
- }
-
- ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
- @include globals.position(globals.$ion-space-200, globals.$ion-space-200, null, null);
- }
- ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
- @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
- }
-}
diff --git a/core/src/components/button/button.native.scss b/core/src/components/button/button.native.scss
index 3b29fdca42f..10d02f60519 100644
--- a/core/src/components/button/button.native.scss
+++ b/core/src/components/button/button.native.scss
@@ -48,14 +48,3 @@
::slotted(ion-icon[slot="end"]) {
@include globals.margin(0, -0.2em, 0, 0.3em);
}
-
-// Button Badge
-// --------------------------------------------------
-
-.button-native ::slotted(ion-badge) {
- position: fixed;
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
- @include globals.padding(2px);
-}
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index aded6ecc555..feb883b142a 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -1,8 +1,8 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, State, forceUpdate, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
-import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, hasShadowDom, openURL } from '@utils/helpers';
+import type { Attributes, BadgeObserver } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom, openURL, createBadgeObserver } from '@utils/helpers';
import { printIonWarning } from '@utils/logging';
import { createColorClasses, hostContext } from '@utils/theme';
@@ -37,6 +37,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
private formButtonEl: HTMLButtonElement | null = null;
private formEl: HTMLFormElement | null = null;
private inheritedAttributes: Attributes = {};
+ private badgeObserver?: BadgeObserver;
@Element() el!: HTMLElement;
@@ -222,6 +223,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
+ componentDidLoad() {
+ this.setupBadgeObserver();
+ }
+
+ disconnectedCallback() {
+ this.destroyBadgeObserver();
+ }
+
private get hasIconOnly() {
return !!this.el.querySelector('[slot="icon-only"]');
}
@@ -356,7 +365,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.ionBlur.emit();
};
- private slotChanged = () => {
+ private iconOnlySlotChanged = () => {
/**
* Ensures that the 'has-icon-only' class is properly added
* or removed from `ion-button` when manipulating the
@@ -368,6 +377,50 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this.isCircle = this.hasIconOnly;
};
+ private onSlotChanged = () => {
+ /**
+ * Badges can be added or removed dynamically to mimic use
+ * cases like notifications. Based on the presence of a
+ * badge, we need to set up or destroy the badge observer.
+ *
+ * If the badge observer is already set up and there is a badge, then we don't need to do anything.
+ */
+ if (this.hasBadge && this.badgeObserver) {
+ return;
+ }
+
+ if (this.hasBadge) {
+ this.setupBadgeObserver();
+ } else {
+ this.destroyBadgeObserver();
+ }
+ };
+
+ private setupBadgeObserver() {
+ this.destroyBadgeObserver();
+
+ // Only set up the badge observer if there is a badge and it's anchored
+ const badge = this.el.querySelector('ion-badge[vertical]') as HTMLElement | null;
+
+ if (!badge) {
+ return;
+ }
+
+ const outerEl = this.el.shadowRoot!.querySelector('.button-native')!;
+ const innerEl = this.el.shadowRoot!.querySelector('.button-inner')!;
+
+ this.badgeObserver = createBadgeObserver({
+ host: this.el,
+ outerEl,
+ innerEl,
+ badge,
+ });
+ }
+
+ private destroyBadgeObserver() {
+ this.badgeObserver?.disconnect();
+ }
+
render() {
const {
buttonType,
@@ -446,9 +499,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
{...inheritedAttributes}
>
{mode === 'md' && Button - Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Button - Badge
+
+
+
+
+
+
+
+
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index 6d55dc8f439..cd4fb51fbe5 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -67,7 +67,8 @@ export class Chip implements ComponentInterface {
// TODO(FW-6266): Determine if `medium` size is needed.
/**
- * Set to `"small"` for a chip with less height and padding.
+ * Set to `"small"` for a chip with less height and padding,
+ * or `"large"` for a chip with more height and padding.
*
* Defaults to `"large"` if both the size property and theme config are unset.
*/
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index d2a77603305..65c7e9b2272 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -122,15 +122,6 @@
@include globals.position(calc(50% - globals.$ion-scale-100));
}
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
- @include globals.padding(globals.$ion-scale-100);
-
- display: flex;
-
- align-items: center;
- justify-content: center;
-}
-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
@include globals.position(calc(50% - globals.$ion-scale-100));
}
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index e4d4407e2b6..51d38c01cce 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -1,4 +1,4 @@
-import { currentColor, mix, dynamicFont } from '../../utils/theme';
+import { currentColor, mix, dynamicFont, ionColor } 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';
@@ -21,6 +21,12 @@ export const defaultTheme: DefaultTheme = {
formHighlight: true,
components: {
+ IonBadge: {
+ hue: 'subtle',
+ shape: 'round',
+ size: 'small',
+ },
+
IonChip: {
fill: 'solid',
hue: 'subtle',
@@ -94,6 +100,209 @@ export const defaultTheme: DefaultTheme = {
},
components: {
+ IonBadge: {
+ // Hues
+ hue: {
+ bold: {
+ default: {
+ background: ionColor('primary', 'base'),
+ color: ionColor('primary', 'contrast'),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base'),
+ color: currentColor('contrast'),
+ },
+ },
+ },
+
+ subtle: {
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ // Shapes
+ shape: {
+ crisp: {
+ border: {
+ radius: 'var(--ion-radii-sm)',
+ },
+ },
+
+ soft: {
+ border: {
+ radius: 'var(--ion-radii-md)',
+ },
+ },
+
+ round: {
+ border: {
+ radius: 'var(--ion-radii-xxxxl)',
+ },
+ },
+
+ rectangular: {
+ border: {
+ radius: 'var(--ion-radii-xxxxs)',
+ },
+ },
+ },
+
+ // Sizes
+ size: {
+ small: {
+ default: {
+ height: 'var(--ion-scaling-xxxs)',
+ letterSpacing: '0%',
+
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xxxs)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xxxs)',
+ },
+
+ font: {
+ size: 'var(--ion-font-size-xs)',
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ line: {
+ height: 'var(--ion-scaling-xxs)',
+ },
+
+ icon: {
+ width: 'var(--ion-scaling-xxxxs)',
+ height: 'var(--ion-scaling-xxxxs)',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-200)',
+
+ min: {
+ width: 'var(--ion-scaling-200)',
+ },
+ },
+ },
+
+ medium: {
+ default: {
+ height: 'var(--ion-scaling-xs)',
+ letterSpacing: '0%',
+
+ min: {
+ width: 'var(--ion-scaling-xs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xxs)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xxs)',
+ },
+
+ font: {
+ size: 'var(--ion-font-size-sm)',
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ line: {
+ height: 'var(--ion-scaling-xs)',
+ },
+
+ icon: {
+ width: 'var(--ion-scaling-xxxs)',
+ height: 'var(--ion-scaling-xxxs)',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-xxxxs)',
+
+ min: {
+ width: 'var(--ion-scaling-xxxxs)',
+ },
+ },
+ },
+
+ large: {
+ default: {
+ height: 'var(--ion-scaling-xs)',
+ letterSpacing: '0%',
+
+ min: {
+ width: 'var(--ion-scaling-xs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xxs)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xxs)',
+ },
+
+ font: {
+ size: 'var(--ion-font-size-sm)',
+ weight: 'var(--ion-font-weight-medium)',
+ },
+
+ line: {
+ height: 'var(--ion-scaling-xs)',
+ },
+
+ icon: {
+ width: 'var(--ion-scaling-xxxs)',
+ height: 'var(--ion-scaling-xxxs)',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-xxxs)',
+
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+ },
+ },
+ },
+
+ indicator: {
+ height: 'var(--ion-scaling-xxxs)',
+
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-0)',
+ end: 'var(--ion-spacing-xxxs)',
+ bottom: 'var(--ion-spacing-0)',
+ start: 'var(--ion-spacing-xxxs)',
+ },
+
+ icon: {
+ width: 'var(--ion-scaling-xxxxs)',
+ height: 'var(--ion-scaling-xxxxs)',
+ },
+ },
+ },
+
IonChip: {
margin: {
top: 'var(--ion-spacing-0)',
@@ -225,8 +434,8 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', null, true),
- color: currentColor('contrast', null, true),
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
},
},
},
@@ -247,11 +456,11 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', null, true),
- color: currentColor('contrast', null, true),
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
border: {
- color: currentColor('shade', null, true),
+ color: currentColor('shade', { subtle: true }),
style: 'solid',
width: '1px',
},
@@ -536,5 +745,13 @@ export const defaultTheme: DefaultTheme = {
},
},
},
+
+ IonTabButton: {
+ badge: {
+ indicator: {
+ position: 'relative',
+ },
+ },
+ },
},
};
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index f79dd62558b..68ffe81204a 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -1,4 +1,4 @@
-import { rgba, currentColor, clamp, mix, dynamicFont } from '../../utils/theme';
+import { rgba, currentColor, clamp, mix, dynamicFont, ionColor } 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';
@@ -23,6 +23,12 @@ export const defaultTheme: DefaultTheme = {
config: {
components: {
+ IonBadge: {
+ hue: 'bold',
+ shape: 'soft',
+ size: 'small',
+ },
+
IonChip: {
fill: 'solid',
hue: 'bold',
@@ -95,6 +101,213 @@ export const defaultTheme: DefaultTheme = {
},
components: {
+ IonBadge: {
+ // Hues
+ hue: {
+ bold: {
+ default: {
+ background: ionColor('primary', 'base'),
+ color: ionColor('primary', 'contrast'),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base'),
+ color: currentColor('contrast'),
+ },
+ },
+ },
+
+ subtle: {
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ // Shapes
+ shape: {
+ crisp: {
+ border: {
+ radius: 'var(--ion-radii-sm)',
+ },
+ },
+
+ soft: {
+ border: {
+ radius: 'var(--ion-radii-md)',
+ },
+ },
+
+ round: {
+ border: {
+ radius: 'var(--ion-radii-xxxxl)',
+ },
+ },
+
+ rectangular: {
+ border: {
+ radius: 'var(--ion-radii-xxxxs)',
+ },
+ },
+ },
+
+ // Sizes
+ size: {
+ small: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-250)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-75)',
+ end: 'var(--ion-spacing-xxs)',
+ bottom: 'var(--ion-spacing-xxs)',
+ start: 'var(--ion-spacing-xxs)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-150)',
+
+ min: {
+ width: 'var(--ion-scaling-150)',
+ },
+ },
+ },
+
+ medium: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-xs)',
+ end: 'var(--ion-spacing-xs)',
+ bottom: 'var(--ion-spacing-xs)',
+ start: 'var(--ion-spacing-xs)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-250)',
+
+ min: {
+ width: 'var(--ion-scaling-250)',
+ },
+ },
+ },
+
+ large: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-sm)',
+ end: 'var(--ion-spacing-sm)',
+ bottom: 'var(--ion-spacing-sm)',
+ start: 'var(--ion-spacing-sm)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-350)',
+
+ min: {
+ width: 'var(--ion-scaling-350)',
+ },
+ },
+ },
+ },
+
+ indicator: {
+ in: {
+ button: {
+ default: {
+ height: 'var(--ion-scaling-xxxs)',
+
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ line: {
+ height: 'var(--ion-scaling-xxs)',
+ },
+
+ font: {
+ size: `${(12 / global.root).toFixed(2)}rem`,
+ },
+
+ icon: {
+ width: 'var(--ion-scaling-xxxxs)',
+ height: 'var(--ion-scaling-xxxxs)',
+ },
+ },
+ },
+
+ tab: {
+ button: {
+ default: {
+ position: 'absolute',
+ },
+ },
+ },
+ },
+ },
+ },
+
+ IonButton: {
+ badge: {
+ default: {
+ padding: {
+ top: 'var(--ion-spacing-xxxs)',
+ end: 'var(--ion-spacing-xxxs)',
+ bottom: 'var(--ion-spacing-xxxs)',
+ start: 'var(--ion-spacing-xxxs)',
+ },
+ },
+ },
+ },
+
IonChip: {
margin: {
top: 'var(--ion-spacing-xxs)',
@@ -186,20 +399,20 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', 0.08),
+ background: currentColor('base', { alpha: 0.08 }),
color: currentColor('shade'),
},
hover: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
focus: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
activated: {
- background: currentColor('base', 0.16),
+ background: currentColor('base', { alpha: 0.16 }),
},
},
},
@@ -236,22 +449,22 @@ export const defaultTheme: DefaultTheme = {
color: currentColor('shade'),
border: {
- color: currentColor('base', 0.32),
+ color: currentColor('base', { alpha: 0.32 }),
style: 'solid',
width: 'var(--ion-border-width-xxs)',
},
},
hover: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
focus: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
activated: {
- background: currentColor('base', 0.16),
+ background: currentColor('base', { alpha: 0.16 }),
},
},
},
@@ -280,20 +493,20 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', null, true),
- color: currentColor('contrast', null, true),
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
},
hover: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
focus: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
activated: {
- background: currentColor('base', 0.8, true),
+ background: currentColor('base', { alpha: 0.8, subtle: true }),
},
},
},
@@ -327,25 +540,25 @@ export const defaultTheme: DefaultTheme = {
semantic: {
default: {
background: 'transparent',
- color: currentColor('contrast', null, true),
+ color: currentColor('contrast', { subtle: true }),
border: {
- color: currentColor('base', 0.12),
+ color: currentColor('base', { alpha: 0.12 }),
style: 'solid',
width: 'var(--ion-border-width-xxs)',
},
},
hover: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
focus: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
activated: {
- background: currentColor('base', 0.8, true),
+ background: currentColor('base', { alpha: 0.8, subtle: true }),
},
},
},
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index b978c59ef9b..311ed4f7f30 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -1,4 +1,4 @@
-import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme';
+import { rgba, currentColor, mix, dynamicFont, ionColor } 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';
@@ -26,6 +26,12 @@ export const defaultTheme: DefaultTheme = {
rippleEffect: true,
components: {
+ IonBadge: {
+ hue: 'bold',
+ shape: 'soft',
+ size: 'small',
+ },
+
IonChip: {
fill: 'solid',
hue: 'bold',
@@ -98,6 +104,177 @@ export const defaultTheme: DefaultTheme = {
},
components: {
+ IonBadge: {
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ // Hues
+ hue: {
+ bold: {
+ default: {
+ background: ionColor('primary', 'base'),
+ color: ionColor('primary', 'contrast'),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base'),
+ color: currentColor('contrast'),
+ },
+ },
+ },
+
+ subtle: {
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+ },
+ },
+ },
+
+ // Shapes
+ shape: {
+ soft: {
+ border: {
+ radius: 'var(--ion-radii-sm)',
+ },
+ },
+
+ round: {
+ border: {
+ radius: 'var(--ion-radii-xxxxl)',
+ },
+ },
+
+ rectangular: {
+ border: {
+ radius: 'var(--ion-radii-xxxxs)',
+ },
+ },
+ },
+
+ // Sizes
+ size: {
+ small: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-250)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-75)',
+ end: 'var(--ion-spacing-xxs)',
+ bottom: 'var(--ion-spacing-xxs)',
+ start: 'var(--ion-spacing-xxs)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-150)',
+
+ min: {
+ width: 'var(--ion-scaling-150)',
+ },
+ },
+ },
+
+ medium: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-xs)',
+ end: 'var(--ion-spacing-xs)',
+ bottom: 'var(--ion-spacing-xs)',
+ start: 'var(--ion-spacing-xs)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-250)',
+
+ min: {
+ width: 'var(--ion-scaling-250)',
+ },
+ },
+ },
+
+ large: {
+ default: {
+ min: {
+ width: 'var(--ion-scaling-xxxs)',
+ },
+
+ padding: {
+ top: 'var(--ion-spacing-sm)',
+ end: 'var(--ion-spacing-sm)',
+ bottom: 'var(--ion-spacing-sm)',
+ start: 'var(--ion-spacing-sm)',
+ },
+
+ font: {
+ size: dynamicFont(global.root, 13),
+ weight: 'var(--ion-font-weight-bold)',
+ },
+
+ line: {
+ height: '1',
+ },
+ },
+
+ empty: {
+ height: 'var(--ion-scaling-350)',
+
+ min: {
+ width: 'var(--ion-scaling-350)',
+ },
+ },
+ },
+ },
+ },
+
+ IonButton: {
+ badge: {
+ default: {
+ padding: {
+ top: 'var(--ion-spacing-xxxs)',
+ end: 'var(--ion-spacing-xxxs)',
+ bottom: 'var(--ion-spacing-xxxs)',
+ start: 'var(--ion-spacing-xxxs)',
+ },
+ },
+ },
+ },
+
IonChip: {
margin: {
top: 'var(--ion-spacing-xxs)',
@@ -184,20 +361,20 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', 0.08),
+ background: currentColor('base', { alpha: 0.08 }),
color: currentColor('shade'),
},
hover: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
focus: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
activated: {
- background: currentColor('base', 0.16),
+ background: currentColor('base', { alpha: 0.16 }),
},
},
},
@@ -233,22 +410,22 @@ export const defaultTheme: DefaultTheme = {
color: currentColor('shade'),
border: {
- color: currentColor('base', 0.32),
+ color: currentColor('base', { alpha: 0.32 }),
style: 'solid',
width: 'var(--ion-border-width-xxxs)',
},
},
hover: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
focus: {
- background: currentColor('base', 0.12),
+ background: currentColor('base', { alpha: 0.12 }),
},
activated: {
- background: currentColor('base', 0.16),
+ background: currentColor('base', { alpha: 0.16 }),
},
},
},
@@ -277,20 +454,20 @@ export const defaultTheme: DefaultTheme = {
// Any of the semantic colors like primary, secondary, etc.
semantic: {
default: {
- background: currentColor('base', null, true),
- color: currentColor('contrast', null, true),
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
},
hover: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
focus: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
activated: {
- background: currentColor('base', 0.8, true),
+ background: currentColor('base', { alpha: 0.8, subtle: true }),
},
},
},
@@ -324,25 +501,25 @@ export const defaultTheme: DefaultTheme = {
semantic: {
default: {
background: 'transparent',
- color: currentColor('contrast', null, true),
+ color: currentColor('contrast', { subtle: true }),
border: {
- color: currentColor('base', 0.12),
+ color: currentColor('base', { alpha: 0.12 }),
style: 'solid',
width: 'var(--ion-border-width-xxxs)',
},
},
hover: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
focus: {
- background: currentColor('base', 0.6, true),
+ background: currentColor('base', { alpha: 0.6, subtle: true }),
},
activated: {
- background: currentColor('base', 0.8, true),
+ background: currentColor('base', { alpha: 0.8, subtle: true }),
},
},
},
@@ -667,5 +844,13 @@ export const defaultTheme: DefaultTheme = {
},
},
},
+
+ IonTabButton: {
+ badge: {
+ indicator: {
+ position: 'absolute',
+ },
+ },
+ },
},
};
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index e7e8685cff9..fec9edb0d88 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -242,6 +242,7 @@ export type BaseTheme = {
export type IonicConfig = IonicGlobalConfig & {
components?: {
+ IonBadge?: any;
IonChip?: IonChipConfig;
IonSpinner?: IonSpinnerConfig;
};
@@ -280,9 +281,13 @@ export type DefaultTheme = BaseTheme & {
};
type Components = {
+ IonAvatar?: any;
+ IonBadge?: any;
+ IonButton?: any;
IonChip?: IonChipRecipe;
IonItemDivider?: IonItemDividerRecipe;
IonSpinner?: IonSpinnerRecipe;
+ IonTabButton?: any;
IonCard?: any;
IonItem?: any;
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 17a563b601e..cf1d41c051f 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -475,3 +475,121 @@ export const deepMerge = (target: any, source: any): any => {
}
return result;
};
+
+export interface BadgePositionConfig {
+ /**
+ * The host element that contains the badge slots.
+ */
+ host: HTMLElement;
+
+ /**
+ * The element whose border-radius defines the corner arc.
+ * This is the visual outer edge (e.g. .button-native).
+ *
+ * If omitted, host is used (e.g. avatar, where the host
+ * element is the visual outer edge).
+ */
+ outerEl?: Element;
+
+ /**
+ * The element that the badge's `position: absolute` resolves
+ * against. Only needed when the positioned ancestor differs
+ * from outerEl (e.g. .button-inner inside .button-native).
+ *
+ * If omitted, outerEl is used — meaning no delta compensation
+ * is needed (e.g. avatar, where the badge resolves directly
+ * against the host).
+ */
+ innerEl?: Element;
+
+ /**
+ * The badge element to position.
+ */
+ badge: HTMLElement;
+}
+
+/**
+ * Positions badges on the edge of a parent component's
+ * corner arc at 45°.
+ *
+ * Formula:
+ * offset = borderRadius * 0.2929 - badgeSize / 2
+ *
+ * Where 0.2929 = 1 - cos(45°).
+ *
+ * Adapts to any shape of the parent component:
+ * - any border radius -> badge on corner arc
+ * - rectangular -> badge at exact corner
+ */
+export function positionBadges(config: BadgePositionConfig): void {
+ const { host, innerEl } = config;
+ const outerEl = config.outerEl ?? host;
+
+ const outerRect = outerEl.getBoundingClientRect();
+
+ // If innerEl is provided, calculate the delta between outer and inner edges.
+ // Otherwise, delta is 0 (badge resolves directly against outerEl).
+ let deltaTop = 0;
+ let deltaRight = 0;
+ let deltaBottom = 0;
+
+ if (innerEl) {
+ const innerRect = innerEl.getBoundingClientRect();
+ deltaTop = innerRect.top - outerRect.top;
+ deltaRight = outerRect.right - innerRect.right;
+ deltaBottom = outerRect.bottom - innerRect.bottom;
+ }
+
+ // Resolve border-radius to pixels
+ const computedStyles = getComputedStyle(outerEl);
+ let borderRadius = parseFloat(computedStyles.borderTopRightRadius) || 0;
+
+ // Clamp to half the smallest dimension (matches browser behavior)
+ const maxRadius = Math.min(outerRect.width, outerRect.height) / 2;
+ borderRadius = Math.min(borderRadius, maxRadius);
+
+ // 0.2929 = 1 - cos(45°)
+ const cornerOffset = borderRadius * 0.2929;
+
+ const badge = host.querySelector('ion-badge[vertical]') as HTMLElement | null;
+ if (!badge) return;
+
+ const vertical = badge.getAttribute('vertical');
+ const badgeRect = badge.getBoundingClientRect();
+
+ const right = cornerOffset - deltaRight - badgeRect.width / 2;
+ const top = cornerOffset - deltaTop - badgeRect.height / 2;
+ const bottom = cornerOffset - deltaBottom - badgeRect.height / 2;
+
+ badge.style.right = `${right}px`;
+
+ if (vertical === 'top') {
+ badge.style.top = `${top}px`;
+ badge.style.bottom = '';
+ } else if (vertical === 'bottom') {
+ badge.style.bottom = `${bottom}px`;
+ badge.style.top = '';
+ }
+}
+
+export interface BadgeObserver {
+ disconnect: () => void;
+}
+
+/**
+ * Creates a ResizeObserver that repositions badges whenever
+ * the observed element changes size.
+ *
+ * @returns BadgeObserver with a disconnect method
+ */
+export function createBadgeObserver(config: BadgePositionConfig): BadgeObserver {
+ const observer = new ResizeObserver(() => {
+ positionBadges(config);
+ });
+
+ observer.observe(config.outerEl ?? config.host);
+
+ return {
+ disconnect: () => observer.disconnect(),
+ };
+}
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index d0c098807cc..cd62a0c5b36 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -595,6 +595,11 @@ export function rgba(colorRgb: string, alpha: number | string): string {
return `rgba(${colorRgb}, ${alpha})`;
}
+interface CurrentColorOptions {
+ alpha?: number | string | null;
+ subtle?: boolean;
+}
+
/**
* Mimics the Ionic Framework `current-color` function logic to construct CSS color values.
*
@@ -604,7 +609,9 @@ export function rgba(colorRgb: string, alpha: number | string): string {
* @param subtle If true, uses the '--ion-color-subtle-' prefix.
* @returns A string containing the CSS value (e.g., 'var(--ion-color-primary)' or 'rgba(var(--ion-color-primary-rgb), 0.16)').
*/
-export function currentColor(variation: string, alpha: number | string | null = null, subtle: boolean = false): string {
+export function currentColor(variation: string, options: CurrentColorOptions = {}): string {
+ const { alpha = null, subtle = false } = options;
+
// 1. Determine the base CSS variable name
const variable = subtle ? `--ion-color-subtle-${variation}` : `--ion-color-${variation}`;
@@ -612,14 +619,53 @@ export function currentColor(variation: string, alpha: number | string | null =
if (alpha === null) {
// Corresponds to: @return var(#{$variable});
return `var(${variable})`;
- } else {
- // 3. Handle the case where alpha is provided
- // Corresponds to: @return rgba(var(#{$variable}-rgb), #{$alpha});
+ }
+
+ // 3. Handle the case where alpha is provided
+ // Corresponds to: @return rgba(var(#{$variable}-rgb), #{$alpha});
+
+ // NOTE: The resulting string uses the CSS variable for the RGB components
+ // (e.g., '255, 0, 0') and the provided alpha.
+ return `rgba(var(${variable}-rgb), ${alpha})`;
+}
+
+interface IonColorOptions {
+ alpha?: number | string | null;
+ rgb?: boolean;
+ subtle?: boolean;
+}
- // NOTE: The resulting string uses the CSS variable for the RGB components
- // (e.g., '255, 0, 0') and the provided alpha.
- return `rgba(var(${variable}-rgb), ${alpha})`;
+export function ionColor(name: string, variation: string, options: IonColorOptions = {}): string {
+ const { alpha = null, rgb = false, subtle = false } = options;
+
+ // Build base variable name
+ const base = subtle ? `--ion-color-${name}-subtle` : `--ion-color-${name}`;
+ const variationSuffix = variation === 'base' ? '' : `-${variation}`;
+ let variable = `${base}${variationSuffix}`;
+
+ // Build the fallback variable name (only for bold colors)
+ let fallbackVariable: string | null = null;
+
+ if (!subtle) {
+ const fallbackBase = `--ion-color-${name}-bold`;
+ fallbackVariable = `${fallbackBase}${variationSuffix}`;
}
+
+ // Handle alpha transparency
+ if (alpha !== null) {
+ const rgbVar = `${variable}-rgb`;
+ const fallbackRgb = fallbackVariable ? `${fallbackVariable}-rgb` : null;
+
+ return fallbackRgb ? `rgba(var(${rgbVar}, var(${fallbackRgb})), ${alpha})` : `rgba(var(${rgbVar}), ${alpha})`;
+ }
+
+ // Handle RGB variables
+ if (rgb) {
+ variable = `${variable}-rgb`;
+ fallbackVariable = fallbackVariable ? `${fallbackVariable}-rgb` : null;
+ }
+
+ return fallbackVariable ? `var(${variable}, var(${fallbackVariable}))` : `var(${variable})`;
}
/**
@@ -629,7 +675,7 @@ export function currentColor(variation: string, alpha: number | string | null =
* @param min The minimum value
* @param val The preferred value
* @param max The maximum value
- * @returns
+ * @returns A string containing the CSS clamp() function call (e.g., 'clamp(1rem, 2vw, 3rem)').
*/
export function clamp(min: number | string, val: number | string, max: number | string): string {
return `clamp(${min}, ${val}, ${max})`;