this.confirm(true)}
@@ -2595,8 +2599,10 @@ export class Datetime implements ComponentInterface {
+ {/* The datetime styles its buttons through the `bold` hue tokens, so a hue from the config can't restyle them */}
this.prevMonth()}
@@ -2612,6 +2618,7 @@ export class Datetime implements ComponentInterface {
>
this.nextMonth()}
diff --git a/core/src/components/datetime/test/basic/datetime.spec.ts b/core/src/components/datetime/test/basic/datetime.spec.ts
new file mode 100644
index 00000000000..db9b458f16c
--- /dev/null
+++ b/core/src/components/datetime/test/basic/datetime.spec.ts
@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { config } from '../../../../global/config';
+import { Button } from '../../../button/button';
+import { Datetime } from '../../datetime';
+
+describe('datetime: buttons', () => {
+ beforeEach(() => {
+ const mockIntersectionObserver = jest.fn();
+ mockIntersectionObserver.mockReturnValue({
+ observe: () => null,
+ unobserve: () => null,
+ disconnect: () => null,
+ });
+ global.IntersectionObserver = mockIntersectionObserver;
+ });
+
+ afterEach(() => {
+ config.reset({});
+ });
+
+ it('should keep the bold hue when the theme config sets another hue', async () => {
+ config.reset({ customTheme: { config: { components: { IonButton: { hue: 'subtle' } } } } });
+
+ const page = await newSpecPage({
+ components: [Datetime, Button],
+ html: ``,
+ });
+
+ const datetime = page.body.querySelector('ion-datetime')!;
+ const buttons = Array.from(datetime.shadowRoot!.querySelectorAll('ion-button'));
+
+ expect(buttons.map((button) => button.classList.contains('button-hue-bold'))).toEqual([
+ true,
+ true,
+ true,
+ true,
+ true,
+ ]);
+ });
+});
diff --git a/core/src/components/input-password-toggle/input-password-toggle.tsx b/core/src/components/input-password-toggle/input-password-toggle.tsx
index 075f7222097..10d04f3273a 100644
--- a/core/src/components/input-password-toggle/input-password-toggle.tsx
+++ b/core/src/components/input-password-toggle/input-password-toggle.tsx
@@ -150,8 +150,10 @@ export class InputPasswordToggle implements ComponentInterface {
[mode]: true,
})}
>
+ {/* Themes color the toggle through its `bold` hue tokens, so a hue from the config can't restyle it */}
{
+ afterEach(() => {
+ config.reset({});
+ });
+
it('should toggle input type when clicked', async () => {
const page = await newSpecPage({
components: [Input, InputPasswordToggle, Button],
@@ -112,4 +117,22 @@ describe('input password toggle', () => {
// color is an actual prop so we can access the element property
expect(button.color).toBe('danger');
});
+
+ it('should keep the bold hue when the theme config sets another hue', async () => {
+ config.reset({ customTheme: { config: { components: { IonButton: { hue: 'subtle' } } } } });
+
+ const page = await newSpecPage({
+ components: [Input, InputPasswordToggle, Button],
+ template: () => (
+
+
+
+ ),
+ });
+
+ const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle')!;
+ const button = inputPasswordToggle.shadowRoot!.querySelector('ion-button')!;
+
+ expect(button.classList.contains('button-hue-bold')).toBe(true);
+ });
});
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index f2d789219db..ae0219a0400 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -534,6 +534,214 @@ export const defaultTheme: DefaultTheme = {
},
},
},
+
+ subtle: {
+ solid: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'shade', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ // A white wash over the button
+ disabled: {
+ background: ionColor('primary', 'base', { subtle: true }),
+
+ opacity: '0.4',
+ },
+
+ rippleEffect: {
+ color: ionColor('primary', 'shade', { subtle: true }),
+ opacity: '1',
+ },
+
+ // Any of the semantic colors like primary, secondary, etc.
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ focus: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('shade', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: currentColor('base', { subtle: true }),
+ },
+
+ rippleEffect: {
+ color: currentColor('shade', { subtle: true }),
+ opacity: '1',
+ },
+ },
+ },
+
+ outline: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ default: {
+ background: baseColors.backgroundColor,
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ border: {
+ color: ionColor('primary', 'shade', { subtle: true }),
+ style: 'solid',
+ width: 'var(--ion-border-width-xxxs)',
+ },
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: baseColors.backgroundColor,
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'shade', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ // A white wash over the button
+ disabled: {
+ background: baseColors.backgroundColor,
+
+ opacity: '0.4',
+ },
+
+ rippleEffect: {
+ color: ionColor('primary', 'shade', { subtle: true }),
+ opacity: '1',
+ },
+
+ semantic: {
+ default: {
+ background: baseColors.backgroundColor,
+ color: currentColor('foreground', { subtle: true }),
+
+ border: {
+ color: currentColor('shade', { subtle: true }),
+ },
+ },
+
+ focus: {
+ background: baseColors.backgroundColor,
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('shade', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: baseColors.backgroundColor,
+ },
+
+ rippleEffect: {
+ color: currentColor('shade', { subtle: true }),
+ opacity: '1',
+ },
+ },
+ },
+
+ clear: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ default: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'shade', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ // A white wash over the button
+ disabled: {
+ background: 'transparent',
+
+ opacity: '0.4',
+ },
+
+ rippleEffect: {
+ color: ionColor('primary', 'shade', { subtle: true }),
+ opacity: '1',
+ },
+
+ semantic: {
+ default: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ focus: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('shade', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+ },
+
+ rippleEffect: {
+ color: currentColor('shade', { subtle: true }),
+ opacity: '1',
+ },
+ },
+ },
+ },
},
// Sizes
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 4792abebb22..5b92f509908 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -413,7 +413,7 @@ export const defaultTheme: DefaultTheme = {
default: {
background: 'transparent',
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
border: {
color: ionColor('primary', 'base'),
@@ -428,13 +428,13 @@ export const defaultTheme: DefaultTheme = {
focus: {
background: ionColor('primary', 'base', { alpha: 0.1 }),
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
},
// Fades the whole button instead of changing its color
hover: {
background: 'transparent',
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
opacity: '0.6',
},
@@ -456,7 +456,7 @@ export const defaultTheme: DefaultTheme = {
semantic: {
default: {
background: 'transparent',
- color: currentColor('base'),
+ color: currentColor('foreground'),
border: {
color: currentColor('base'),
@@ -465,12 +465,12 @@ export const defaultTheme: DefaultTheme = {
focus: {
background: currentColor('base', { alpha: 0.1 }),
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
hover: {
background: 'transparent',
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
activated: {
@@ -538,12 +538,12 @@ export const defaultTheme: DefaultTheme = {
focus: {
background: currentColor('base', { alpha: 0.1 }),
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
hover: {
background: 'transparent',
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
activated: {
@@ -558,6 +558,227 @@ export const defaultTheme: DefaultTheme = {
},
},
},
+
+ subtle: {
+ solid: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-semi-bold)',
+ },
+ },
+
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+
+ font: {
+ weight: 'var(--ion-font-weight-normal)',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'shade', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'tint', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ activated: {
+ background: ionColor('primary', 'shade', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.08),
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+
+ // Any of the semantic colors like primary, secondary, etc.
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ focus: {
+ background: currentColor('shade', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('tint', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ activated: {
+ background: currentColor('shade', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.08),
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+ },
+ },
+
+ outline: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-semi-bold)',
+ },
+ },
+
+ default: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ border: {
+ color: ionColor('primary', 'shade', { subtle: true }),
+ style: 'solid',
+ width: 'var(--ion-border-width-25)',
+ },
+
+ font: {
+ weight: 'var(--ion-font-weight-normal)',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'base', { alpha: 0.1 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ // Fades the whole button instead of changing its color
+ hover: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ opacity: '0.6',
+ },
+
+ activated: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+
+ semantic: {
+ default: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+
+ border: {
+ color: currentColor('shade', { subtle: true }),
+ },
+ },
+
+ focus: {
+ background: currentColor('base', { alpha: 0.1 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ activated: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+ },
+ },
+
+ clear: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-semi-bold)',
+ },
+ },
+
+ default: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ // The clear fill uses a regular weight font
+ font: {
+ weight: 'normal',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'base', { alpha: 0.1 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ // Fades the whole button instead of changing its color
+ hover: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ opacity: '0.6',
+ },
+
+ activated: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ opacity: '0.4',
+ },
+
+ disabled: {
+ background: 'transparent',
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+
+ semantic: {
+ default: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ focus: {
+ background: currentColor('base', { alpha: 0.1 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ activated: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.25),
+ },
+ },
+ },
+ },
},
// Sizes
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index acc7e997dd6..2b9e3ba12ce 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -442,7 +442,7 @@ export const defaultTheme: DefaultTheme = {
default: {
background: 'transparent',
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
border: {
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
@@ -457,12 +457,12 @@ export const defaultTheme: DefaultTheme = {
focus: {
background: ionColor('primary', 'base', { alpha: 0.12 }),
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
},
hover: {
background: ionColor('primary', 'base', { alpha: 0.04 }),
- color: ionColor('primary', 'base'),
+ color: ionColor('primary', 'foreground'),
},
disabled: {
@@ -482,7 +482,7 @@ export const defaultTheme: DefaultTheme = {
semantic: {
default: {
background: 'transparent',
- color: currentColor('base'),
+ color: currentColor('foreground'),
border: {
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
@@ -491,12 +491,12 @@ export const defaultTheme: DefaultTheme = {
focus: {
background: currentColor('base', { alpha: 0.12 }),
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
hover: {
background: currentColor('base', { alpha: 0.04 }),
- color: currentColor('base'),
+ color: currentColor('foreground'),
},
disabled: {
@@ -579,6 +579,257 @@ export const defaultTheme: DefaultTheme = {
},
},
},
+
+ subtle: {
+ solid: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-bold)',
+ },
+ },
+
+ default: {
+ background: ionColor('primary', 'base', { subtle: true }),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+ box: {
+ shadow:
+ '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
+ },
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: overlay(
+ ionColor('primary', 'base', { subtle: true }),
+ ionColor('primary', 'contrast', { alpha: 0.24, subtle: true })
+ ),
+ color: ionColor('primary', 'contrast', { subtle: true }),
+
+ box: {
+ shadow:
+ '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)',
+ },
+ },
+
+ hover: {
+ background: overlay(
+ ionColor('primary', 'base', { subtle: true }),
+ ionColor('primary', 'contrast', { alpha: 0.08, subtle: true })
+ ),
+
+ color: ionColor('primary', 'contrast', { subtle: true }),
+
+ box: {
+ shadow:
+ '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)',
+ },
+ },
+
+ // The ripple shows the press, and the button lifts
+ activated: {
+ box: {
+ shadow:
+ '0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)',
+ },
+ },
+
+ disabled: {
+ background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+
+ box: {
+ shadow: 'none',
+ },
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.24',
+ },
+
+ // Any of the semantic colors like primary, secondary, etc.
+ semantic: {
+ default: {
+ background: currentColor('base', { subtle: true }),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ focus: {
+ background: overlay(
+ currentColor('base', { subtle: true }),
+ currentColor('contrast', { alpha: 0.24, subtle: true })
+ ),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ hover: {
+ background: overlay(
+ currentColor('base', { subtle: true }),
+ currentColor('contrast', { alpha: 0.08, subtle: true })
+ ),
+ color: currentColor('contrast', { subtle: true }),
+ },
+
+ disabled: {
+ background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.24',
+ },
+ },
+ },
+
+ outline: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-bold)',
+ },
+ },
+
+ default: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+ style: 'solid',
+ width: 'var(--ion-border-width-xxxs)',
+ },
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'base', { alpha: 0.12 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'base', { alpha: 0.04 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+ },
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.12',
+ },
+
+ semantic: {
+ default: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+ },
+ },
+
+ focus: {
+ background: currentColor('base', { alpha: 0.12 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('base', { alpha: 0.04 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ border: {
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+ },
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.12',
+ },
+ },
+ },
+
+ clear: {
+ strong: {
+ font: {
+ weight: 'var(--ion-font-weight-bold)',
+ },
+ },
+
+ default: {
+ background: 'transparent',
+ color: ionColor('primary', 'foreground', { subtle: true }),
+
+ font: {
+ weight: 'var(--ion-font-weight-medium)',
+ },
+ },
+
+ focus: {
+ background: ionColor('primary', 'base', { alpha: 0.12 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: ionColor('primary', 'base', { alpha: 0.04 }),
+ color: ionColor('primary', 'foreground', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.12',
+ },
+
+ semantic: {
+ default: {
+ background: 'transparent',
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ focus: {
+ background: currentColor('base', { alpha: 0.12 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ hover: {
+ background: currentColor('base', { alpha: 0.04 }),
+ color: currentColor('foreground', { subtle: true }),
+ },
+
+ disabled: {
+ background: 'transparent',
+
+ color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+ },
+
+ rippleEffect: {
+ opacity: '0.12',
+ },
+ },
+ },
+ },
},
// Sizes
diff --git a/packages/angular/src/lazy/directives/proxies.ts b/packages/angular/src/lazy/directives/proxies.ts
index fac112ef588..d63f1eb8133 100644
--- a/packages/angular/src/lazy/directives/proxies.ts
+++ b/packages/angular/src/lazy/directives/proxies.ts
@@ -385,14 +385,14 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
@ProxyCmp({
- inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
+ inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
})
@Component({
selector: 'ion-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['buttonType', 'color', { name: 'disabled', transform: nullableBooleanAttribute }, 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', { name: 'strong', transform: nullableBooleanAttribute }, 'target', 'type'],
+ inputs: ['buttonType', 'color', { name: 'disabled', transform: nullableBooleanAttribute }, 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', { name: 'strong', transform: nullableBooleanAttribute }, 'target', 'type'],
outputs: ['ionFocus', 'ionBlur'],
standalone: false
})
diff --git a/packages/angular/src/standalone/directives/ion-button.ts b/packages/angular/src/standalone/directives/ion-button.ts
index 3e2d0a4c863..02547f53074 100644
--- a/packages/angular/src/standalone/directives/ion-button.ts
+++ b/packages/angular/src/standalone/directives/ion-button.ts
@@ -11,14 +11,14 @@ import { defineCustomElement as defineIonButton } from '@ionic/core/components/i
@ProxyCmp({
defineCustomElementFn: defineIonButton,
- inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
+ inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
})
@Component({
selector: 'ion-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['buttonType', 'color', { name: 'disabled', transform: nullableBooleanAttribute }, 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', { name: 'strong', transform: nullableBooleanAttribute }, 'target', 'type'],
+ inputs: ['buttonType', 'color', { name: 'disabled', transform: nullableBooleanAttribute }, 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', { name: 'strong', transform: nullableBooleanAttribute }, 'target', 'type'],
outputs: ['ionFocus', 'ionBlur'],
})
export class IonButton {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index feeeadddac1..21448c2899c 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -182,6 +182,7 @@ export const IonButton: StencilVueComponent = /*@__PURE__*/ defin
'disabled',
'expand',
'fill',
+ 'hue',
'routerDirection',
'routerAnimation',
'download',